出品 | OSC開源社區(qū)（ID：oschina2013）

作為差點一統(tǒng)全球門戶網(wǎng)站的前端工具，jQuery 曾在 Web 2.0 初興之時風(fēng)頭無兩，然而隨著前端技術(shù)的不斷演進與瀏覽器底層標(biāo)準(zhǔn)的統(tǒng)一，jQuery 卻逐漸成為一些網(wǎng)站眼中的 “技術(shù)債”。?

日前，英國政府網(wǎng)站 GOV.UK 刪除其網(wǎng)站上所有前端應(yīng)用程序依賴項 jQuery。刪除之后，13 個前端應(yīng)用程序 JavaScript 大小減少了 32 KB（或 31% 到 49%）之間，其他多項性能提升，團隊部分技術(shù)債得以清除。

2019 年，Bootstrap 4.3.1 版本發(fā)布，開發(fā)團隊表示在發(fā)布 v4.3 版本后，將會在開發(fā) Bootstrap 5 的過程中實現(xiàn)一些關(guān)鍵變化，其中就包括放棄使用 jQuery。

2018 年，GitHub 改版重構(gòu)頁面時移除了 jQuery ，GitHub 前端團隊并未使用其它框架來代替 jQuery，而是使用原生 JavaScript。

不過另一方面，根據(jù) BuiltWith 的統(tǒng)計，已知正在使用 jQuery 的實時網(wǎng)站數(shù)量高達(dá)?69,193,395 個，流量排名前百萬的網(wǎng)站中，使用?jQuery 的比例高達(dá) 75.6%。從使用數(shù)據(jù)來看，jQuery 江湖地位仍在，而從呼聲來看，jQuery 已逐漸讓位給后起之秀……

了解 jQuery 的出場必然繞不開上世紀(jì)的瀏覽器大戰(zhàn)以及 JavaScript 的出現(xiàn)。1994 年，Netscape 網(wǎng)景公司成立，開發(fā)出瀏覽器 Netscape Navigator，并在四個月內(nèi)占據(jù)了四分之三的瀏覽器市場，成為 1990 年代互聯(lián)網(wǎng)的主要瀏覽器。

彼時網(wǎng)景公司的技術(shù)能力以及在技術(shù)上的戰(zhàn)略都領(lǐng)先于市場。網(wǎng)景預(yù)見到，網(wǎng)絡(luò)會變得更加動態(tài)，其創(chuàng)始人 Marc Lowell Andreessen 則認(rèn)為 HTML 需要一種膠水語言，也就是腳本語言，可以方便網(wǎng)頁設(shè)計師或者是非專業(yè)的程序員設(shè)計圖片和插件等。

經(jīng)過一番內(nèi)部研究，網(wǎng)景決定發(fā)明一種與 Java 搭配使用的輔助腳本語言。1995 年 5 月，網(wǎng)景工程師設(shè)計出該腳本語言的原型，而網(wǎng)景公司和昇陽電腦公司組成的開發(fā)聯(lián)盟為了讓這個新語言蹭一波 Java 的熱度，在同年 12 月 Netscape Navigator 2.0 Beta 3 中部署時，將其臨時改名為 JavaScript。

JavaScript 出現(xiàn)之后，逐漸受到開發(fā)者追捧。但隨著 Web 2.0 對交互性需求的提高，也對 JavaScript 提出了更高的要求。再加上當(dāng)時的瀏覽器廠商都還忙著跑馬圈地，搶占市場，許多軟件在不同的瀏覽器上無法通用，增加了軟件作者的開發(fā)難度，jQuery 之父 John Resig 便是當(dāng)時飽受折磨的程序員之一。

John Resig

“做 Web 編程時，我非常討厭瀏覽器的 Bug，不同的瀏覽器有不同的 Bug，而且數(shù)量非常多。于是我用 JavaScript 做了 CSS 選擇引擎，之后還做了個動畫引擎，都是自娛自樂。但與此同時我發(fā)現(xiàn)自己不能將制作的一些應(yīng)用放到瀏覽器里。為了將應(yīng)用放到 Firefox 瀏覽器中，我開始制作相關(guān)的 API，以應(yīng)用該 CSS 選擇引擎和動畫引擎，這些最終成為了 jQuery。幾個月后，我將那些應(yīng)用做進 Firefox 里，之后在 IE 里也可以運行。”

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

jQuery 的設(shè)計的宗旨是 “write Less，Do More”，許多年后，John 仍將這當(dāng)作是自己的目標(biāo) —— 讓每個人都可以在網(wǎng)頁里寫點什么，并且寫的東西能夠在瀏覽器中順利運行出來。

jQuery 的出現(xiàn)解決當(dāng)時前端開發(fā)人員兩個普遍的煩惱：讓 JavaScript 與 DOM 的交互接口變得簡單，減少開發(fā)過程中的跨瀏覽器問題。最新面試題整理好了，大家可以在Java面試庫小程序在線刷題。

