閱讀 jQuery 源碼的18個(gè)驚喜
我熱愛(ài) jQuery，且盡管我認(rèn)為自己算是一名高級(jí) JavaScript 開(kāi)發(fā)者，我從來(lái)沒(méi)有試過(guò)由頭到尾把 jQuery 的源碼看一遍，直到現(xiàn)在。這里分享一些我一路下來(lái)學(xué)到的東西：
注意：我使用 $.fn.method() 語(yǔ)法來(lái)表示調(diào)用一組匹配元素的方法。比如當(dāng)我說(shuō) $.fn.addClass，則表示$('div').addClass('blue') 或者 $('a.active').addClass('in-use') 此類的用法。$.fn 是 jQuery 包裝元素的原型。
1. Sizzle 的權(quán)重：Sizzle 是 jQuery 用于在 DOM 找元素的的選擇器引擎，基于 CSS 選擇器。正是它將 $('div.active')轉(zhuǎn)換成可操作的元素?cái)?shù)組。我知道 Sizzle 占了 jQuery 相當(dāng)大的部分，但它的龐大還是嚇到了我。按行數(shù)來(lái)說(shuō)它很無(wú)疑是 jQuery 中***最龐大的特性。我估計(jì)它占了總代碼庫(kù)的 22%，而第二大的特性—— $.ajax 只占了 8%。
2. $.grep：這個(gè)方法與 Underscore 的 _.filter 類似。接受兩個(gè)參數(shù)，一個(gè)元素?cái)?shù)組和一個(gè)函數(shù)，對(duì)每個(gè)元素依次執(zhí)行函數(shù)，返回執(zhí)行結(jié)果為 true 的元素?cái)?shù)組。
3. 冒泡禁止：jQuery 明文禁止 load 事件冒泡。從內(nèi)部看，jQuery 在所有的 load 事件中傳入特殊的 noBubble: true標(biāo)記，所以 image.load 事件才不會(huì)冒泡到 window 上錯(cuò)誤地觸發(fā) window.load 事件。
4. 默認(rèn)動(dòng)畫(huà)速度：jQuery 通過(guò)快速連續(xù)地改變樣式屬性來(lái)實(shí)現(xiàn)元素動(dòng)畫(huà)效果。每一次小改變被稱作一個(gè) tick。默認(rèn)動(dòng)畫(huà)速度是每13毫秒運(yùn)行一次 tick，要改變速度你可以重寫 jQuery.fx.interval 成你想要的整數(shù)。
5. fn.addClass 可以接受函數(shù)：我們通常向 $.fn.addClass 提供一個(gè)包含類名的字符串來(lái)創(chuàng)建元素。但它也可以接受一個(gè)函數(shù)。這個(gè)函數(shù)必須返回一個(gè)字符串，多個(gè)類名間要以空格隔開(kāi)。這里還有個(gè)彩蛋，這個(gè)函數(shù)接受已匹配元素的索引作為參數(shù)，你可以用這個(gè)特性來(lái)構(gòu)造智能變化的類名。
6. fn.removeClass 也一樣：與上文的一樣，它也可以接受一個(gè)函數(shù)。這個(gè)函數(shù)也會(huì)自動(dòng)接收元素的索引。
7. :empty 偽選擇器：可以方便地用來(lái)匹配沒(méi)有孩子的元素。
8. :lt 與 :gt 偽選擇器：它們會(huì)根據(jù)元素在匹配集合中的索引來(lái)匹配元素。比如 $('div:gt(2)') 會(huì)返回所有的 div，除了前三個(gè)（從0開(kāi)始）。如果你傳入一個(gè)負(fù)數(shù)，它會(huì)倒過(guò)來(lái)從尾開(kāi)始數(shù)。
9. $(document).ready() 的承諾： jQuery 貌似是用回了自己的東西。在內(nèi)部，可信賴的 $(document).ready() 使用了一個(gè) jQuery 延遲來(lái)確定 DOM 在什么時(shí)候完全加載。
10. $.type： 大家肯定能熟練使用 typeof 來(lái)確定數(shù)據(jù)類型，但你知不知道 jQuery 提供了一個(gè) .type() 方法？jQuery 版比原生版更加智能。比如 typeof (new Number(3)) 返回 object，而 $.type(new Number(3)) 則返回 number。更新：正如 ShirtlessKirk 在評(píng)論中指出，$.type 返回其對(duì)象的 .valueOf() 屬性。所以更準(zhǔn)確的說(shuō)法應(yīng)該是 $.type 告訴你一個(gè)對(duì)象的返回值的類型。
11. $.fn.queue：你可以通過(guò) $(‘div’).queue() 查看一個(gè)元素的效果隊(duì)列，很方便地了解元素還剩余多少效果。更有用的是，你可以直接操作隊(duì)列去添加效果。從 jQuery 文檔摘錄的：
- $( document.body ).click(function() {
- $( "div" )
- .show( "slow" )
- .animate({ left: "+=200" }, 2000 )
- .queue(function() {
- $( this ).addClass( "newcolor" ).dequeue();
- })
- .animate({ left: "-=200" }, 500 )
- .queue(function() {
- $( this ).removeClass( "newcolor" ).dequeue();
- })
- .slideUp();
- });
12. 禁用元素不會(huì)觸發(fā) click 事件：jQuery 默認(rèn)不會(huì)為禁用的元素執(zhí)行 click 事件，有了這個(gè)優(yōu)化，你無(wú)需自己用代碼再檢查一遍。
13. $.fn.on 可以接受對(duì)象：你知道 $.fn.on 可以接受一個(gè)對(duì)象來(lái)一次過(guò)連接多個(gè)事件嗎？jQuery 文檔的例子：
- $( "div.test" ).on({
- click: function() {
- $( this ).toggleClass( "active" );
- }, mouseenter: function() {
- $( this ).addClass( "inside" );
- }, mouseleave: function() {
- $( this ).removeClass( "inside" );
- }
- });
14. $.camelCase：這個(gè)有用的方法可以將連字符式的字符串轉(zhuǎn)換成駝峰式的字符串。
15. $.active：調(diào)用 $.active 返回 XHR (XML Http Request) 查詢的個(gè)數(shù)。利用它可以手動(dòng)制定 AJAX 請(qǐng)求的并發(fā)上限。
16. $.fn.parentsUntil / $.fn.nextUntil / $.fn.prevUntil：我比較熟悉 .parents()、.next() 和 .prev()，卻不知道原來(lái)還有其它的方法。它們會(huì)匹配所有的 雙親/下一個(gè)/前一個(gè) 元素直到（until）遇到符合終止條件的元素。
17. $.fn.clone 參數(shù)：當(dāng)你用 .clone() 克隆一個(gè)元素，你可以用 true 作為***個(gè)參數(shù)來(lái)克隆該元素的數(shù)據(jù)屬性（data attributes）和事件。
18. 更多的 $.fn.clone 參數(shù)：除了上面的方法外，你還可以再傳多一個(gè) true 參數(shù)來(lái)克隆該元素所有孩子的數(shù)據(jù)屬性和事件。這叫做“深克隆”。第二個(gè)參數(shù)的默認(rèn)值與***個(gè)一樣（***個(gè)默認(rèn)false）。所以當(dāng)***個(gè)參數(shù)是 true 而你想讓第二個(gè)參數(shù)也是 true 時(shí)，完全可以忽略第二個(gè)參數(shù)。
