javascript鏈式調用的設計

轉http://bbs.blueidea.com/thread-2942014-1-1.html
另外還可以看看javascript設計模式的第6章

 

用過jQuery的朋友一定對jQuery中方法的鏈式調用印象深刻，最近發布的YUI3也支援了方法的鏈式調用。這是一個非常不錯的文法特性，能讓代碼 更加簡潔、易讀。很多時候鏈式調用可以避免多次重複使用一個物件變數，從而減少代碼，而js是一種用戶端執行的指令碼語言，減少代碼就減少了js檔案的大 小，減少了伺服器的壓力。鏈式調用這麼多優點，它是如何?的呢？這篇文章就是想探討一下這個問題。

鏈式調用例子如：$("p").append("test").fadeIn("fast");

看一段jQuery的源碼：複製內容到剪貼簿
代碼:

append: function() {
        return this.domManip(arguments, true, function(elem){
            if (this.nodeType == 1)
                this.appendChild( elem );
        });
    }

以上是jQuery中append方法的實現。append方法是向每個匹配的元素內部追加內容的方法，很明顯，屬於賦值操作，但是卻有傳回值，返回的是當前操作的dom(通常返回this指標)。這是鏈式調用的關鍵，你會發現這不過是個文法小技巧而已。

很明顯，在賦值器方法中(或者本身沒有傳回值的方法中)很容易實現鏈式調用，而取值器相對來說不好實現鏈式調用，因為你需要取值器返回你需要的資料而不是this指標(當然，如果你堅持要實現鏈式方法，也可以用回呼函數來實現)。

設計一個簡單的支援鏈式調用的類：複製內容到剪貼簿
代碼:

function Dog(name,color){
        this.name=name||"";
        this.color=color||"";
}
Dog.prototype.setName=function(name){
        this.name=name;
        return this;
};
Dog.prototype.setColor(color){
        this.color=color;
        return this;
};
Dog.prototype.yelp(){
        alert("我的名字叫："+this.name+",我的顏色是:"+this.color);
        return this;
};

使用方式：複製內容到剪貼簿
代碼:

var dog = new Dog();
dog.setName("旺財").setColor("白色").yelp();

取值器你也想支援鏈式調用？
那就用回呼函數來實現，將本來應該返回的值直接傳給回呼函數，而return仍然返回this指標。接著上面的Dog類寫一個方法：複製內容到剪貼簿
代碼:

Dog.prototype.getName(callback){
        callback.call(this,this.name);
        return this;
}

使用方式：複製內容到剪貼簿
代碼:

function showName(name){
        alert(name);
}
dog.setName("旺財").getName(showName).setColor("白色");