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('添加了点击事件');
});
};