学习JavaScript设计模式(链式调用)_javascript技巧

一般的函数调用和链式调用的区别：调用完方法后，return this返回当前调用方法的对象。

2、分解链式调用

链式调用其实是两个部分：

1）.操作对象(也就是被操作的DOM元素，如上例的$(this))

2）.操作方法(具体要做什么事情，如上例的setStyle和show)

如何实现操作对象与操作方法

创建一般的$函数：

function $(){
 var elements = [];
 for(var i= 0,len=arguments.length; i

但是，如果把这个函数改造为一个构造器，把那些元素作为数组保存在一个实例属性中，并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用，那么它就具有了链式调用的能力。(说了这么多，就是在每个方法最后return this;)，
我首先需要把这个$函数改为一个工厂方法，它负责创建支持链式调用的对象。这个函数应该能接受元素数组形式的参数，以便我们能够使用与原来一样的公用接口。这样以来，它就具有了进行链式调用的能力。
改造后如下：




在最后return this,这就将调用方法的对象传给调用链上的下一个方法。
3、模拟jquery底层链式编程




4、使用回调函数从支持链式调用的方法获取数据
链式调用很适合于赋值器方法，但对于取值器方法，就不方便了，因为每个方法返回的都是this啊。
不过，变通的方法还是有的，那就是回调函数。
未使用回调函数时



使用回调函数时



在使用回调函数时候callback.call(this, name)在一般情况下是没问题的，但是，这个例子偏偏用到了console.log，那么就有问题了。原因是console的this是指向console而不是winodw。
这个问题也很好解决。如下：



链式调用这种风格有助于简化代码的编写工作，让代码更加简洁、易读，同时也避免多次重复使用一个对象变量，希望大家可以熟练掌握。