跟我學開發javascript庫（二）連綴操作

本文重點來介紹，在調用庫的時候，我們需要能夠在前臺調用的時候可以同時設置多個操作，比如設置CSS、設置innerHTML、設置click事件等。

一、連綴介紹

通過原始的方法，要操作CSS、innerHTML、事件等，必須分別操作。但是應用連綴，就用一句代碼就可以實現了。比如：

Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function(){

alert('a');

});

連綴的好處，就是快速方便的設置節點的操作。

二、改寫庫對象

要實現上面的連綴寫法，首先就需要我們來分析下。

Base：是一個基礎庫的核心對象

Base.getId('box')：返回的是一個divElement，但這個對象是沒有css方法的，該怎麼辦呢？需要將它的返回改成返回Base對象即可。

調用Base.getID('box').css('color', 'red')返回的也是Base對象。

調用Base.getId('box').css('color','red').css('backgroundColor', 'black')還是返回Base對象。

調用Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox')也是返回的Base對象。

Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function(){

alert('a');

}); click方法執行完畢後，還是返回的Base對象，還可以繼續使用css等方法。

所以上篇中的返回divElement就不行了，所以要改寫之前的Base對象方法，用函數式對象定義Base對象：

前臺調用就需要改寫成如下方式：

此時結果還是：[object HTMLDivElement]

如果不使用連綴，對於接下來的css操作可能會怎麼做呢？是不是也是下面這樣操作呢？

所以function Base()應該改寫成：

再運行alert(base.getId('box'))，此時返回的是：[object Object]。這時再使用base.getId('box').style.color="red"，已經無效了，那應該如何操作呢？需要給Base對象添加css方法，我們選擇在外面Base構造函數外添加，在外面添加就需要在原型上添加：

接下來再添加getTagName()方法：

由於document.getElementsByTagName()返回的是一個偽數組，直接使用數組的push是不可以的，像上面那樣遍歷後逐項push進數組是可以的，還有一種簡便的方法：

同樣的Base裡的css方法也需要改寫成如下形式：

有了前面的基礎，再編寫html()、click()方法也就簡單多了：

至此，你覺得改寫是不是已經完畢了呢？運行看看，發現bug沒有呢。運行下面的代碼就會發現bug：

我們本想將div為box的元素和p元素分別設置背景顏色，可是運行的結果是p和box的背景顏色都被設置成了red，這樣做可不行，還需要再改寫。

其實也簡單，只需要在base.js中聲明一個$()方法，每次調用都return new Base()；即可。

將調用Base庫的方法改寫成$()，再運行 ，是不是達到目的了呢：

好了，連綴就說到這裡，明天繼續。