jQuery鏈式調用

http://www.imooc.com/code/3402   

jQuery的核心理念是Write less,Do more(寫的更少,做的更多)，那么鏈式方法的設計與這個核心理念不謀而合。那么從深層次考慮這種設計其實就是一種Internal DSL。

DSL是指Domain Specific Language，也就是用於描述和解決特定領域問題的語言。

我們看一段鏈式代碼：

$('input[type="button"]')
    .eq(0).click(function() {
        alert('點擊我!');
}).end().eq(1)
.click(function() {
    $('input[type="button"]:eq(0)').trigger('click');
}).end().eq(2)
.toggle(function() {
    $('.aa').hide('slow');
}, function() {
    $('.aa').show('slow');
});

看這個代碼的結構，我們或多或少都能猜到其含義：

  ☑  找出type類型為button的input元素

  ☑  找到第一個按鈕，並綁定click事件處理函數

  ☑  返回所有按鈕，再找到第二個

  ☑  為第二個按鈕綁定click事件處理函數

  ☑  為第三個按鈕綁定toggle事件處理函數

      那么可見jQuery的Internal DSL形式帶來的好處——編寫代碼時，讓代碼更貼近作者的思維模式；閱讀代碼時，讓讀者更容易理解代碼的含義；應用DSL可以有效的提高系統的可維護性（縮小了實現模型和領域模型的距離，提高了實現的可讀性）和靈活性，並且提供開發的效率。

jQuery的這種管道風格的DSL鏈式代碼，總的來說：

  ☑  節約JS代碼；

  ☑  所返回的都是同一個對象，可以提高代碼的效率。

通過簡單擴展原型方法並通過return this的形式來實現跨瀏覽器的鏈式調用。利用JS下的簡單工廠方法模式，來將所有對於同一個DOM對象的操作指定同一個實例。

這個原理就超簡單了,如下代碼：

aQuery().init().name()

分解：

a = aQuery();
a.init()
a.name()

把代碼分解一下，很明顯實現鏈式的基本條件就是要實例對象先創建好，調用自己的方法。

aQuery.prototype = {
    init: function() {
        return this;
    },
    name: function() {
        return this
    }
}

      所以我們如果需要鏈式的處理，只需要在方法內部方法當前的這個實例對象this就可以了，因為返回當前實例的this，從而又可以訪問自己的原型了，這樣的就節省代碼量，提高代碼的效率，代碼看起來更優雅。但是這種方法有一個問題是：所有對象的方法返回的都是對象本身，也就是說沒有返回值，所以這種方法不一定在任何環境下都適合。

      雖然Javascript是無阻塞語言，但是他並不是沒阻塞，而是不能阻塞，所以他需要通過事件來驅動，異步來完成一些本需要阻塞進程的操作，這樣處理只是同步鏈式，除了同步鏈式還有異步鏈式，異步鏈式jQuery從1.5開始就引入了Promise，jQuery.Deferred后期再討論。