窺探jQuery——面向JavaScript程式員

當 jQuery 在2006年1月現身時，給我的第一印象，是這玩意兒構造得很精明。基於CSS選取器（CSS selectors）來打點一切，其思路相當靈巧（參考getElementsBySelector）。但鏈盒工事（chaining stuff）看起來更像個噱頭，並且整體看來，jQuery庫提供的功能並不能覆蓋所有基礎性的東西。因此我斷定，jQuery只會曇花一現。

幾個月以來，我逐漸明白自己想錯了。從技術工藝上考量，jQuery十分淩厲。它用簡潔的方法，把大量常用功能封裝起來，並提供精巧的插入式API，來滿足標準庫之外的功能模組的實現。jQuery秉持的核心，乃DOM元素的集合（譯註：通常是某些子集合）——它把元素集合作為一個根本，給高度抽象出來了。最重要的，是這種遵循最佳實務的抽象，能讓jQuery與其他JavaScript代碼相處融洽。

很多對jQuery的介紹，都是針對設計師和初級開發人員。接下來我想說明，為什麼jQuery也會吸引那些富有經驗的開發人員。

名稱空間（Namespacing）

編寫可重用的、優秀的JavaScript代碼，其關鍵在於對名稱空間的積極把控。JavaScript只擁有單一的、全域的名稱空間（即window對象），而很多程式員（以及一些庫）恣意地為之添加各種東西。要知道全域變數是魔鬼！聰明的開發人員，會使用類似組件模式的技術，來儘力減少全域對象的數量。

jQuery僅向全域名稱空間引入一個標記：jQuery函數/對象。其餘的要麼是jQuery的直接屬性（譯註：原文‘directy property’系筆誤，應是‘direct property’），要麼就是調用jQuery函數所返回的對象的方法。

那“語言升級”（language enhancements）又是什麼呢？大多數庫會提供映射，過濾，剝離，往往是瀏覽器的JavaScript引擎所缺少的那些功能。還有一些庫，直接擴充了JavaScript內建的String和Array類，但這是冒險的做法。String.prototype和Array.prototype也有各自的名稱空間，在其內添加的屬性一旦發生衝突，所帶來的風險，不亞於在全域環境下的草率大意。

在語言升級方面，jQuery提供了很多函數（功能），但每個函數都被賦給jQuery對象的屬性：jQuery.each，jQuery.extend，jQuery.grep，jQuery.map，jQuery.merge以及jQuery.trim。如此一來，它們就不會跟其他代碼產生衝突。

聲名狼藉的$函數（The infamous $ function）

剛才我說到，jQuery是唯一被引入的全域標記，其實並不盡然：$標記作為jQuery的捷徑，也被引入進來。慶幸的是，$的存在不會帶來負面影響：如果你需要讓原始的$起死回生（比如，這之前你的代碼使用了Prototype），你可以調用jQuery.noConflict()來恢複它。

如果你既想擁有$的便利，又不希望jQuery跟其他同樣使用了全域$函數的代碼發生衝突，可遵循jQuery文檔所建議的慣用方式：

(function($) {
　　// 在這個函數體裡，$可作為jQuery的引用
　　// 很方便，對吧？
})(jQuery);

把一切都附加到$標記的做法，曾讓我認為jQuery華而不實。不過，從體系的角度來審視這種設計，一切又是非常明了的——儘管我常喜歡在代碼中定義自己的$捷徑。