链式调用-CSDN博客

前段时间别人问我一个问题，什么是链式调用？我一下子蒙了。回头赶紧在网上查了一下，原来是这样啊。用过但不知道专业名词，跪拜啊。

下面我们就来详细了解一下吧。

所谓链式调用其实只不过是一种语法招数。它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。
该技术包括两个部分：
一个创建代表HTML元素的对象的工厂。
一批对这个HTML元素执行某些操作的方法。
我们来看一个小小的例子吧。
jquery代码：

$("div").addClass("newClass").text("Hello").show();

上面的语句为div元素添加了名为”newClass”的CSS class，把内容改为”Hello”，最后将其显示出来，非常的方便简洁。
下面我们也来创建自己的链式调用（由于本文只是说明如何实现链式调用，为了简单起见，我们将只支持id选择器），最后你会发现，实现链式调用是非常简单的事情，唯一需要做的就是在每个方法后面返回this。

(function(){
    function _$(id){
        this.ele = document.getElementById(id);
    }

    _$.prototype = {
        setColor : function(c){
            this.ele.style.color = c;
            return this; // Important
        },
        setBold : function(){
            this.ele.style.fontWeight = "bold";
            return this; // Important
        }
        /** 更多方法 **/
    }

    window.$ = function(id){
        return new _$(id);
    }
})();

说明：在上面的例子中，我们创建了一个闭包，同样使用了 $的命名空间，作为唯一提供给外部访问的$ 函数，它返回一个内部构造器_$的实例化对象，通过prototype实现了 setColor 和 setBold 方法，在每次调用这些方法时都会返回当前对象，于是返回的对象同样再次具有在prototype中定义的各种方法，这就是链式调用的唯一诀窍，就这么简单。