再見JQuery，個人老朋友

免責聲明

本文是倉促之做，從構思到成文不足半天。文中沒有提到不少優秀的庫和框架，提早在此致歉，由於沒時間蒐集整理。但這不表明筆者對這些庫和框架沒有敬意。實際上，包括jQuery在內，個人敬意是給這些名字背後整個社區和貢獻者的，固然包括庫和框架的最初編寫者，好比John Resig。

另外，時間所限，本文粗略、不嚴謹，甚至可能不客觀地描繪了前端技術的發展脈絡。對前端發展走向的這個判斷，僅表明本人本身的主觀認知，並不是業界共識，懇請廣大讀者瞭解。千萬不要以本文觀點做爲評價前端技術發展的依據。謝謝！

Github拋棄jQuery

2018年7月25日，Mislav Marohnić發了一條推文，宣佈GitHub.com前端已經完全刪除了jQuery（下圖）。並且，還自問自答地解釋（低調炫耀），刪除jQuery以後也沒用其餘框架，而是所有依賴原生API。

不少人不知道，我和jQuery很有淵源。大概11年前（2007年），由於「瘋狂迷戀」jQuery，我在國內率先翻譯了jQuery 1.1的文檔。後來有同好基於我翻譯的版本繼續翻譯了jQuery新版文檔，還不忘記在「關於」中提到我（http://hemin.cn/jq/about.html）：

竟然稱我爲「國內jQuery的引路人」，慚愧。但在當時jQuery文檔奇缺的狀況下，我翻譯的中文版應該是幫到了很多同窗的。後來，我還翻譯了Learning jQuery（《jQuery基礎教程》）。

正因與jQuery的這個不解之緣，GitHub.com完全拋棄jQuery的消息才觸動我想了一些事。因而，決定寫這篇小文，以饗讀者（希望有用，哈哈）。

jQuery的輝煌

jQuery最初誕生於2006年8月，做者是John Resig（https://zh.wikipedia.org/wiki/JQuery）。10多年前，網頁開發者（當時尚未「前端」這個概念）深受瀏覽器不兼容性之苦。以jQuery爲表明的一批JavaScript庫/框架應運而生：

• Dojo
• jQuery
• MooTools
• Prototype
• Yahoo! User Interface Library (YUI)
• Script.aculo.us

這些庫有的像jQuery同樣是主打通用性，好比Dojo、Prototype；有的則走更專業化的路線，好比YUI（組件化）和Script.aculo.us（動畫交互）。從通用功能看，這些庫大都提供了以下特性：

• 語法糖：鏈式調用、實用函數
• 選擇元素：基於各類標準選擇符和庫自定義的選擇符，以及經過回調進行篩選
• 操做DOM：建立和操做元素，乃至各類屬性操做
• 處理事件：ready事件及各類註冊和觸發事件的方法，乃至委託
• 動畫：基於animate的CSS屬性動畫，以及內置動畫方法
• Ajax：封裝原生的XMLHttpRequest API，簡化請求方法及回調處理

一批宣傳和推廣這些庫和框架的書籍相繼面世，迅速推進了這些庫的採用。2010年出版的DOM Scripting, 2nd（《JavaScript DOM腳本編程藝術（第2版）》）就是其中之一。這本書專門有一個附錄，介紹當時流行的庫，主推jQuery。

當時jQuery官網的自我描述是這樣的：

「a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.」

不錯，正是這樣。jQuery憑藉其選擇器方法、面向集合的鏈式調用、對事件和Ajax的完善支持、簡單而強大的動效等獨有優點，迅速風靡，成爲幾乎全部網站開發必備的JavaScript庫，乃至開創了jQuery編程風格。

開發者選擇jQuery的理由簡單直接：

• 跨瀏覽器
• 簡單高效
• 穩定可靠
• 插件豐富

2011年新版的「犀牛書」第6版——JavaScript: The Definitive Guide, 6th甚至拿出第19章整整64頁篇幅隆重講解了jQuery（「Chapter 19. The jQuery Library」）。

jQuery今後走向鼎盛和輝煌。後來，隨着前端交互愈來愈重和移動應用的普及，jQuery UI、jQuery Mobile相繼面世。

時至今日，jQuery仍然在支撐着數以千萬計各類規模網站的運做——儘管聚光燈下已經不常看到她的身影。

歷史的選擇

最近10年，是「前端行業」有史以來發展最快的10年。

