Django創始人：從技術工藝上考量jQuery
當jQuery在2006年1月現身時，它給人的***印象是，這玩意兒構造得很精明。基于CSS選擇器來打點一切，其思路相當靈巧。但鏈盒工事看起來更像個噱頭，并且整體看來，jQuery庫提供的功能并不能覆蓋所有基礎性的東西，jQuery會不會只是曇花一現呢？
jQuery擁有簡潔的方法，把大量常用功能封裝起來，并提供精巧的插入式API，來滿足標準庫之外的功能模塊的實現。jQuery秉持的核心，乃DOM元素的集合——它把元素集合作為一個根本，給高度抽象出來了。最重要的，是這種遵循***實踐的抽象，能讓jQuery與其他JavaScript代碼相處融洽。
很多對jQuery的介紹，都是針對設計師和初級開發人員。但接下來文章想說明的是，為什么jQuery也會吸引那些富有經驗的開發人員。（相關閱讀：jQuery讓開發者戀戀不舍的秘密）
名稱空間
編寫可重用的、優秀的JavaScript代碼，其關鍵在于對名稱空間的積極把控。JavaScript只擁有單一的、全局的名稱空間（即window對象），而很多程序員（以及一些庫）恣意地為之添加各種東西。要知道全局變量是魔鬼！聰明的開發人員，會使用類似組件模式的技術，來盡力減少全局對象的數量。
jQuery僅向全局名稱空間引入一個標記：jQuery函數/對象。其余的要么是jQuery的直接屬性，要么就是調用jQuery函數所返回的對象的方法。
那 “語言升級”又是什么呢？大多數庫會提供映射，過濾，剝離，往往是瀏覽器的JavaScript引擎所缺少的那些功能。還有一些庫，直接擴 展了JavaScript內置的String和Array類，但這是冒險的做法。String.prototype和Array.prototype也有各自的名稱空間，在其內添加的屬性一旦發生沖突，所帶來的風險，不亞于在全局環境下的草率大意。
在語言升級方面，jQuery提供了很多函數（功能），但每個函數都被賦給jQuery對象的屬性：jQuery.each，jQuery.extend，jQuery.grep，jQuery.map，jQuery.merge以及jQuery.trim。如此一來，它們就不會跟其他代碼產生沖突。
聲名狼藉的$函數
jQuery是唯一被引入的全局標記，其實并不盡然：$標記作為jQuery的快捷方式，也被引入進來。慶幸的是，$的存在不會帶來負面影響：如果你需要讓原始的$起死回生（比如，這之前你的代碼使用了Prototype），你可以調用jQuery.noConflict()來恢復它。如果你既想擁有$的便利，又不希望jQuery跟其他同樣使用了全局$函數的代碼發生沖突，可遵循jQuery文檔所建議的慣用方式：
- (function($) {
- // 在這個函數體里，$可作為jQuery的引用
- // 很方便，對吧？
- })(jQuery);
把一切都附加到$標記的做法，曾讓人覺得jQuery華而不實。不過，從體系的角度來審視這種設計，一切又是非常明了的。
#p#
選取元素
jQuery的每個操作，都以選取DOM中一個或更多的節點作為開始。jQuery（擁有一種真正的面向特定領域）的選取語法，是十分有趣的，它結合了CSS 1，CSS 2，部分CSS 3語法，一些XPath語法，以及一些特定的擴展。幾個有用的例子：
- jQuery(‘div.panel’)
- 選取了所有class="panel"的div
- jQuery(‘p#intro’)
- 選取了所有id="intro"的段落
- jQuery(‘div#content a:visible’)
- 選取了id="content"的div中所有可見的鏈接
- jQuery(‘input[@name=email]‘)
- 選取了所有name="email"的輸入域
- jQuery(‘table.orders tr:odd’)
- 選取了類名為“orders”的表中所有的奇數行
- jQuery(‘a[@href^="http://"]‘)
- 選取了所有（以http://開頭的）外部鏈接
- jQuery(‘p[a]‘)
- 選取了所有包含一個或多個鏈接的段落
上述例子中，:visible和:odd是jQuery實現的擴展，很具特色。而屬性的選取使用@作為標記，其方式和XPath一樣，要優于CSS 2。jQuery的這套選取語法包羅萬象，有些類似正則表達式，想完全消化是需要花上一段時間的。
通過jQuery的選取操作，我們能得到一些很棒的“素材”。它們是一個集合，包含了DOM元素，并且類似數組那樣，擁有length屬性；通過索引可以訪問集合中的元素。在Firebug console的交互模式下，集合也被顯示成一個數組，這個特性非常有用。集合實際上是一個jQuery對象，這個對象被賦予了很多方法，用來查詢，修改，擴展集合中的元素。
jQuery的方法，本質上可分成三種：一種可以操作那些符合匹配的元素；一種可以返回***個匹配到的對象的值；一種可以變更被選取的集合。這里不會列出所有的方法。如果你的瀏覽器裝了Firebug，你可以以交互方式運行這些示例代碼：首先使用這個bookmarklet（譯注[1]）把jQuery庫載入至瀏覽器的任意頁面，然后把示例代碼粘貼到Firebug console中。
- jQuery(‘div#primary’).width(300);
- 把id="primary"的div的寬度設為300px
- jQuery(‘p’).css(‘line-height’, ‘1.8em’);
- 把所有段落的line-height設為1.8em
- jQuery(‘li:odd’).css({color: ‘white’, backgroundColor: ‘black’});
- 向間隔的list項添加兩個CSS規則；注意css()函數可以用一個對象來代替兩個字符串作為參數
- jQuery(‘a[@href^="http://"]‘).addClass(‘external’).attr(‘target’, ‘_blank’);
- 向所有（以http://開頭的）外部鏈接添加“external”類，然后策略性地加上target="_blank"屬性。這個示例用到了鏈盒（chaining），稍后會做介紹。
- jQuery(‘blockquote’).each(function(el) { alert(jQuery(this).text()) });
- 遍歷頁面上的每個<blockquote>，并顯示出它的文字內容（包括HTML標簽）
- jQuery(‘a’).html(‘Click here!’);
- 用陰險的“Click here!”代替頁面上所有的鏈接<a>的文字
下面的示例展示了jQuery如何取得***個匹配到的對象的值：
- var width = jQuery(‘div’).width();
- 頁面上***個div的寬度
- var src = jQuery(‘img’).attr(’src’);
- 頁面上***張圖片的src屬性值
- var color = jQuery(‘h1′).css(‘color’);
- ***個<h1>的顏色樣式值
在jQuery的方法構造中，蘊含著令人愜意的對稱性：當向方法傳遞兩個參數或一個對象時，方法可被用來執行設置操作；如果只向方法傳遞一個參數，則可以讓它執行取值操 作（譯注：讀者可對照上面的示例代碼感受一下）。這種對稱性設計貫穿了jQuery體系，使得API的文法更容易被記憶。***的例子，展示了一些可變更被選取的元素集合的方法。這些方法大多都提高了檢索DOM的簡易程度：
- jQuery(‘div’).not(‘[@id]‘)
- 返回那些沒有id屬性的div
- jQuery(‘h2′).parent()
- 返回那些是<h2>的直接父節點元素
- jQuery(‘blockquote’).children()
- 返回所有<blockquote>的子節點元素
- jQuery(‘p’).eq(4).next()
- 在頁面上找到第五個段落，然后根據節點的樹層結構關系，找到并返回這個段落節點右側的兄弟節點元素
- jQuery(‘input:text:first’).parents(‘form’)
- 找到并返回頁面上***個type="text"的輸入域所在的form節點元素，parents()的可選參數是另一個選擇器
#p#
鏈盒
jQuery開發團隊經常夸耀jQuery的鏈盒理念，甚至在網站首頁上宣揚“jQuery將改變你編寫JavaScript的方式”。個人感覺，這么做多少有點誤導大眾，這里告訴大家，你完全可以取jQuery之長，卻應避免冗長的方法鏈盒。
也就是說，鏈盒有時會像變戲法一樣。除了使用鏈盒將各種操作DOM的方法粘到一起，你也可以使用jQuery的end()方法，來實現在特定范圍內推進或回 溯你需要得到的元素。這個概念很難解釋清楚。本質上講，每次使用（諸如children()或filter()）方法來改變元素集合時，你可以在這些方法 之后使用end()，來重新定位你最初選取的元素集合。
- $('form#login')
- // ***步，隱藏表單中那些帶有'optional'類的<label>
- .find('label.optional').hide().end()
- // 第二步，為表單的密碼輸入域渲染上紅色邊框
- .find('input:password').css('border', '1px solid red').end()
- // 第三步，為表單加上提交處理
- .submit(function(){
- return confirm('Are you sure you want to submit?');
- });
這個示例讀起來就像句俏皮話。整個過程是，先選取一個表單，再在其中選取一些元素做修改，然后回溯到表單，為它定義一個submit()處理。示例很酷，但如果你不習慣，也可以不這么用。
操作DOM
jQuery提供了幾個大規模操作DOM的卓越方法。***種非常讓人驚嘆：jQuery()函數能把HTML片段插入DOM元素中（實際上，函數會留意以’<’打頭的字符串參數）：
- var div = jQuery('<div>Some text</div>');
一旦你創建好了div，便可以繼續用鏈盒向其添加屬性：
- var div = jQuery('<div>Some text</div>').addClass('inserted').attr('id', 'foo');
現在把div加到body上：
- div.appendTo(document.body)
或用選擇器把div加到已知元素的前面：
- div.prependTo('div#primary')
處理事件
任何JavaScript庫都需要事件處理能力，jQuery也不例外。類似attr()和css()的行為，各種與事件處理相關的方法也有雙重用途：一種 是把函數當作參數，賦給事件處理器；一種是不帶參數，可以模擬事件被觸發：
- jQuery(‘p’).click(function() { jQuery(this).css(‘background-color’, ‘red’); });
- 為所有段落增加點擊事件，當你點擊它們時，段落背景會變成紅色
- jQuery(‘p:first’).click()
- 然后在***個段落上模擬點擊的動作，它的背景會變成紅色
類似的函數還包括mouseover，keyup等，對應著瀏覽器通常支持的那些動作。留意一下事件處理中的’this’關鍵字，它代表觸發事件的元素；jQuery(this)是一種慣用語法，可以讓this所代表的元素應用各種jQuery方法。這里有兩個與事件相關的函數值得仔細說一下：
- jQuery('a').hover(function() {
- jQuery(this).css('background-color', 'orange');
- }, function() {
- jQuery(this).css('background-color', 'white');
- });
hover()可設定兩個函數，分別對應onmouseover和onmouseout事件。
- jQuery('p').one('click', function() {
- alert(jQuery(this).html());
- });
one()設定的事件在***次被觸發后便被移除。上面的示例會讓所有段落在***次被點擊時顯示其文字內容。憑借bind()和trigger()方法，jQuery也可以支持自定義事件（click()家族僅僅是便捷方法，只支持有限的事件）。自定義事件可接受參數，trigger()可接受數組作為參數，來做各種處理操作：
- jQuery(document).bind('stuffHappened', function(event, msg) {
- alert('stuff happened: ' + msg);
- });
- jQuery(document).trigger('stuffHappened', ['Hello!']);
#p#
漸進式編碼
本人一直認為，***的Web應用程序，往往是那些在腳本被禁用后仍能正常使用的程序。想建立這樣的應用程序，***的方法就是遵循漸進式編碼，讓普通頁面完全加載后，再為頁面中的元素賦以事件處理。
jQuery對這種編碼策略提供了絕好支持。首先，從整體上看，節點選取暗合jQuery以及漸進式編碼的核心理念。其次，針對window.onload問題，jQuery提供了一套解決方案，這套方案借鑒了Dean Edward的成果，使得以“DOM加載完畢”為信號的事件能跨瀏覽器工作。你可以在瀏覽器完全加載DOM后設定并運行一個函數，如下所示：
- jQuery(document).ready(function() {
- alert('The DOM is ready!');
- });
你甚至可以直接傳遞一個函數給jQuery()，以更簡潔的方式達到同樣效果：
- jQuery(function() {
- alert('The DOM is ready!');
- });
jQuery與Ajax
在我所知道的主流JavaScript庫中，jQuery擁有最棒的Ajax API。最簡單的Ajax調用如：
- jQuery('div#intro').load('/some/fragment.html');
代碼以GET請求方式，從/some/fragment.html文件中獲取HTML片段，并把片段裝載到id="intro"的div中。
***次看到這行代碼時，幾乎對它沒什么印象。這看起來非常簡潔，但如果你想用jQuery做些更復雜的事情，比如顯示Ajax裝載進度，該如何做呢？jQuery為你準備了一些可自定義的事件（ajaxStart，ajaxComplete，ajaxError等等），來實現你想要的代碼。同時jQuery也提供了廣泛的底層API，來實現更復雜的Ajax交互：
- jQuery.get('/some/script.php', {'name': 'Simon'}, function(data) {
- alert('The server said: ' + data);
- });
- // 以GET方式通過/some/script.php?name=Simon獲取數據
- jQuery.post('/some/script.php', {'name': 'Simon'}, function(data) {
- alert('The server said: ' + data);
- });
- // 以POST方式向/some/script.php發送請求
- jQuery.getJSON('/some.<a target="_blank" href="http://www.yeeyan.com/articles/tag/js">
- <em>js</em></a>on', function(json) {
- alert('JSON rocks: ' + <a target="_blank" href="http://www.yeeyan.com/articles/tag/js">
- <em>js</em></a>on.foo + ' ' + json.bar);
- });
- // 從/some.<a target="_blank" href="http://www.yeeyan.com/articles/tag/js">
- <em>js</em></a>on接收并解析數據，把數據轉換成JSON格式
- jQuery.getScript('/script.<a target="_blank" href="http://www.yeeyan.com/articles/tag/js">
- <em>js</em></a>');
- // 以GET方式獲取/script.js腳本并用eval()執行
插件
就你所能獲得的功能的數量而言，jQuery庫其實是相當小的——對代碼做緊湊處理后只有20KB左右，甚至用gzip壓縮后會變得更小。向標準庫添加額外功能時，需用插件的方式來做，它可以（也確實能夠）向現有的jQuery實例對象添加全新的方法。如果你想執行：
- jQuery('p').bounceAroundTheScreenAndTurnGreen();
jQuery的插件機制提供了文檔說明型的掛載方式，可以實現把上述方法添加到jQuery中。這種簡易的創建形式，吸引了很多插件作者，他們讓人印象深刻；現在插件目錄中已經有超過100個插件了。真正絕妙的，是你可以像自定義方法那樣，來定義選擇器。比如，moreSelectors插件實現了諸如“div:color(red)”的方法，來匹配包含紅色文本的div。
并非天衣無縫
在發掘jQuery各種特性的同時，我也被某個我視之為教條的東西所折磨著。幾年來，我總是建議大家使用一種JavaScript庫，前提是你愿意梳理它的源碼，并把它的工作原理徹底搞懂。
jQuery使用了相當不可思議的技術，以求實現它所設想的各種功能——其中一些（比如選擇器的代碼）真是震天駭地。如果有必要徹底搞懂一個庫的工作原理，那么對大多數開發人員來說，jQuery不會是上佳之選。然而，jQuery擁有極高的人氣，并且沒有太多與之相關的恐怖經典流于街巷，所以具體到jQuery所用技藝的邪正之分，也就變得不那么重要了。
這里必須重新審視曾給大家的建議。庫的運作機制并不是問題焦點：關鍵是應看清更具普遍性的潛在問題，知曉瀏覽器之間的差別，以及你使用庫的哪種技術，來消除差別造成的負面影響。沒有哪種庫可以一勞永逸地幫你克服瀏覽器的古怪行為。但只要你對應付潛在問題訓練有素，便可把握經脈，指出問題的源頭——無論它們來自你自己編寫的代碼，還是庫或者應付策略本身。
結語
通過本文，希望能讓大家明白，jQuery不只是又一個JavaScript庫那么簡單——它蘊含了很多值得品味揣摩的理念，甚至能啟迪那些骨灰級的JavaScript程序員。如果你不打算嘗試jQuery，但仍值得去花些時間探索一下jQuery的生態體系。
原文作者：Simon Willison yangyang 譯
中文鏈接：http://article.yeeyan.org/view/davidkoree/4568?from_com
【編輯推薦】