首先是簡化 DOM 操作。HTML DOM 定義了用于 HTML 的一系列標(biāo)準(zhǔn)的對象，以及訪問和處理 HTML 文檔的標(biāo)準(zhǔn)方法。通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性，并對其中的內(nèi)容進行修改和刪除、創(chuàng)建新的元素等等。在 jQuery 之前，使用 JavaScript 操作 DOM 需要定義一個函數(shù)，然后將其綁定到特定 DOM 中的各種 HTML 元素中，這對于日常使用來說非常繁瑣和復(fù)雜。

所以 jQuery 提供了一個選擇器引擎 —— 后來迭代為 Sizzle，它使得開發(fā)者可以在 CSS 中，通過名稱（例如 div）、ID（例如 #myId）、類別（例如 .my-class）等來選擇頁面上的元素，用字符串代替函數(shù)來查找元素，過濾子元素，相較其他引擎速度更快、文件大小更小、易于擴展并且沒有依賴關(guān)系。

另一方面，在純 JavaScript 開發(fā)中，開發(fā)者需要檢查瀏覽器使用何種方式添加事件，然后再做選擇，但是 jQuery 提供了隱藏了不同瀏覽器的 JavaScript 實現(xiàn)之間的一些不兼容性，可以自行檢查瀏覽器需要什么方式，然后使用適當(dāng)?shù)姆绞健?/span>

?

憑借著這兩個優(yōu)勢，jQuery 迅速獲得了開發(fā)者社區(qū)和許多大公司的支持。在 2010 年左右，微軟和 Google 都在他們的 CDN 網(wǎng)絡(luò)中為 jQuery 庫提供托管；Media Temple 竭盡全力捐助托管 jQuery 網(wǎng)站；微軟也參與到對 jQuery 的測試和開發(fā)工作中，Visual Studio 和 ASP.NET MVC 都內(nèi)置 jQuery；諾基亞參與 jQuery 測試，并雇傭了 jQuery 核心成員 Brandon Aaron；Mozilla 則直接雇傭了 John Resig……

正是這些大公司的支持與使用，使得 jQuery 在最初的幾年間非常成功。根據(jù) John Resig 的介紹，jQuery 的開發(fā)資源全部來自于外部的捐贈。2011 年，jQuery 成立 jQuery 基金會，主要為支持 jQuery 核心，用戶界面和移動項目的發(fā)展，提供 jQuery 文檔和支持和促進 jQuery 社區(qū)發(fā)展。

“令我高興的是，世界上顯然仍簡潔 API 設(shè)計的一席之地，正如 jQuery 的持續(xù)成功所證明的那樣?！?在 jQuery 十周年的時候，John Resig 還對 jQuery 的火爆表達(dá)過贊嘆，“令人驚訝！jQuery 比以往任何時候都更受歡迎，全球前 100 萬網(wǎng)站 77.8% 都在使用它。”

這一比例至今也只是下降了 2.2%，許多公司仍在使用 jQuery。有業(yè)內(nèi)人士分析：“jQuery 在 2016 年之前的普及率非常高，幾乎有 90% 以上的市占率，同時也培養(yǎng)了很多以 jQuery 為技術(shù)起點的開發(fā)者。2016 年后，雖然 React、Vue 在國內(nèi)飛速發(fā)展，但生態(tài)層面依然沒有 jQuery 那么完善，一些開發(fā)者在新興的 MVVM 框架上找不到的解決方案時，就只能從 jQuery 生態(tài)里面尋找，也就出現(xiàn)了許多網(wǎng)站在混用的情況?！?/span>

那么，在如此高的使用率下，為什么對 jQuery 會成為一些公司眼中想要刪掉的技術(shù)債呢？

點擊關(guān)注公眾號，Java干貨及時送達(dá)

“目前從整個世界范圍講，jQuery 這項技術(shù)屬于被邊緣化的存在?！?業(yè)內(nèi)人士指出，從 2006 年第一個版本發(fā)布起，jQuery 迎來了 10 年的黃金期，這種底蘊意味著它很難被瞬間淘汰。但隨著 JavaScrpit 本身的成熟和瀏覽器內(nèi)核的統(tǒng)一，jQuery 的優(yōu)勢在慢慢淡化……?

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

當(dāng) jQuery 開始走向優(yōu)化路線時，當(dāng) jQuery 最初所解決的問題逐漸不再是普遍問題時，必然面臨優(yōu)勢不復(fù)的情況?；乜?jQuery 的兩個主戰(zhàn)場，簡化 DOM 操作和瀏覽器兼容，都在最近幾年有了更優(yōu)解。

