JS设计模式——6.方法的链式调用

什么是链式调用

这个很容易理解，例如:

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

分解链式调用

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

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

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

如何生成操作对象与操作方法

一般的$函数：

function $(){

    var elements = [];

    for(var i= 0,len=arguments.length; i<len; i++){

        var element = arguments[i];

        if(typeof element==='string'){

            element = document.getElementById(element);

        }

        if(arguments.length==1){

            return element;

        }

        elements.push(element);

    }

    return elements;

}

但是，如果把这个函数改造为一个构造器，把那些元素作为数组保存在一个实例属性中，

并让所有定义在构造函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用(说了这么多，就是在每个方法最后return this;)，

这样以来，它就具有了进行链式调用的能力。

改造后如下：

(function(){

    function _$(els){

        this.elements = [];//把那些元素作为数组保存在一个实例属性中，

        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);

        }

    }



    _$.prototype = {

        each: function(fn){

            for(var i= 0,len=this.elements.length; i<len; i++){

                fn.call(this, this.elements[i]);

            }
            return this; //在每个方法的最后return this;

        },

        setStyle: function(prop, val){

            this.each(function(el){

                el.style[prop] = val;

            });

            return this; //在每个方法的最后return this;

        },

        show: function(){

            var that = this;

            this.each(function(el){

                that.setStyle('display', 'block');

            });

            return this; //在每个方法的最后return this;

        },

        addEvent: function(type, fn){

            var add = function(el){

                if(window.addEventListener){

                    el.addEventListener(type, fn, false);

                }else if(window.attachEvent){

                    el.addEvent('on'+type, fn);

                }

            };

            this.each(function(el){

                add(el);

            });

            return this; //在每个方法的最后return this;

        }

    }

    window.$ = function(){

        return new _$(arguments);

    }

})();

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

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

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

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

未使用回调函数时

//without callback

window.API = window.API || function(){

    var name = 'JChen';

    this.setName = function(newName){

        name = newName;

        return this;

    };

    this.getName = function(){

        return name;

    };

};

var o = new API();

console.log(o.getName());

console.log(o.setName('Haha').getName());

使用回调函数时

//with callback

window.API2 = window.API2 || function(){

    var name = 'JChen';

    this.setName = function(newName){

        name = newName;

        return this;

    };

    this.getName = function(callback){

        callback.call(this, name);

        return this;

    };

};

var o2 = new API2();

o2.getName(console.log).setName('Hehe').getName(console.log);

总结

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

纠正

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

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

//with callback

window.API2 = window.API2 || function(){

    var name = 'JChen';

    this.setName = function(newName){

        name = newName;

        return this;

    };

    this.getName = function(callback){

        callback.call(this, name);

        return this;

    };

};

var o2 = new API2();

var log = function(para){

    console.log(para);

};

o2.getName(log).setName('Hehe').getName(log);