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

創(chuàng)新互聯(lián)公司專注于全州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供全州營(yíng)銷型網(wǎng)站建設(shè)，全州網(wǎng)站制作、全州網(wǎng)頁(yè)設(shè)計(jì)、全州網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開(kāi)發(fā)服務(wù)，打造全州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供全州網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

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

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

2018 年，GitHub 改版重構(gòu)頁(yè)面時(shí)移除了 jQuery ，GitHub 前端團(tuán)隊(duì)并未使用其它框架來(lái)代替 jQuery，而是使用原生 JavaScript。

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

Web 2.0，jQuery 閃亮登場(chǎng)

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

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

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

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

John Resig

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

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

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

jQuery 的出現(xiàn)解決當(dāng)時(shí)前端開(kāi)發(fā)人員兩個(gè)普遍的煩惱：讓 JavaScript 與 DOM 的交互接口變得簡(jiǎn)單，減少開(kāi)發(fā)過(guò)程中的跨瀏覽器問(wèn)題。

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

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

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

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

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

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

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

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

jQuery 江湖地位不再？

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

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

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

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

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

不過(guò)，HTML5 在剛出現(xiàn)時(shí)并不十分完善，外部采用率較低，給了 jQuery 前期喘息成長(zhǎng)的機(jī)會(huì)。

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

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

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

伴隨著 HTML5 的大范圍應(yīng)用，另一個(gè)對(duì) jQuery 造成 “威脅” 的技術(shù)框架 ——MVVM 普及，使得 jQuery 在 DOM 操作上的優(yōu)勢(shì)不復(fù)。

由于開(kāi)發(fā)者們希望 HTML5 開(kāi)發(fā)的應(yīng)用可以接近原生 App 的效果，便暴露出一些問(wèn)題，比如大量的 DOM 操作與 DOM API 的頻繁調(diào)用，操作繁瑣，使得代碼變得難以維護(hù)，頁(yè)面渲染性能降低、速度變慢等。即便 jQuery 能簡(jiǎn)化 DOM 操作，但比不上 MVVM 架構(gòu)直接跳過(guò)了 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 則是一個(gè)同步 View 和 Model 的對(duì)象。View 和 Model 之間通過(guò) ViewModel 進(jìn)行交互，并且二者的同步工作完全自動(dòng)，不需要開(kāi)發(fā)者手動(dòng)操作 DOM。

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

MVVM 架構(gòu)圖 

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

• 2009 年，AngularJS 框架出現(xiàn)，后被 Google 收購(gòu)，最為核心的特性包括 MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴注入等等；
• 2013 年 5 月，起源于 Facebook、用于構(gòu)建用戶界面的 JavaScript 庫(kù) React 開(kāi)源；
• 2013 年，在 Google 工作的尤雨溪受到 Angular 的啟發(fā)，發(fā)出了一款輕量框架 Seed，同年 12 月更名為 Vue，2014 年 01 月 24，Vue 正式對(duì)外發(fā)布，版本號(hào)是 0.8.0。 

有人形容 jQuery 和新框架的對(duì)比：

我讓 jQuery 去買瓶醬油，給了他 100 塊錢，這時(shí)我們需要告訴他去小賣鋪的路怎么走、怎么跟老板說(shuō)買啥醬油，買多少錢的醬油，找多少零錢，還得告訴他怎么回來(lái)（命令式）。

這時(shí)我讓 Vue 去買醬油去了，這時(shí)我只需要給他錢，并且告訴他目的地在哪兒，買什么醬油即可，不需要手把手教他（函數(shù)式）。

這就是傳統(tǒng)開(kāi)發(fā)和現(xiàn)代框架開(kāi)發(fā)的不同。

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

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

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

“總體而言，我們今天討論的并非是  jQuery 的地位，而更多應(yīng)該是它存在的意義，對(duì)實(shí)用者而言，人們更關(guān)心 jQuery 能幫他們解決多少問(wèn)題，地位已經(jīng)不再是屬于 jQuery 的標(biāo)簽了?！?/p>
當(dāng)前標(biāo)題：JQuery已經(jīng)是時(shí)代的眼淚了嗎
轉(zhuǎn)載注明：http://uogjgqi.cn/article/djsdggo.html