再見JQuery,我的老朋友

奇舞週刊發表於2018-07-27

免責宣告

本文是倉促之作,從構思到成文不足半天。文中沒有提到很多優秀的庫和框架,提前在此致歉,因為沒時間蒐集整理。但這不代表筆者對這些庫和框架沒有敬意。實際上,包括jQuery在內,我的敬意是給這些名字背後整個社群和貢獻者的,當然包括庫和框架的最初編寫者,比如John Resig。

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

Github拋棄jQuery

2018年7月25日,Mislav Marohnić發了一條推文,宣佈GitHub.com前端已經徹底刪除了jQuery(下圖)。而且,還自問自答地解釋(低調炫耀),刪除jQuery之後也沒用其他框架,而是全部依賴原生API。

Github removing jQuery

很多人不知道,我和jQuery頗有淵源。大概11年前(2007年),因為“瘋狂迷戀”jQuery,我在國內率先翻譯了jQuery 1.1的文件。後來有同好基於我翻譯的版本繼續翻譯了jQuery新版文件,還不忘記在“關於”中提到我(http://hemin.cn/jq/about.html):

關於jQuery文件

居然稱我為“國內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。

DOM Scripting, 2nd

當時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”)。

JavaScript: The Definitive Guide

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也進入了快速迭代、每年發一版的節奏。ES7、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)。結果就是“只知其然,而不知其所以然”。

Beyond jQuery

如今,時移世易,jQuery即將謝幕,新一代元件化開發框架粉墨登場。然而,“太陽底下沒有新鮮事。”不管是使用Angular,還是React,抑或是Vue,還是要真正理解它們背後的工作原理。

(為避免廣告嫌疑,我在這裡就不著重推薦360導航前端的劉博文同學即將出版的《深入淺出Vue.js》一書了,哈哈哈~~,因為沒有封面可以展示。)

尾聲

jQuery作為第一代前端庫的優秀代表,成就了今天Web的繁榮,也成就了一代Web開發者。作為“國內jQuery的引路人”(這個帽子是別人給的,我借用一下,哈哈),我個人對jQuery的感情是複雜的。既不希望它離開,又希望它早點離開。我想,這應該也是很多早期接觸jQuery的前端開發者的心聲吧。

相關文章