javascript基础： JavaScript 库

一、 JavaScript 库

 JavaScript库,就是把各种常用的代码片段 ,组织起来放在一个js文件里,组成一个包,这个包就是JavaScript库。 目的是为了方便以后使用，而不用重复书写相同功能的代码。

二、实现思路

base.js(基础库文件)

//这是一个基础库,我们准备在里面编写最常用的代码,然后不断的扩展封装。
//整个库可以是一个对象，这个对象就是Base；简单的库里所有的方法就是这个对象的方法
var Base = {
	//以下是这个对象的三个属性，这三个属性是三个不同的方法
	//方法名尽可能简短富有含义
	//1.通过id获得节点对象
	getId : function (id) {
		return document.getElementById(id)
	},
	//2.通过name获得节点集合
	getName : function (name) {
		return document.getElementsByName(name)
	},
	//3.通过TagName获得节点集合
	getTagName : function (tag) {
		return document.getElementsByTagName(tag);
	}
};

demo.js(前台调用)

//Base对象调用自己的方法
window.onload = function () {
	alert(Base.getId('box').innerHTML);
	alert(Base.getName('sex')[0].value);
	alert(Base.getTagName('p')[0].innerHTML)
};

三、让基础库实现连缀

base.js(基础库)

//为了避免在前台 new 一个对象,我们可以在库里面直接 new。
var $ = function  (){
	//在前台直接调用$()方法即可返回一个base对象，利用这个base对象就可以调用Base库里封装的方法
	//alert();
	var obj = new Base();
	return obj;
};

//利用构造函数的方式来创建一个对象就可以给原型对象添加属性
function Base (){
	//把返回的节点对象保存到一个Base对象的属性数组里
	//当需要使用这个返回的节点对象时就去数组里获取
	this.elements = [];

	//以下是获取节点和节点集合的的三个方法
	//并将节点对象放到数组里
	this.getId = function(id){
		this.elements.push(document.getElementById(id)) ;
		return this;//返回this对象（this这里是Base）目的是实现连缀的调用
	};

	this.getName = function(name){
		var names = document.getElementByName(name);
		for(var i = 0;i<names.length;i++){
			this.elements.push(names[i]);
		}
		return this;
	};

	this.getTagName = function(tagName){
		var tags = document.getElementByTagName(tagName);
		for(var i = 0;i<tags.length; i++){
			this.elements.push(tags[i]);
		}
		return this;
	};
}

//通过原型增加额外的方法
//这些方法最后都返回this对象，目的是实现连缀；

//1.给得到的每个节点对象添加点击事件
Base.prototype.click = function(fn){
	//给获得的每个节点对象都添加点击事件
	for(var i = 0;i<this.elements.length;i++){
		var obj = this.elements[i];
		obj.addEventListener('click',fn);//现代点击事件，后期可做兼容的优化
	}
	return this;
};

//2.设置节点的css属性
Base.prototype.css = function(attr,value){
	for(var i = 0;i<this.elements.length;i++){
		var obj = this.elements[i];
		obj.style[attr] = value;
	}
	return this;
};

//3.设置节点的innerHTML属性
Base.prototype.html = function(str){
	for(var i = 0;i<this.elements.length;i++){
		var obj = this.elements[i];
		obj.innerHTML = str;
	}
	return this;
};

PS：后续可以封装更多的方法

demo.js(前台调用)

window.onload = function(){
	//$();创建了一个base对象，这个对象有自己私有的一个数组，三个get方法。
	//$().getId('box');将id为box的对象添加到数组并返回base对象。
	//css('color','red').html('改变了html内容').click(function(){alert('添加了点击事件');}
	//后边这一系列的操作都是在操作数组里的对象，数组里是一个对象（id）或者是一组对象（name或者tagName）
	$().getId('box').css('color','red').html('改变了html内容').click(function(){
		alert('添加了点击事件');
	});
};