JS鍊式呼叫的實作方法_javascript技巧

鍊式呼叫
    鍊式呼叫其實只不過是一種文法招數。它能讓你透過重複使用一個初始操作來達到用少量程式碼表達複雜操作的目的。技術包括兩個部分：

一個建立代表HTML元素的物件的工廠。

一批對這個HTML元素執行某些操作的方法。

呼叫鏈的結構
$函數負責建立支援鍊式呼叫的物件

複製程式碼 程式碼如下:

(function() {


(function() {


(function() {
>     * 建立私人class
     * @param {Object} els  arguments 所有參數組成的類別陣列
     */        for(var i=0, len=els.length; i          element === 'string' ) {
                element = document.getElementById(element);
      (element);
        }
    }
    //HTML元素可執行的操作
    _$.prototype = {
        each: function() {},
               addEvent: function() {},
    };   
    //對外開放的介面
    window.$ = function() {
  )( );



由於所有物件都會繼承其原型物件的屬性和方法，所以我們可以讓定義在原型物件中的那些方法都傳回用來呼叫方法的實例物件的引用，這樣就可以對那些方法進行鍊式調用了。

複製程式碼 程式碼如下:

(function() {
    /*
     * 建立一個私人類
     * @param {Object} els        //...
    }
    //HTML元素可執行的操作
    _$.prototype = {            for(var i=0; i      fn.call(this, this.elements[i]);
            }
           setStyle: function(prop, value) {
            this.each(function( el) {
                el.style[prop] = value;
                },
        show: function() {
            var that = this;
            this.each(function(el) {
               });
            return this;
        },
        addEvent: function (type, fn) {
            var addHandle = function(el) {
                    el.addEventListener(type, fn, false);
                }elseif(document. attachEvent) {
                    el.attachEvent('on' type, fn);            this.each(function(el) {
        });
            return this; 
        }
    }     }

})();

//----------------------- test --------
$(window).addEvent('load' , function() {
    $('test-1', 'test-2').show()
    .setStyle('color', 'red')
    .addEvent('click', function() {
        $(this).setStyle('color', 'green');
    });
})




鍊式呼叫的方法取得資料
    使用回呼函數從支援鍊式呼叫的方法取得資料。鍊式呼叫很適合賦值器方法，但對於取值器方法，你可能希望他們傳回你要的資料而不是this(呼叫該方法的物件).解決方案：利用回呼技術回傳所需的資料.

複製程式碼


程式碼如下:

window.API = window.API || function() {
    var name = 'mackxu';
    //特權方法
    .. >        name = name0;
        return this;
    };
   🎜>        return this;
    } ;
};
//------------- test ---
var obj = new API();
obj.getName(console.log) .setName('zhangsan').getName(console.log);


設計一個支援方法鍊式呼叫的JS函式庫
JS函式庫特徵：

事件： 新增與刪除事件監聽器、對事件物件進行規劃化處理
DOM： 類別名稱管理、樣式管理

Ajax： 對XMLHttpRequest進行規範化處理

複製程式碼 程式碼如下:Function.prototype.method = function(name, fnfn) {

    this.prototype[name] = fn;

    return this;
};
(function() {
    function _$(els) {
    }
    /*
     * Events
     *      🎜>    _$.method('addEvent', function(type, fn) {
        //... 
    }).method('removeEvent', function(type, fn) {

         addClass
     *      removeClass
     *      hover
     *           getStyle
     *      setStyle
     */
    .method('addClass', function(class)" >        //...
    }).method('removeClass', function(classname) {
        //...
  
        //...
    }).method('hasClass', function(classname) {
        //...
 
        //...
    }).method('getStyle', function(prop) {
        //...        //...
    })
    /*
     * AJAX        //...
    });

    window.$ = function() {
    / /解決JS庫命名衝突問題
    window.installHelper = function(scope, interface) {
        scope[interface] = function() {       }
    }
})();



小結：

    鍊式呼叫有助於簡化程式碼的編寫工作，並在某種程度上讓程式碼更簡潔、更易讀。很多時候使用鍊式呼叫可以避免多次重複使用一個物件變量，從而減少程式碼量。如果你想讓類別的介面保持一致，讓賦值器和取值器都支援鍊式調用，那麼你可以在取值器中使用回調函數來解決取得資料問題。