• 連綴的介紹：
  最簡單的理解：一句話同時設定一個或多個節點兩個或者兩個以上操作。
  好處：快速方便的設定節點的操作。
  例子：

$().getId('box').css('color', 'red').html('標題').click(function () {alert('a')});

• 改寫庫物件：
  如果是實現操作連綴,那麼我們就需要改寫物件寫法: var Base = {},這種寫法無法在它的原型中新增方法,所以需要使用函式式物件寫法:

function Base() {
    //把返回的節點物件儲存到一個 Base 物件的屬性數組裡 this.elements = [];
 

    //獲取 id 節點
    this.getId = function (id) {
        this.elements.push(document.getElementById(id));
        return this; 
    };
    //獲取 name 節點陣列 
    this.getName = function (name) {
        var names = document.getElementsByName(name); 
        for (var i = 0; i < names.length; i ++) {
            this
 
.elements.push(targs[i]); 
        }
        return this; 
    }
    //獲取元素節點陣列 
    this.getTagName = function (tag) {
      var tags = document.getElementsByTagName(tag); 
        for (var i = 0; i < tags.length; i ++) {
            this.elements.push(tags); 
        }
        return this; 
    };
}
 

PS:這種寫法麻煩的地方是,需要在前臺 new 出來,然後呼叫。但採用這種方式, 我們可以在每個方法裡都返回這個物件 ,並且還可以在物件的原型裡新增 方法,這些都是連綴操作最基本的要求。

Base.prototype.click = function (fn) {
    for (var i = 0; i < this.elements.length; i ++) {
        this.elements[i].onclick = fn;  
    }
    return this; 
};
Base.prototype.css = function (attr, value) {
    for (var i = 0; i < this.elements.length; i ++) {
        this.elements[i].style[attr] = value; 
    }
    return this; 
}
Base.prototype.html = function (str) {
    for (var i = 0; i < this.elements.length; i ++) {
        this.elements[i].innerHTML = str; 
    }
    return this; 
}

PS:為了避免在前臺 new 一個物件,我們可以在庫裡面直接 new。

var $ = function () {
    return new Base(); 
};