1、创建基本库

首先创建一个基本库，名字叫做base.js,用于编写最常用的代码，然后不断的扩展封装。
在最常用的代码中，最常用的就是获取节点的方法。这里我们可以编写代码如下：

//创建base.js
//整个库可以是一个对象
var Base={//方法名尽可能简短而富有意义getId:function(id){return document.getElementById(id);},getName:function(name){return document.getElementsByName(name);},getTagName:function(tag){return document.getElementsByTagName(tag);}
}
//类方法调用
window.onload=function(){alert(Base.getId('box').innerHTML);alert(Base.getName('chk')[0].value);alert(Base.getTagName('p')[0].innerHTML);
};

2、实现连缀语法

即可以使用Base.getId('box').css('color','red').html('标题').click(function(){alert('a')});类似的语句实现对象方法的连续调用
需要在步骤1的基础上改写库对象：

//分析：想要实现连缀语法Base.getId('box').css('color','red').html('标题').click(function(){alert('a')});
//需要在Base类中实现css(),html(),click()方法，且方法都要return一个Base对象
//在Base对象中，一般设置css,innnerHTML,onclick的方法如下
//var base=new Base();    new一个Base类的实例
//base.getId('box').style.color='red';   定义color
//base.getId('box').style.backgroundColor='red';
//base.getId('box').innerHTML='标题';
//base.getId('box').onclick=function(){alert('a')};
//现在需要将上面的设置为Base类的css,html,click方法，//定义$函数，用于生成多个Base()实例对象，后面需要Base实例时，直接使用$()即可
var $ = function(){return new Base();
};
function Base(){//使用this关键字创建elements数组，用来保存获取目标节点和节点数组this.elements=[];//使用this关键字定义获取节点的方法this.getId=function(id){var e=document.getElementById(id);this.elements.push(e);return this;}this.getTagName=function(tag){var e=document.getElementsByTagName(tag);for(var i in e){this.elements.push(e[i]);}return this;}
}
//也可以使用prototy添加Base的原型方法
Base.prototype.css=function(attr,value){//对指定节点元素设置属性和值for(var i in this.elements){this.elements[i].style[attr]=value;}return this;
}
Base.prototype.html=function(str){for(var i in this.elements){this.elements[i].innerHTML=str;}return this;
};
//类方法调用
window.onload=function(){//每一个$()为一个对象实例，可调用类中封装好的方法$().getId('box').css("color","red").html("title");$().getTagName('p').css("color","blue").html("标题");
};

3、CSS的封装

获取行内样式

以上是通过html()方法和css()方法可以设置标题内容和CSS样式，但现在如果想要通过这两个方法获取已将定义好的属性值：类似于:$().getId('box').html(); $().getId('box').css();时是不满足的，现在就需要重写这两个方法。

//分析：要实现方法既能设置传入的参数值，返回Base对象，又能在传入参数为null的情况下返回当前属性值，那只要判断传过来的参数即可：
//如果没有传参数，则函数返回当前属性值，如果传入参数，则需要设置传入的属性值，并返回Base对象，重写的代码如下：
Base.prototype.css=function(attr,value){//对指定节点元素设置属性和值for(var i in this.elements){//使用arguments数组对象获取传入的参数，并判断参数的个数if(arguments.length==1){return this.elements[i].style[attr];}this.elements[i].style[attr]=value;}return this;
}
Base.prototype.html=function(str){for(var i in this.elements){//使用arguments数组对象获取传入的参数，并判断参数的个数if(arguments.length==0){return this.elements[i].innerHTML;}this.elements[i].innerHTML=str;}return this;
};
//类方法调用
window.onload=function(){//每一个$()为一个对象实例，可调用类中封装好的方法$().getId('box').css("color","red").html("title");//$().getTagName('p').css("color","blue").html("标题");alert($().getId('box').html());alert($().getId('box').css("color"));
};

获取外部CSS样式

以上获取的css样式，仅是行内的css，如果使用link链接的外部CSS,又该如何处理呢？
这里可以使用W3C 的window.getComputedStyle和IE的currentStyle来获取，更改后的代码如下：

Base.prototype.css=function(attr,value){//对指定节点元素设置属性和值for(var i in this.elements){//使用arguments数组对象获取传入的参数，并判断参数的个数if(arguments.length==1){if(typeof window.getComputedStyle != 'undefined'){//W3Creturn window.getComputedStyle(this.elements[i],null)[attr];}else if(typeof this.elements[i].currentStyle != 'undefined'){//IEreturn this.elements[i].currentStyle[attr];}}this.elements[i].style[attr]=value;}return this;
}

以上内容来自李炎恢老师JavaScript课程实战篇笔记整理