聊聊jQuery的反模式

如果我們認為模式代表一個最佳的實踐，那么反模式將代表我們已經學到一個教訓。受啟發于Gof的《設計模式》，Andrew Koeing在1995年的11月的C++報告大會上首次提出反模式。在Koeing的報告中，反模式有著兩種觀念:

• 描述對于一個特殊的問題，提出了一個糟糕的解決方案，最終導致一個壞結果發生

• 描述如何擺脫上述解決方案并能提出一個好的解決方案

在如今這個前端發展如火如荼的時代，談及jq總是顯得非常的low，但實際上，在學校，在很多前端新人以及所謂“頁面仔 || 切圖工”之類的同行之間，jq的活力還是遠超各種框架的時候，之所以想寫這樣一篇文章，一是因為見到了身邊的jq爛代碼，二是因為我在百度jQuery反模式的時候居然什么有價值的相關結果都沒有，所以覺得還是有必要聊聊的。

先從些簡單的開始：

插入DOM節點：

// 反模式
$.each(reallyLongArray, function(count, item) {
    var newLi = '<li>' + item + '</li>';
    $('#ballers').append(newLi)
})

// 更好的實踐
var frag = document.createDocumentFragment()
$.each(reallyLongArray, function(count, item) {
    var newLi = '<li>' + item + '</li>';
    frag.appendChild(newLi[0])
})
$('#ballers')[0].appendChild(frag)
// 你也可以用字符串
var myHTML = ''
$.each(reallyLongArray, function(count, item) {
    myHTML += '<li>' + item + '</li>';
})
$('#ballers').html(myHTML)</pre> 
 
DocumentFragment是瀏覽器為了減少DOM操作中的更新所使用的API，詳情請查閱MDN相關文檔。

遵循DRY原則：
if ($a.data('current') != 'showing') {
    $a.stop()
}
if ($b.data('current') != 'showing') {
    $b.stop()
}
if ($c.data('current') != 'showing') {
    $c.stop()
}

// 用數組來保存不同的主體
var elems = [$a, $b, $c]
$.each(elems, function(k, v) {
    if (v.data('current') != 'showing') {
        v.stop()
    }
})</pre> 
 
 用數組或對象來保存重復片段的差異參數是一種很常見的方法。更多內容可以參考 常見的JavaScript設計模式 中的“九、策略模式” 

地獄式回調（callback hell）：
$(document).ready(function() {
    $('#button').click(function() {
        ......
        $.get('http://xxxx', function(data) {
            ......
        })
    })
})

// 以前有這么一種優化的方法，使用對象字面量保存回調使其扁平化
var PI = {
    onReady: function() {
        $('#button').click(PI.clickCb)    //Cb是Callback的簡寫
    }
    clickCb: function() {
        ......
        $.get('http://xxxx', getCb)
    }
    getCb: function() {
        ......
    }
}
$(document).ready(PI.onReady)
// 不過現在流行Promise
var initApp = new Promise(function(resolve, reject) {
    $(document).ready(resolve)
})
initApp.then(function() {
    return new Promise(function(resolve, reject) {
        $('#button').click(resolve)
    })
}).then(function() {
    return new Promise(function(resolve, reject) {
        $.get('http://xxxx', resolve)
    })
}).then(function(data) {
    console.log(data)
})</pre> 
 
用對象將回調扁平還好，Promise是什么鬼。不是比回調還惡心，好吧，示例確實是這樣。其實之所以用Promise除了將回調轉成鏈式調用以外，主要還是為了用它的reject函數獲取回調中的錯誤。像示例這種一路resolve的，沒必要這么用。這里只是提一句。

重復查詢：
$(document.body).append('<div class="baaron"></div>')
$('.baaron').click(function() {})

// 更好的方式
$('<div class="baaron"></div>')
    .appendTo(document.body)
    .click(function() {})</pre> 
 
選擇器：

對于jq的選擇器還有許多要注意的問題，因為jq的選擇器是從右向左查詢，所以請記住一個“左輕右重”的原則：
// 請看下面兩個選擇器
$('div.foo .bar')
$('.foo span.bar')        //右邊更明確一點，會好不少

// 當左邊確實要比右邊明確的時候這么干
$('#foo .bar')
$('#foo').find('.bar')
// 尤其避免使用通配符
$('#foo > *')
$('#foo').children()
// 有些通配符是隱式的
$('.foo :radio')
$('.foo *:radio')        //和上邊一樣的
$('.foo input:radio')    //改成這樣</pre> 
 
