jQuery 已經是時代的眼淚了嗎

語言: CN / TW / HK

作為差點一統全球入口網站的前端工具,jQuery 曾在 Web 2.0 初興之時風頭無兩,然而隨著前端技術的不斷演進與瀏覽器底層標準的統一,jQuery 卻逐漸成為一些網站眼中的“技術債”。 

日前,英國政府網站 GOV.UK 刪除其網站上所有前端應用程式依賴項 jQuery。刪除之後,13 個前端應用程式 JavaScript 大小減少了 32 KB(或 31% 到 49%)之間,其他多項效能提升,團隊部分技術債得以清除。

2019 年,Bootstrap 4.3.1 版本釋出,開發團隊表示在釋出 v4.3 版本後,將會在開發 Bootstrap 5 的過程中實現一些關鍵變化,其中就包括放棄使用 jQuery。

2018 年,GitHub 改版重構頁面時移除了 jQuery ,GitHub 前端團隊並未使用其它框架來代替 jQuery,而是使用原生 JavaScript。

不過另一方面,根據 BuiltWith 的統計,已知正在使用 jQuery 的實時網站數量高達 69,193,395 個,流量排名前百萬的網站中,使用 jQuery 的比例高達 75.6%。從使用資料來看,jQuery 江湖地位仍在,而從呼聲來看,jQuery 已逐漸讓位給後起之秀……

Web 2.0,jQuery 閃亮登場

瞭解 jQuery 的出場必然繞不開上世紀的瀏覽器大戰以及 JavaScript 的出現。1994 年,Netscape 網景公司成立,開發出瀏覽器 Netscape Navigator,並在四個月內佔據了四分之三的瀏覽器市場,成為 1990 年代網際網路的主要瀏覽器。

彼時網景公司的技術能力以及在技術上的戰略都領先於市場。網景預見到,網路會變得更加動態,其創始人 Marc Lowell Andreessen 則認為 HTML 需要一種膠水語言,也就是指令碼語言,可以方便網頁設計師或者是非專業的程式設計師設計圖片和外掛等。

經過一番內部研究,網景決定發明一種與 Java 搭配使用的輔助指令碼語言。1995 年 5 月,網景工程師設計出該指令碼語言的原型,而網景公司和昇陽電腦公司組成的開發聯盟為了讓這個新語言蹭一波 Java 的熱度,在同年 12 月 Netscape Navigator 2.0 Beta 3 中部署時,將其臨時改名為 JavaScript。

JavaScript 出現之後,逐漸受到開發者追捧。但隨著 Web 2.0 對互動性需求的提高,也對 JavaScript 提出了更高的要求。再加上當時的瀏覽器廠商都還忙著跑馬圈地,搶佔市場,許多軟體在不同的瀏覽器上無法通用,增加了軟體作者的開發難度,jQuery 之父 John Resig 便是當時飽受折磨的程式設計師之一。

John Resig

“做 Web 程式設計時,我非常討厭瀏覽器的 Bug,不同的瀏覽器有不同的 Bug,而且數量非常多。於是我用 JavaScript 做了 CSS 選擇引擎,之後還做了個動畫引擎,都是自娛自樂。但與此同時我發現自己不能將製作的一些應用放到瀏覽器裡。為了將應用放到 Firefox 瀏覽器中,我開始製作相關的 API,以應用該 CSS 選擇引擎和動畫引擎,這些最終成為了 jQuery。幾個月後,我將那些應用做進 Firefox 裡,之後在 IE 裡也可以執行。”

John Resig 最早在 2005 年向外界展示了 JavaScript 上一個語法更簡潔的 CSS 選擇器,2006 年的 BarCampNYC 活動上,John Resig 釋出了第二個新版本:jQuery: New Wave JavaScript,“這段程式碼徹底改變了讓 Javascript 與 HTML 互動的方式”。

jQuery 的設計的宗旨是“write Less,Do More”,許多年後,John 仍將這當作是自己的目標 —— 讓每個人都可以在網頁裡寫點什麼,並且寫的東西能夠在瀏覽器中順利執行出來。

jQuery 的出現解決當時前端開發人員兩個普遍的煩惱:讓 JavaScript 與 DOM 的互動介面變得簡單,減少開發過程中的跨瀏覽器問題。

首先是簡化 DOM 操作。HTML DOM 定義了用於 HTML 的一系列標準的物件,以及訪問和處理 HTML 文件的標準方法。通過 DOM,可以訪問所有的 HTML 元素,連同它們所包含的文字和屬性,並對其中的內容進行修改和刪除、建立新的元素等等。在 jQuery 之前,使用 JavaScript 操作 DOM 需要定義一個函式,然後將其繫結到特定 DOM 中的各種 HTML 元素中,這對於日常使用來說非常繁瑣和複雜。

