JS鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)方法

更新時(shí)間：2013年03月07日 15:37:10 作者：

程序開發(fā)人員可以使用一些簡(jiǎn)單的技術(shù)來改進(jìn)自己的代碼編寫工作。你可以寫一些函數(shù)來處理各種常見任務(wù)，以節(jié)省時(shí)間；也可以改進(jìn)一下代碼的實(shí)現(xiàn)方式，比如你可以把方法的鏈?zhǔn)秸{(diào)用技術(shù)用到自己所寫的JS庫中，把自己喜歡的方法串起來調(diào)用。

鏈?zhǔn)秸{(diào)用
鏈?zhǔn)秸{(diào)用其實(shí)只不過是一種語法招數(shù)。它能讓你通過重用一個(gè)初始操作來達(dá)到用少量代碼表達(dá)復(fù)雜操作的目的。該技術(shù)包括兩個(gè)部分：

一個(gè)創(chuàng)建代表HTML元素的對(duì)象的工廠。

一批對(duì)這個(gè)HTML元素執(zhí)行某些操作的方法。

調(diào)用鏈的結(jié)構(gòu)
$函數(shù)負(fù)責(zé)創(chuàng)建支持鏈?zhǔn)秸{(diào)用的對(duì)象

復(fù)制代碼代碼如下:

(function() {
    /*
     * 創(chuàng)建一個(gè)私有class
     * @param {Object} els  arguments 所有參數(shù)組成的類數(shù)組
     */
    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);
        }
    }
    //對(duì)HTML元素可執(zhí)行的操作
    _$.prototype = {
        each: function() {},
        setStyle: function() {},
        show: function() {},
        addEvent: function() {},
    };    
    //對(duì)外開放的接口
    window.$ = function() {
        return new _$(arguments);
    };   
})();

由于所有對(duì)象都會(huì)繼承其原型對(duì)象的屬性和方法，所以我們可以讓定義在原型對(duì)象中的那些方法都返回用以調(diào)用方法的實(shí)例對(duì)象的引用，這樣就可以對(duì)那些方法進(jìn)行鏈?zhǔn)秸{(diào)用了。

復(fù)制代碼代碼如下:

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

鏈?zhǔn)秸{(diào)用的方法獲取數(shù)據(jù)
使用回調(diào)函數(shù)從支持鏈?zhǔn)秸{(diào)用的方法獲取數(shù)據(jù)。鏈?zhǔn)秸{(diào)用很適合賦值器方法，但對(duì)于取值器方法，你可能希望他們返回你要的數(shù)據(jù)而不是this(調(diào)用該方法的對(duì)象).解決方案：利用回調(diào)技術(shù)返回所要的數(shù)據(jù).

復(fù)制代碼代碼如下:

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

設(shè)計(jì)一個(gè)支持方法鏈?zhǔn)秸{(diào)用的JS庫
JS庫特征：

事件：添加和刪除事件監(jiān)聽器、對(duì)事件對(duì)象進(jìn)行規(guī)劃化處理

DOM：類名管理、樣式管理

Ajax：對(duì)XMLHttpRequest進(jìn)行規(guī)范化處理

復(fù)制代碼代碼如下:

Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
    return this;
};
(function() {
    function _$(els) {
        //...
    }
    /*
     * Events
     *      addEvent
     *      removeEvent
     */
    _$.method('addEvent', function(type, fn) {
        //...  
    }).method('removeEvent', function(type, fn) {

    })
    /*
     * DOM
     *      addClass
     *      removeClass
     *      hover
     *      hasClass
     *      getClass
     *      getStyle
     *      setStyle
     */
    .method('addClass', function(classname) {
        //...
    }).method('removeClass', function(classname) {
        //...
    }).method('hover', function(newclass, oldclass) {
        //...
    }).method('hasClass', function(classname) {
        //...
    }).method('getClass', function(classname) {
        //...
    }).method('getStyle', function(prop) {
        //...
    }).method('setStyle', function(prop, val) {
        //...
    })
    /*
     * AJAX
     *      ajax
     */
    .method('ajax', function(url, method) {
        //...
    });

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

小結(jié)：

鏈?zhǔn)秸{(diào)用有助于簡(jiǎn)化代碼的編寫工作，并在某種程度上可以讓代碼更加簡(jiǎn)潔、易讀。很多時(shí)候使用鏈?zhǔn)秸{(diào)用可以避免多次重復(fù)使用一個(gè)對(duì)象變量，從而減少代碼量。如果想讓類的接口保持一致，讓賦值器和取值器都支持鏈?zhǔn)秸{(diào)用，那么你可以在取值器中使用回調(diào)函數(shù)來解決獲取數(shù)據(jù)問題。

您可能感興趣的文章: