JavaScript设计模式 Item 5 —链式调用

1、什么是链式调用

这个很容易理解，例如:

  1. $(this).setStyle('color', 'red').show();

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

  1. function Dog(){
  2.         this.run= function(){
  3.             alert("The dog is running....");
  4.             return this;//返回当前对象 Dog
  5.         };
  6.         this.eat= function(){
  7.             alert("After running the dog is eatting....");
  8.             return this;//返回当前对象 Dog
  10.         };
  11.         this.sleep= function(){
  12.             alert("After eatting the dog is running....");
  13.             return this;//返回当前对象 Dog
  15.         };
  16.     }
  17.     //一般的调用方式；
  18. /*  var dog1 =new Dog();
  19.     dog1.run();
  20.     dog1.eat();
  21.     dog1.sleep();*/
  22.     var dog2 = new Dog();
  23.     dog2.run().eat().sleep();

2、分解链式调用

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

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

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

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

创建一般的$函数：

  1. function $(){
  2.     var elements = [];
  3.     for(var i= 0,len=arguments.length; i<len; i++){
  4.         var element = arguments[i];
  5.         if(typeof element==='string'){
  6.             element = document.getElementById(element);
  7.         }
  8.         if(arguments.length==1){
  9.             return element;
  10.         }
  11.         elements.push(element);
  12.     }
  13.     return elements;
  14. }

但是，如果把这个函数改造为一个构造器，把那些元素作为数组保存在一个实例属性中，并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用，那么它就具有了链式调用的能力。(说了这么多，就是在每个方法最后return this;)，

我首先需要把这个$函数改为一个工厂方法，它负责创建支持链式调用的对象。这个函数应该能接受元素数组形式的参数，以便我们能够使用与原来一样的公用接口。这样以来，它就具有了进行链式调用的能力。

改造后如下：

  1. (function(){
  2.     function _$(els){
  3.         this.elements = [];//把那些元素作为数组保存在一个实例属性中，
  4.         for(var i= 0, len=els.length; i<len; i++){
  5.             var element = els[i];
  6.             if(typeof element==='string'){
  7.                 element = document.getElementById(element);
  8.             }
  9.             this.elements.push(element);
  10.         }
  11.     }
  13.     _$.prototype = {
  14.         each: function(fn){
  15.             for(var i= 0,len=this.elements.length; i<len; i++){
  16.                 fn.call(this, this.elements[i]);
  17.             }
  18.             return this; //在每个方法的最后return this;
  19.         },
  20.         setStyle: function(prop, val){
  21.             this.each(function(el){
  22.                 el.style[prop] = val;
  23.             });
  24.             return this; //在每个方法的最后return this;
  25.         },
  26.         show: function(){
  27.             var that = this;
  28.             this.each(function(el){
  29.                 that.setStyle('display', 'block');
  30.             });
  31.             return this; //在每个方法的最后return this;
  32.         },
  33.         addEvent: function(type, fn){
  34.             var add = function(el){
  35.                 if(window.addEventListener){
  36.                     el.addEventListener(type, fn, false);
  37.                 }else if(window.attachEvent){
  38.                     el.addEvent('on'+type, fn);
  39.                 }
  40.             };
  41.             this.each(function(el){
  42.                 add(el);
  43.             });
  44.             return this; //在每个方法的最后return this;
  45.         }
  46.     }
  47.     window.$ = function(){
  48.         return new _$(arguments);
  49.     }
  50. })();

在最后return this,这就将调用方法的对象传给调用链上的下一个方法。

3、模拟jquery底层链式编程

  1. // 块级作用域
  2. //特点1  程序启动的时候  里面的代码直接执行了
  3. //特点2  内部的成员变量 外部无法去访问 （除了不加var修饰的变量）
  5. (function(window , undefined){
  6.     // $ 最常用的对象 返回给外界 大型程序开发 一般使用'_'作为私用的对象(规范)
  7.     function _$(arguments){
  8.         //实现代码...这里仅实现ID选择器
  9.         // 正则表达式匹配id选择器
  10.         var idselector = /#\w+/ ;
  11.         this.dom ;      // 此属性 接受所得到的元素
  12.         // 如果匹配成功 则接受dom元素   arguments[0] = '#inp'
  13.         if(idselector.test(arguments[0])){
  14.             this.dom = document.getElementById(arguments[0].substring(1));
  15.         } else {
  16.             throw new Error(' arguments is error !');
  17.         }
  18.     };
  20.     // 在Function类上扩展一个可以实现链式编程的方法
  21.     Function.prototype.method = function(methodName , fn){
  22.         this.prototype[methodName] = fn ;
  23.         return this ; //链式编程的关键
  24.     }
  26.     // 在_$的原型对象上 加一些公共的方法
  27.     _$.prototype = {
  28.         constructor : _$ ,
  29.         addEvent:function(type,fn){
  30.             // 给你的得到的元素 注册事件
  31.             if(window.addEventListener){// FF 
  32.                 this.dom.addEventListener(type , fn);
  33.             } else if (window.attachEvent){// IE
  34.                 this.dom.attachEvent('on'+type , fn);
  35.             }
  36.             return this ; 
  37.         },
  38.         setStyle:function(prop , val){
  39.             this.dom.style[prop] = val ;
  40.             return this ;
  41.         }
  42.     };
  44.      // window 上先注册一个全局变量 与外界产生关系
  45.     window.$ = _$ ;
  46.     // 写一个准备的方法
  47.     _$.onReady = function(fn){ 
  48.         // 1 实例化出来_$对象 真正的注册到window上
  49.         window.$ = function(){
  50.             return new _$(arguments);
  51.         };
  52.         // 2 执行传入进来的代码
  53.         fn();
  54.         // 3 实现链式编程
  55.         _$.method('addEvent',function(){
  56.             // nothing to do
  57.         }).method('setStyle',function(){
  58.             // nothing to do
  59.         });
  61.     };
  63. })(window); // 程序的入口 window传入作用域中
  65. $.onReady(function(){
  66.     var inp = $('#inp');
  67.     //alert(inp.dom.nodeName);
  68.     //alert($('#inp'));
  69.     inp.addEvent('click',function(){
  70.         alert('我被点击了!');
  71.     }).setStyle('backgroundColor' , 'red');
  72. });

4、使用回调函数从支持链式调用的方法获取数据

链式调用很适合于赋值器方法，但对于取值器方法，就不方便了，因为每个方法返回的都是this啊。

不过，变通的方法还是有的，那就是回调函数。

未使用回调函数时

  1. //without callback
  2. window.API = window.API || function(){
  3.     var name = 'JChen';
  4.     this.setName = function(newName){
  5.         name = newName;
  6.         return this;
  7.     };
  8.     this.getName = function(){
  9.         return name;
  10.     };
  11. };
  12. var o = new API();
  13. console.log(o.getName());
  14. console.log(o.setName('Haha').getName());

使用回调函数时

  1. //with callback
  2. window.API2 = window.API2 || function(){
  3.     var name = 'JChen';
  4.     this.setName = function(newName){
  5.         name = newName;
  6.         return this;
  7.     };
  8.     this.getName = function(callback){
  9.         callback.call(this, name);
  10.         return this;
  11.     };
  12. };
  13. var o2 = new API2();
  14. o2.getName(console.log).setName('Hehe').getName(console.log);

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

这个问题也很好解决。如下：

  1. //with callback
  2. window.API2 = window.API2 || function(){
  3.     var name = 'JChen';
  4.     this.setName = function(newName){
  5.         name = newName;
  6.         return this;
  7.     };
  8.     this.getName = function(callback){
  9.         callback.call(this, name);
  10.         return this;
  11.     };
  12. };
  13. var o2 = new API2();
  14. var log = function(para){
  15.     console.log(para);
  16. };
  17. o2.getName(log).setName('Hehe').getName(log);

5、总结

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