JS實現博客前端頁面（一）—— 封裝基礎庫

一、建立基本庫

首先建立一個基本庫，名字叫作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);
};

二、實現連綴語法

便可以使用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("標題");
};

三、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'){//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;
}

以上內容來自李炎恢老師JavaScript課程實戰篇筆記整理