【转】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("白色");