聊聊依賴：

接下來，讓我們從優化一段jq代碼開始，聊聊js中的依賴
$('#button').click(function() {
    $.get('http://xxxx', function(data) {
        $('#page').html(data.abc)
    })
})
 
 
這段代碼有以下問題：

 
  
 
click事件綁定的匿名函數難以重復利用，也很難測試
 

  
 
click回調的匿名函數中的$是全局變量，ajax請求回調的匿名函數中的$('#page')也是用到了$這一全局變量，全局變量應該是要避免的
 

  
 
回調的問題前面也說過了，這里的回調還很清楚不至于說到地獄的程度
 

 
現在我們把代碼這樣改寫：
var downJSON = function() {
    $.get('http://xxxx', function(data) {
        $('#page').html(data.abc)
    })
}

$('#button').click(downJSON)</pre> 
 
現在匿名函數被我們拿出來了，可以重用了，但還是難以測試，且涵蓋全局變量。

繼續：
var downJSON = function($, $el) {
    $.get('http://xxxx', function(data) {
        $el.html(data.abc)
    })
}

$('#button').click(function() {
    downJSON($, $('#page'))
})</pre> 
 
這樣改寫以后，沒有了全局變量，函數已經獨立出去。換一種說法就是，我們去除了函數中的隱式依賴（前面例子中的函數要運行需要全局變量$，但沒有從函數聲明中表現出來，我們稱其為隱式依賴），現在，函數執行所需要的依賴被顯示聲明，使其具有更好的可控性。前端的依賴管理如今是一個很流行的話題，不過在這里就不廢話了。

奇技淫巧：
最后，對于幾種比較常見的寫法，我們也可以使用一些奇技淫巧，或能使代碼更短，或能使代碼更為易讀：
簡化條件語句：
// 常見的寫法
if(!data) {
    data = {}
}

// 簡化
data = data || {}</pre> 
 
 你可能覺得這不值一提，但可能有些時候你寫著寫著就忽視了。比如， js數組去重的4個方法 中的第二個方法，就可以應用這個技巧： 

// 原來的代碼
Array.prototype.unique2 = function()
{
    var hashTable = {},res=[];                //n為hash表，r為臨時數組
    for(var i = 0; i < this.length; i++) {    //遍歷當前數組
        if (!hashTable[this[i]]) {            //如果hash表中沒有當前項
            res.push(this[i]);                //把當前數組的當前項push到臨時數組里面
            hashTable[this[i]] = true;        //存入hash表
        }
    }
    return res;
}

// 應用此技巧
Array.prototype.unique2 = function()
{
    var hashTable = {}, res = []
    for(var i = 0; i < this.length; i++) {
        !hashTable[this[i]] ? res.push(this[i]) : null
        hashTable[this[i]] = hashTable[this[i]] || true
    }
    return res
}</pre> 
 
寫成這樣也未必說是優化，目測判斷邏輯還多了一個哈哈，但是嵌套少了一層，怎么說呢，自行決定吧。

下面展示的一個技巧和上面這個也差不多：
// 正常寫法
if(type === 'foo' || type === 'bar') {}

// 用對象有三種方法
// 方法1
if(({foo: 1, bar: 1})[type]) {}                    // type === 'toString'可以繞過驗證
// 方法2
if(type in ({foo: 1, bar: 1})) {}                // 和上一種等價但是慢點
// 方法3
if(({foo: 1, bar: 1}).hasOwnProperty(type)) {}    // 最嚴密，也最慢
// 用正則
if(/^(foo|bar)$/.test(type)) {}</pre> 
 
這種技巧的話，使用與否同樣是自己決定。很多有意思的東西，都是自己想著玩的，有些情況，我們倒不如好好寫成switch - case，都看的懂，也挺清晰。

總結兩句，雖說jQuery庫和新式的框架相比老了，但我覺得它在DOM操作上真的做到了一個極致。我相信很長一段時間，前端開發人員入門，還是要從它開始的。個人認為jq不適應時代的原因，是因為它本身也僅僅限于DOM操作，沒有其他限制，以至于當應用復雜時，你完全控制不住你的頁面。當你用上流行的框架，按照他們的Best Practice去組織代碼，我想你剛剛開始的時候，一定會懷念jQuery這個溺愛你的老朋友的。
參考鏈接：
 
  
 反模式 - 學用 JavaScript 設計模式 - 極客學院 

  
 jQuery Anti-Patterns for Performance & Compression 

  Patterns of Large-Scale JavaScript Applications