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