所以 jQuery 提供了一個選擇器引擎——後來迭代為 Sizzle,它使得開發者可以在 CSS 中,通過名稱(例如 div)、ID(例如 #myId)、類別(例如 .my-class)等來選擇頁面上的元素,用字串代替函式來查詢元素,過濾子元素,相較其他引擎速度更快、檔案大小更小、易於擴充套件並且沒有依賴關係。

另一方面,在純 JavaScript 開發中,開發者需要檢查瀏覽器使用何種方式新增事件,然後再做選擇,但是 jQuery 提供了隱藏了不同瀏覽器的 JavaScript 實現之間的一些不相容性,可以自行檢查瀏覽器需要什麼方式,然後使用適當的方式。

 

憑藉著這兩個優勢,jQuery 迅速獲得了開發者社群和許多大公司的支援。在 2010 年左右,微軟和 Google 都在他們的 CDN 網路中為 jQuery 庫提供託管;Media Temple 竭盡全力捐助託管 jQuery 網站;微軟也參與到對 jQuery 的測試和開發工作中,Visual Studio 和 ASP.NET MVC 都內建 jQuery;諾基亞參與 jQuery 測試,並僱傭了 jQuery 核心成員 Brandon Aaron;Mozilla 則直接僱傭了 John Resig……

正是這些大公司的支援與使用,使得 jQuery 在最初的幾年間非常成功。根據 John Resig 的介紹,jQuery 的開發資源全部來自於外部的捐贈。2011 年,jQuery 成立 jQuery 基金會,主要為支援 jQuery 核心,使用者介面​​和移動專案的發展,提供 jQuery 文件和支援和促進 jQuery 社群發展。

“令我高興的是,世界上顯然仍簡潔 API 設計的一席之地,正如 jQuery 的持續成功所證明的那樣。”在 jQuery 十週年的時候,John Resig 還對 jQuery 的火爆表達過讚歎,“令人驚訝!jQuery 比以往任何時候都更受歡迎,全球前 100 萬網站 77.8% 都在使用它。”

這一比例至今也只是下降了 2.2%,許多公司仍在使用 jQuery。有業內人士分析:“jQuery 在 2016 年之前的普及率非常高,幾乎有 90% 以上的市佔率,同時也培養了很多以 jQuery 為技術起點的開發者。2016 年後,雖然 React、Vue 在國內飛速發展,但生態層面依然沒有 jQuery 那麼完善,一些開發者在新興的 MVVM 框架上找不到的解決方案時,就只能從 jQuery 生態裡面尋找,也就出現了許多網站在混用的情況。”

那麼,在如此高的使用率下,為什麼對 jQuery 會成為一些公司眼中想要刪掉的技術債呢?

jQuery 江湖地位不再?

“目前從整個世界範圍講,jQuery 這項技術屬於被邊緣化的存在。”業內人士指出,從 2006 年第一個版本釋出起,jQuery 迎來了 10 年的黃金期,這種底蘊意味著它很難被瞬間淘汰。但隨著 JavaScrpit 本身的成熟和瀏覽器核心的統一,jQuery 的優勢在慢慢淡化…… 

“我們基本不加入新功能,目前大多數工作都是優化,讓 jQuery 變得更快、更強、更容易理解。未來的工作也是優化,使 jQuery 功能更清晰化。”2011 年,jQuery 團隊表達的觀點可以說也為 jQuery 後來的命運埋下了註腳。

當 jQuery 開始走向優化路線時,當 jQuery 最初所解決的問題逐漸不再是普遍問題時,必然面臨優勢不復的情況。回看 jQuery 的兩個主戰場,簡化 DOM 操作和瀏覽器相容,都在最近幾年有了更優解。

首先,瀏覽器相容的問題。在 jQuery 雛形初現的前一年——2004,一群來自 Opera、Mozilla、Apple 等不同組織但志同道合的人聚集在一起,組成一個名為 WHATWG 的獨立規範組,旨在編寫一個更好的 HTML 標記規範,用來構建新一代 Web 應用程式,這個規範組之後的成果便是 Web 應用程式 1.0 規範。而後,W3C 成員多次討論後,在 2007 年 3 月,重啟 HTML 工作,新的 HTML 工作小組做的第一個決定,便是採用 Web 應用程式 1.0 規範,並將其稱為 HTML5。

相較此前的 HTML 版本,HTML 5 更適合編寫動態的應用程式,並且具有明確定義的解析演算法,實現所有 HTML5 的瀏覽器都將從相同的標記建立相同的 DOM。

不過,HTML5 在剛出現時並不十分完善,外部採用率較低,給了 jQuery 前期喘息成長的機會。

到了 2008 年,第一個 HTML5 草案誕生,同年,IE、Chrome、FireFox、Safari 幾大瀏覽器巨頭開始相繼支援 HTML5。但這時的 HTML 5 還尚未定稿,同時也受到一些質疑,比如 2012 年 Facebook 應用放棄 HTML5 部分,改為純原生方式開發。HTML5 的標準制定者 W3C 和 WHATWG 因為在標準制定上的分歧也不再合作,原本一直是 HTML5 堅定後盾的蘋果也不再允許純 Web APP 套殼登入 App Store。

HTML 5 又經歷了一段時間的低迷,在此期間,jQuery 依舊是全球大多數網站的心頭好。

直到 2014 年 10 月底,歷時 8 年,W3C 終於宣佈 HTML5 定稿。而後兩年,瀏覽器廠商們紛紛宣佈支援 HTML5,各類應用程式開發商們們也陸續採用 HTML5 開發產品,HTML5 的一些服務提供商也獲得融資。

伴隨著 HTML5 的大範圍應用,另一個對 jQuery 造成“威脅”的技術框架——MVVM 普及,使得 jQuery 在 DOM 操作上的優勢不復。

由於開發者們希望 HTML5 開發的應用可以接近原生 App 的效果,便暴露出一些問題,比如大量的 DOM 操作與 DOM API 的頻繁呼叫,操作繁瑣,使得程式碼變得難以維護,頁面渲染效能降低、速度變慢等。即便 jQuery 能簡化 DOM 操作,但比不上 MVVM 架構直接跳過了 DOM 操作。 

MVVM 架構由 Model、View、ViewModel 三部分構成,Model 層代表資料模型,可定義資料修改和操作的業務邏輯;View 代表UI 元件,負責將資料模型轉化成 UI 展現,ViewModel 則是一個同步 View 和 Model 的物件。View 和 Model 之間通過 ViewModel 進行互動,並且二者的同步工作完全自動,不需要開發者手動操作 DOM。

由於 MVVM 結構實現了資料與檢視的分離,並通過資料來驅動檢視,封裝 DOM 操作,將資料和檢視的繫結變成了自動化的操作,進而把 DOM 操作從業務程式碼中移除,這就導致 jQuery 在很多場景中失去了用武之地。

MVVM 架構圖 

符合 MVVM 思維的新一代的前端開發框架逐漸嶄露頭角,組成現在的前端三大框架: 

2009 年,AngularJS 框架出現,後被 Google 收購,最為核心的特性包括 MVVM、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等;

2013 年 5 月,起源於 Facebook、用於構建使用者介面的 JavaScript 庫 React 開源;

2013 年,在 Google 工作的尤雨溪受到 Angular 的啟發,發出了一款輕量框架 Seed,同年12月更名為 Vue,2014 年 01 月 24,Vue 正式對外發布,版本號是 0.8.0。 

有人形容 jQuery 和新框架的對比:

我讓 jQuery 去買瓶醬油,給了他 100 塊錢,這時我們需要告訴他去小賣鋪的路怎麼走、怎麼跟老闆說買啥醬油,買多少錢的醬油,找多少零錢,還得告訴他怎麼回來(命令式)。
這時我讓 Vue 去買醬油去了,這時我只需要給他錢,並且告訴他目的地在哪兒,買什麼醬油即可,不需要手把手教他(函式式)。
這就是傳統開發和現代框架開發的不同。

整體而言,隨著 UI 互動標準的提升,瀏覽器解析標準的統一,jQuery 在新功能上很難超過一眾 MVVM 框架。

但 jQuery 目前最大的優勢,是相對輕量,只需要面向瀏覽器,而新框架則需要很多工程化的手段,技術門檻比 jQuery 高。而且 jQuery 元件有一定的歷史底蘊,涵蓋面廣,功能相對全面,在生態上也比 MVVM 框架更為成熟。

 此外,由於 jQuery 目前仍有著較高的市佔率,簡單易上手,掌握 jQuery 依舊是許多開發者的“基操”。在對 jQuery 的評價中,有這麼一句流傳甚廣的話:“任何一個程式設計師,都可以用三天的時間學會 jQuery 的基本用法並投入使用”。 再加上開發者的技術棧更新也存在著一些主觀因素,完全推倒已經掌握的技術,對大部分、尤其是本來就不擅長前端領域的開發者而言很困難。業內人士預測,jQuery 在未來若干年的主要受眾群體,依舊會是後端開發者,當然這個群體比例會隨著新人的不斷加入而被慢慢沖淡。 

“總體而言,我們今天討論的並非是  jQuery 的地位,而更多應該是它存在的意義,對實用者而言,人們更關心 jQuery 能幫他們解決多少問題,地位已經不再是屬於 jQuery 的標籤了。”

參考連結:

https://medium.com/mayazine/the-life-and-death-of-jquery-9aca562c80b9

https://www.oschina.net/news/20627/john-resig-talk-about-javascript-and-develop-road

https://www.oschina.net/news/8111/jquery-good-work

https://www.sitepoint.com/interview-john-resig/

https://www.w3.org/wiki/The_history_of_the_Web

https://www.oschina.net/news/64419/html5-rise-up

https://cloud.tencent.com/developer/article/1692480