1、什么是鏈式調用
這個很容易理解，例如:
$(this).setStyle('color', 'red').show(); 一般的函數調用和鏈式調用的區別：調用完方法后，return this返回當前調用方法的對象。
function Dog(){ this.run= function(){ alert("The dog is running...."); return this;//返回當前對象 Dog }; this.eat= function(){ alert("After running the dog is eatting...."); return this;//返回當前對象 Dog }; this.sleep= function(){ alert("After eatting the dog is running...."); return this;//返回當前對象 Dog }; } //一般的調用方式；/* var dog1 =new Dog(); dog1.run(); dog1.eat(); dog1.sleep();*/ var dog2 = new Dog(); dog2.run().eat().sleep(); 2、分解鏈式調用
鏈式調用其實是兩個部分：
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,這就將調用方法的對象傳給調用鏈上的下一個方法。
3、模擬jquery底層鏈式編程
// 塊級作用域//特點1 程序啟動的時候 里面的代碼直接執行了//特點2 內部的成員變量 外部無法去訪問 （除了不加var修飾的變量）(function(window , undefined){ // $ 最常用的對象 返回給外界 大型程序開發 一般使用'_'作為私用的對象(規范) function _$(arguments){ //實現代碼...這里僅實現ID選擇器 // 正則表達式匹配id選擇器 var idselector = /#/w+/ ; this.dom ; // 此屬性 接受所得到的元素 // 如果匹配成功 則接受dom元素 arguments[0] = '#inp' if(idselector.test(arguments[0])){ this.dom = document.getElementById(arguments[0].substring(1)); } else { throw new Error(' arguments is error !'); } }; // 在Function類上擴展一個可以實現鏈式編程的方法 Function.prototype.method = function(methodName , fn){ this.prototype[methodName] = fn ; return this ; //鏈式編程的關鍵 } // 在_$的原型對象上 加一些公共的方法 _$.prototype = { constructor : _$ , addEvent:function(type,fn){ // 給你的得到的元素 注冊事件 if(window.addEventListener){// FF this.dom.addEventListener(type , fn); } else if (window.attachEvent){// IE this.dom.attachEvent('on'+type , fn); } return this ; }, setStyle:function(prop , val){ this.dom.style[prop] = val ; return this ; } }; // window 上先注冊一個全局變量 與外界產生關系 window.$ = _$ ; // 寫一個準備的方法 _$.onReady = function(fn){ // 1 實例化出來_$對象 真正的注冊到window上 window.$ = function(){ return new _$(arguments); }; // 2 執行傳入進來的代碼 fn(); // 3 實現鏈式編程 _$.method('addEvent',function(){ // nothing to do }).method('setStyle',function(){ // nothing to do }); };})(window); // 程序的入口 window傳入作用域中$.onReady(function(){ var inp = $('#inp'); //alert(inp.dom.nodeName); //alert($('#inp')); inp.addEvent('click',function(){ alert('我被點擊了!'); }).setStyle('backgroundColor' , 'red');}); 4、使用回調函數從支持鏈式調用的方法獲取數據
鏈式調用很適合于賦值器方法，但對于取值器方法，就不方便了，因為每個方法返回的都是this啊。
不過，變通的方法還是有的，那就是回調函數。
未使用回調函數時
//without callbackwindow.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 callbackwindow.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 callbackwindow.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); 鏈式調用這種風格有助于簡化代碼的編寫工作，讓代碼更加簡潔、易讀，同時也避免多次重復使用一個對象變量，希望大家可以熟練掌握。