移動社交時代的到來不只沒有讓桌面Web失色，反倒刺激了Web標準的迅猛改進。HTML5不只帶來了極大的向後兼容性，也帶來了更豐富的原生DOM API。CSS從CSS3開始走上模塊化的快車道，文本樣式、排版佈局、媒體查詢，各類新模塊讓人應接不暇。

各大主流瀏覽器也在快速跟進，Firefox、Chrome、Opera、Safari、IE乃至Edge，都在積極重構甚至重寫內核，爭作支持Web標準的「楷模」。在這個大背景下，各大互聯網公司不斷調高兼容的IE版本號，從8到9到10，再到11。

固然，還有ECMAScript語言標準。自從劃時代的ES6（ECMAScript 2015）發佈以後，JavaScript終於真正開始擺脫「玩具」語言的尷尬境地。更重要的，從ES6起，ECMAScript也進入了快速迭代、每一年發一版的節奏。ES七、ES8，以及ES9，每次都會給這門語言注入更強大的語言特性。

與此同時，Node.js和Babel等服務端運行時及轉譯工具的出現，也讓前端工程化，以及向傳統工業級軟件開發最佳實踐靠攏的速度日益加快。

2012年，筆者在圖靈社區翻譯過一篇文章「JavaScript寶座：七大框架論劍」（http://www.ituring.com.cn/article/8108）。當時的「七大框架」是：

• Backbone
• Knockout
• Spine
• CanJS
• Ember
• AngularJS
• Batman
• Meteor

後來，谷歌主打SPA（Single Page Application，單頁應用）的Angular終於一枝獨秀。不久，臉書推出的「在JS裏寫HTML同樣優雅」的React則一路高歌猛進。最終，集各家所長且簡單易用的Vue橫空出世。

前端開發已經從後「刀耕火種」時代的「農業文明」，逐漸進化爲以大規模、可擴展、規範化、自動化爲特徵的準「工業文明」。

俗話說：「皮之不存，毛將焉附。」隨着時代變遷、技術進步，jQuery賴以存在的環境正逐漸消失。如前所述，新的環境催生了一批框架新秀。曾經輝煌的jQuery終於走到了能夠華麗謝幕的時刻。

幾句忠告

8年前，DOM Scripting, 2nd在推薦開發者使用前端庫時，語重心長地說過下面這段話：

「開發中使用庫固然沒問題，但前提是不要僅僅只知道怎麼使用，更要知道它的工做原理。若是不能超越這些庫，那在這些庫變成你的柺杖之時，你也會隨之「殘廢」。在使用某個庫以前，必定要花時間學習掌握JavaScript和DOM。咱們從一開頭就強調「知其因此然」的重要性，告訴你們不能知足於僅僅「知其然」。若是使用了庫，卻不曉得其背後原理，不管對本身仍是對產品都將是有害的。」

2012年，從後端轉前端不久的Ray Nicholus接手了一個跨瀏覽器文件上傳庫（https://github.com/FineUploader）的維護和開發工做。他的第一反應就是用jQuery重寫這個庫。然而，用戶反對引入任何對其餘庫的依賴。結果他只能使用原生瀏覽器的API。那又怎樣呢？他發現，原來放棄jQuery的寫法比本身想象的要容易。

2014年，Ray發表了：「You Don't Need jQuery!」系列博客（https://blog.garstasio.com/you-dont-need-jquery/）。2016年，他的著做Beyond jQuery （Apress，https://www.amazon.com/dp/1484222342/）出版。Ray建議，學習前端開發，原本應該是這個順序：

1. 學習JavaScript
2. 學習Web API
3. 學習jQuery（或其餘框架/庫）

但不少人其實是從#3開始的，而後過了好久纔開始#1和#2（甚至歷來沒想過#1和#2）。結果就是「只知其然，而不知其因此然」。

現在，時移世易，jQuery即將謝幕，新一代組件化開發框架粉墨登場。然而，「太陽底下沒有新鮮事。」不論是使用Angular，仍是React，抑或是Vue，仍是要真正理解它們背後的工做原理。

（爲避免廣告嫌疑，我在這裏就不着重推薦360導航前端的劉博文同窗即將出版的《深刻淺出Vue.js》一書了，哈哈哈～～，由於沒有封面能夠展現。）

尾聲

jQuery做爲第一代前端庫的優秀表明，成就了今天Web的繁榮，也成就了一代Web開發者。做爲「國內jQuery的引路人」（這個帽子是別人給的，我借用一下，哈哈），我我的對jQuery的感情是複雜的。既不但願它離開，又但願它早點離開。我想，這應該也是不少早期接觸jQuery的前端開發者的心聲吧。