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

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

//創(chuàng)建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);
    }
}
//類方法調(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("標題").click(function(){alert("a")});類似的語句實現(xiàn)對象方法的連續(xù)調(diào)用
需要在步驟1的基礎上改寫庫對象：

//分析：想要實現(xiàn)連綴語法Base.getId("box").css("color","red").html("標題").click(function(){alert("a")});
//需要在Base類中實現(xiàn)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")};
//現(xiàn)在需要將上面的設置為Base類的css,html,click方法，

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

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

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