鏈式調用
鏈式調用其實只不過是一種語法招數。它能讓你通過重用一個初始操作來達到用少量代碼表達復雜操作的目的。該技術包括兩個部分:
一個創建代表HTML元素的對象的工廠。
一批對這個HTML元素執行某些操作的方法。
調用鏈的結構
$函數負責創建支持鏈式調用的對象
代碼如下:
(function() {
/*
* 創建一個私有class
* @param {Object} els arguments 所有參數組成的類數組
*/
function _$(els) {
this.elements = []; //存放HTML元素
for(var i=0, len=els.length; i<len; i++) {
var element = els[i];
if(typeof element === 'string') {
element = document.getElementById(element);
}
this.elements.push(element);
}
}
//對HTML元素可執行的操作
_$.prototype = {
each: function() {},
setStyle: function() {},
show: function() {},
addEvent: function() {},
};
//對外開放的接口
window.$ = function() {
return new _$(arguments);
};
})();
由于所有對象都會繼承其原型對象的屬性和方法,所以我們可以讓定義在原型對象中的那些方法都返回用以調用方法的實例對象的引用,這樣就可以對那些方法進行鏈式調用了。
代碼如下:
(function() {
/*
* 創建一個私有class
* @param {Object} els arguments 所有參數組成的類數組
*/
function _$(els) {
//...
}
//對HTML元素可執行的操作
_$.prototype = {
each: function(fn) { //fn 回調函數
for(var i=0; i<this.elements.length; i++) {
新聞熱點
疑難解答
圖片精選