首先，瀏覽器兼容的問題。在 jQuery 雛形初現(xiàn)的前一年 ——2004，一群來自 Opera、Mozilla、Apple 等不同組織但志同道合的人聚集在一起，組成一個名為 WHATWG 的獨立規(guī)范組，旨在編寫一個更好的 HTML 標(biāo)記規(guī)范，用來構(gòu)建新一代 Web 應(yīng)用程序，這個規(guī)范組之后的成果便是 Web 應(yīng)用程序 1.0 規(guī)范。而后，W3C 成員多次討論后，在 2007 年 3 月，重啟 HTML 工作，新的 HTML 工作小組做的第一個決定，便是采用 Web 應(yīng)用程序 1.0 規(guī)范，并將其稱為 HTML5。

相較此前的 HTML 版本，HTML 5 更適合編寫動態(tài)的應(yīng)用程序，并且具有明確定義的解析算法，實現(xiàn)所有 HTML5 的瀏覽器都將從相同的標(biāo)記創(chuàng)建相同的 DOM。

不過，HTML5 在剛出現(xiàn)時并不十分完善，外部采用率較低，給了 jQuery 前期喘息成長的機會。

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

HTML 5 又經(jīng)歷了一段時間的低迷，在此期間，jQuery 依舊是全球大多數(shù)網(wǎng)站的心頭好。

直到 2014 年 10 月底，歷時 8 年，W3C 終于宣布 HTML5 定稿。而后兩年，瀏覽器廠商們紛紛宣布支持 HTML5，各類應(yīng)用程序開發(fā)商們們也陸續(xù)采用 HTML5 開發(fā)產(chǎn)品，HTML5 的一些服務(wù)提供商也獲得融資。

伴隨著 HTML5 的大范圍應(yīng)用，另一個對 jQuery 造成 “威脅” 的技術(shù)框架 ——MVVM 普及，使得 jQuery 在 DOM 操作上的優(yōu)勢不復(fù)。最新面試題整理好了，大家可以在Java面試庫小程序在線刷題。

由于開發(fā)者們希望 HTML5 開發(fā)的應(yīng)用可以接近原生 App 的效果，便暴露出一些問題，比如大量的 DOM 操作與 DOM API 的頻繁調(diào)用，操作繁瑣，使得代碼變得難以維護，頁面渲染性能降低、速度變慢等。即便 jQuery 能簡化 DOM 操作，但比不上 MVVM 架構(gòu)直接跳過了 DOM 操作。?

MVVM 架構(gòu)由 Model、View、ViewModel 三部分構(gòu)成，Model 層代表數(shù)據(jù)模型，可定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表 UI 組件，負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成 UI 展現(xiàn)，ViewModel 則是一個同步 View 和 Model 的對象。View 和 Model 之間通過 ViewModel 進行交互，并且二者的同步工作完全自動，不需要開發(fā)者手動操作 DOM。

由于 MVVM 結(jié)構(gòu)實現(xiàn)了數(shù)據(jù)與視圖的分離，并通過數(shù)據(jù)來驅(qū)動視圖，封裝 DOM 操作，將數(shù)據(jù)和視圖的綁定變成了自動化的操作，進而把 DOM 操作從業(yè)務(wù)代碼中移除，這就導(dǎo)致 jQuery 在很多場景中失去了用武之地。

MVVM 架構(gòu)圖 （圖片來源：https://zhuanlan.zhihu.com/p/173551040）

符合 MVVM 思維的新一代的前端開發(fā)框架逐漸嶄露頭角，組成現(xiàn)在的前端三大框架：?

2009 年，AngularJS 框架出現(xiàn)，后被 Google 收購，最為核心的特性包括 MVVM、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等；

2013 年 5 月，起源于 Facebook、用于構(gòu)建用戶界面的 JavaScript 庫 React 開源；

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

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

整體而言，隨著 UI 交互標(biāo)準(zhǔn)的提升，瀏覽器解析標(biāo)準(zhǔn)的統(tǒng)一，jQuery 在新功能上很難超過一眾 MVVM 框架。

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

此外，由于 jQuery 目前仍有著較高的市占率，簡單易上手，掌握 jQuery 依舊是許多開發(fā)者的 “基操”。在對 jQuery 的評價中，有這么一句流傳甚廣的話：“任何一個程序員，都可以用三天的時間學(xué)會 jQuery 的基本用法并投入使用”。再加上開發(fā)者的技術(shù)棧更新也存在著一些主觀因素，完全推倒已經(jīng)掌握的技術(shù)，對大部分、尤其是本來就不擅長前端領(lǐng)域的開發(fā)者而言很困難。業(yè)內(nèi)人士預(yù)測，jQuery 在未來若干年的主要受眾群體，依舊會是后端開發(fā)者，當(dāng)然這個群體比例會隨著新人的不斷加入而被慢慢沖淡。?

“總體而言，我們今天討論的并非是? jQuery 的地位，而更多應(yīng)該是它存在的意義，對實用者而言，人們更關(guān)心 jQuery 能幫他們解決多少問題，地位已經(jīng)不再是屬于 jQuery 的標(biāo)簽了?！?/span>

參考鏈接：

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