摘要：創(chuàng)建基本庫首先創(chuàng)建一個(gè)基本庫，名字叫做用于編寫最常用的代碼，然后不斷的擴(kuò)展封裝。

首先創(chuàng)建一個(gè)基本庫，名字叫做base.js,用于編寫最常用的代碼，然后不斷的擴(kuò)展封裝。
在最常用的代碼中，最常用的就是獲取節(jié)點(diǎn)的方法。這里我們可以編寫代碼如下：

//創(chuàng)建base.js
//整個(gè)庫可以是一個(gè)對(duì)象
var Base={
    //方法名盡可能簡(jiǎn)短而富有意義
    getId:function(id){
        return document.getElementById(id);
    },
    getName:function(name){
        return document.getElementsByName(name);
    },
    getTagName:function(tag){
        return document.getElementsByTagName(tag);
    }
}
//類方法調(diào)用
window.onload=function(){
    alert(Base.getId("box").innerHTML);
    alert(Base.getName("chk")[0].value);
    alert(Base.getTagName("p")[0].innerHTML);
};

即可以使用Base.getId("box").css("color","red").html("標(biāo)題").click(function(){alert("a")});類似的語句實(shí)現(xiàn)對(duì)象方法的連續(xù)調(diào)用
需要在步驟1的基礎(chǔ)上改寫庫對(duì)象：

//分析：想要實(shí)現(xiàn)連綴語法Base.getId("box").css("color","red").html("標(biāo)題").click(function(){alert("a")});
//需要在Base類中實(shí)現(xiàn)css(),html(),click()方法，且方法都要return一個(gè)Base對(duì)象
//在Base對(duì)象中，一般設(shè)置css,innnerHTML,onclick的方法如下
//var base=new Base();    new一個(gè)Base類的實(shí)例
//base.getId("box").style.color="red";   定義color
//base.getId("box").style.backgroundColor="red";
//base.getId("box").innerHTML="標(biāo)題";
//base.getId("box").onclick=function(){alert("a")};
//現(xiàn)在需要將上面的設(shè)置為Base類的css,html,click方法，

//定義$函數(shù)，用于生成多個(gè)Base()實(shí)例對(duì)象，后面需要Base實(shí)例時(shí)，直接使用$()即可
var $ = function(){
    return new Base();
};
function Base(){
    //使用this關(guān)鍵字創(chuàng)建elements數(shù)組，用來保存獲取目標(biāo)節(jié)點(diǎn)和節(jié)點(diǎn)數(shù)組
    this.elements=[];
    //使用this關(guān)鍵字定義獲取節(jié)點(diǎn)的方法
    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){
    //對(duì)指定節(jié)點(diǎn)元素設(shè)置屬性和值
    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;
};
//類方法調(diào)用
window.onload=function(){
     //每一個(gè)$()為一個(gè)對(duì)象實(shí)例，可調(diào)用類中封裝好的方法
    $().getId("box").css("color","red").html("title");
    $().getTagName("p").css("color","blue").html("標(biāo)題");
};

以上是通過html()方法和css()方法可以設(shè)置標(biāo)題內(nèi)容和CSS樣式，但現(xiàn)在如果想要通過這兩個(gè)方法獲取已將定義好的屬性值：類似于:$().getId("box").html(); $().getId("box").css();時(shí)是不滿足的，現(xiàn)在就需要重寫這兩個(gè)方法。

//分析：要實(shí)現(xiàn)方法既能設(shè)置傳入的參數(shù)值，返回Base對(duì)象，又能在傳入?yún)?shù)為null的情況下返回當(dāng)前屬性值，那只要判斷傳過來的參數(shù)即可：
//如果沒有傳參數(shù)，則函數(shù)返回當(dāng)前屬性值，如果傳入?yún)?shù)，則需要設(shè)置傳入的屬性值，并返回Base對(duì)象，重寫的代碼如下：
Base.prototype.css=function(attr,value){
    //對(duì)指定節(jié)點(diǎn)元素設(shè)置屬性和值
    for(var i in this.elements){
        //使用arguments數(shù)組對(duì)象獲取傳入的參數(shù)，并判斷參數(shù)的個(gè)數(shù)
        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數(shù)組對(duì)象獲取傳入的參數(shù)，并判斷參數(shù)的個(gè)數(shù)
        if(arguments.length==0){
            return this.elements[i].innerHTML;
        }
        this.elements[i].innerHTML=str;
    }
    return this;
};
//類方法調(diào)用
window.onload=function(){
     //每一個(gè)$()為一個(gè)對(duì)象實(shí)例，可調(diào)用類中封裝好的方法
    $().getId("box").css("color","red").html("title");
    //$().getTagName("p").css("color","blue").html("標(biāo)題");
    alert($().getId("box").html());
    alert($().getId("box").css("color"));
};

以上獲取的css樣式，僅是行內(nèi)的css，如果使用link鏈接的外部CSS,又該如何處理呢？
這里可以使用W3C 的window.getComputedStyle和IE的currentStyle來獲取，更改后的代碼如下：

Base.prototype.css=function(attr,value){
    //對(duì)指定節(jié)點(diǎn)元素設(shè)置屬性和值
    for(var i in this.elements){
        //使用arguments數(shù)組對(duì)象獲取傳入的參數(shù)，并判斷參數(shù)的個(gè)數(shù)
        if(arguments.length==1){
            if(typeof window.getComputedStyle != "undefined"){//W3C
                return window.getComputedStyle(this.elements[i],null)[attr];
            }else if(typeof this.elements[i].currentStyle != "undefined"){//IE
                return this.elements[i].currentStyle[attr];
            }
        }
        this.elements[i].style[attr]=value;
    }
    return this;
}

以上內(nèi)容來自李炎恢老師JavaScript課程實(shí)戰(zhàn)篇筆記整理