09.21 作為曾經的 Web 開發王者，jQuery 的傳奇怎麼續寫？

作為世界上使用最廣泛的JavaScript庫，jQuery曾經幫助過一代開發人員創建了適用於每種瀏覽器的網站，可以說，Web開發之所以能有今天，jQuery可謂功不可沒。但是隨著新的庫、框架和範例的不斷湧現，jQuery作為Web開發首選工具的地位已經逐漸不保......任何事物都有其自身發展的興盛與衰落，短期內jQuery並不會消失，但是對於其來說，又該如何

作者 | Danny Guo

出品 | CSDN（ID：CSDNnews）

jQuery是世界上使用最廣泛的JavaScript庫。2000年末的時候，Web開發社區大力推崇jQuery，他們利用jQuery打造了由大量網站、插件和框架組成的生態系統。

但在過去的幾年中，jQuery作為Web開發首選工具的地位已經不保。在本文中，讓我們一起來看看為什麼jQuery流行了起來，後來又是什麼原因導致它有點失寵，以及我們何時仍然應該選擇jQuery創建現代網站。

jQuery的發展簡史

2005年，John Resig開發了第一版的jQuery，並於2006年在一次名為BarCampNYC的活動中發佈。他曾在最早的jQuery網站上寫道：

jQuery是一個Javascript庫，它永遠銘記自己的使命：編寫Javascript代碼是一件有趣的事情。為了實現這個目標，jQuery剝離了所有不必要的標記，通過簡化、聰明且易於理解的方式來執行常見的重複性任務。

jQuery有兩個主要的價值主張：第一，提供高效的API方便操作網頁。特別是，它提供了強大的選擇元素的方法。

除了通過id或類選擇元素之外，jQuery還允許使用複雜的表達式，例如根據它們與其他元素的關係選擇元素：

<code>// Select every item within the list of people within the contacts element/<code><code>$('#contacts ul.people li');/<code>

這個選擇引擎最終單獨抽象成了一個名為Sizzle的庫。

第二個賣點是，瀏覽器之間差異的抽象。當時，很難編寫出可以在所有瀏覽器上穩健運行的代碼。

由於缺乏標準化，開發人員必須考慮許多不同的瀏覽器行為和邊緣情況。只需看看早期的jQuery源代碼，然後搜索jQuery.browser就可以看到這類的例子，如下所示：

<code>// If Mozilla is usedif ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {/<code><code> // Use the handy event callback/<code><code> jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );// If IE is used, use the excellent hack by Matthias Miller// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited} else if ( jQuery.browser == "msie" ) {/<code>
<code> // Only works if you document.write it/<code><code> document.write("<code> "class="lazy" src="//p2.ttnews.xyz/loading.gif" data-original=javascript:void(0)>");/<code> 

<code> // Use the defer><code> var><code>><code> if ( this.readyState == "complete" )/<code><code> jQuery.ready;/<code><code> };/<code>
<code> // Clear from memory/<code><code>><code> // Continually check to see if the document.readySt/<code>/<code>

jQuery出現以後，開發人員就可以依賴jQuery團隊來處理這些陷阱。

後來，開發人員在jQuery的幫助下，可以更容易地採用更復雜的技術，比如動畫和Ajax。逐漸地， jQuery成為了各個網站的標準依賴。時至今日， 互聯網的很大一部分依然構建在jQuery上。根據 W3Techs的估計，大約有74%的網站仍在使用jQuery。

jQuery的管理工作也越來與正規。2011年，jQuery團隊正式創建了jQuery委員會。2012年， jQuery委員會成立了jQuery基金會。

2015年，jQuery基金會與Dojo基金會合並，組建了JS基金會。後來，2019年又與Node.js 基金會合並，組建了OpenJS基金會——jQuery是其“最具影響力的項目”之一。

事態變化

然而，近年來jQuery的受歡迎程度有所下降。GitHub的網站前端不再使用jQuery，而Bootstrap v5也放棄了jQuery，因為它是Bootstrap“客戶端常規JavaScript最大的依賴”（目前壓縮後是30KB）。Web開發的一些趨勢削弱了jQuery作為必選工具的地位。

瀏覽器

由於多種原因，瀏覽器差異和限制也沒有那麼顯著了。首先是標準化有所改進。主流瀏覽器供應商（蘋果、谷歌、微軟和Mozilla）成立了Web超文本應用技術工作組，併合作開發了Web標準。

雖然瀏覽器在很多重要方面仍然存在差異，但各家供應商總有辦法共同發展，避免無休止的戰爭。因此，瀏覽器的API日益強大。例如，Fetch API可以取代jQuery的Ajax函數：

<code>$.getJSON('https://api.com/songs.json')/<code><code> .done(function (songs) {/<code><code> console.log(songs);/<code><code> })/<code>
<code>// native/<code><code>fetch('https://api.com/songs.json')/<code><code> .then(function (response) {/<code><code> return response.json;/<code><code> })/<code><code> .then(function (songs) {/<code><code> console.log(songs);/<code><code> });/<code>

querySelector和querySelectorAll方法也可以取代jQuery的選擇功能：

<code>// jQuery/<code><code>const fooDivs = $('.foo div');/<code>
<code>// native/<code><code>const fooDivs = document.querySelectorAll('.foo div');/<code>

如今我們還可以使用classList操作元素的類：

<code>// jQuery/<code><code>$('#warning').toggleClass('visible');/<code>
<code>// native/<code><code>document.querySelector('#warning').classList.toggle('visible');/<code>

這個網站（http://youmightnotneedjquery.com/）列出了幾種可以用原生代碼替換jQuery代碼的情況。有些開發人員還是喜歡使用jQuery，因為他們不知道可以利用哪些API，但是隨著開發人員對API越來越熟悉，他們對jQuery的依賴性就會降低。

使用原生功能還可以提高網頁的性能。而且如今你還可以使用CSS更有效地實現許多jQuery的動畫效果。

第二個原因是瀏覽器的更新速度比過去更快。如今，除了蘋果的Safari之外，大多數瀏覽器都有"Evergreen"的更新策略。這些瀏覽器可以在沒有用戶干預的情況下悄悄更新，而且不依賴於操作系統的更新。

這意味著用戶可以更快地獲得瀏覽器的新功能和錯誤修復，開發人員不必等待Can I Use網站上給出的使用百分比達到可接受的水平。他們可以毫無顧慮地使用新功能和API，而且還無需加載jQuery或polyfill。

第三個原因是Internet Explorer的邊緣化。一直以來，Web開發人員都對IE深惡痛絕。有些IE的bug是人盡皆知的，而且因為IE瀏覽器是2000年的主流瀏覽器，其缺乏"Evergreen"更新，很多人還在使用舊版本。

而微軟的做法更是加快了人們放棄IE的速度，他們於2016年後放棄了對IE 10及以下版本的支持，並將IE 11作為最後一個支持的版本。Web開發人員忽視IE兼容性的現象越來越普遍。

2013年，甚至是jQuery發佈的版本2.0時也放棄了對IE 8及以下版本的支持。雖然有些遺留網站等特殊情況仍然需要IE，但使用IE的人越來越少了。

新框架

自jQuery發佈以來，Web開發湧現了大量Web框架，目前處於主流地位的是React、Angular和Vue。與jQuery相比，這些框架擁有兩大顯著優勢。

首先，它們可以輕鬆地將UI分解為組件。這些框架旨在處理頁面的呈現以及頁面的更新。而 jQuery通常僅用於更新頁面，最初的頁面則需要服務器提供。

另一方面，React、Angular和Vue組件支持HTML、代碼甚至CSS之間的緊密耦合。就像我們將代碼庫分解成多個獨立的函數和類一樣，這些框架可以將UI分解為可重用的組件，如此一來構建和維護複雜的網站就更加容易了。

第二個優點是，這些新出現的框架鼓勵聲明式範例，開發人員只需描述UI應有的樣子，至於怎樣實現則留給框架去處理。這種方法與jQuery代碼中命令式的方法形成鮮明對比。

使用jQuery的時候，你需要明確地編寫修改的步驟。但在使用聲明式框架時，你只需指明：“利用這些數據，實現這樣的用戶界面。”這樣即使記不住紛繁蕪雜的代碼也可以寫出沒有bug的代碼了。

開發人員都喜歡通過這些新方法來構建網站，因此對jQuery的關注度就下降了。

何時使用jQuery？

那麼，什麼時候我們應該選擇使用jQuery呢？

如果你估計項目的複雜度會很高，那麼最好還是採用其他的庫或框架，因為這樣更加有助於處理這種複雜性，例如將UI分解成組件等。對於這樣的網站來說，剛開始的時候使用jQuery還可以，但是很快就會變得混亂不堪，你甚至不確定哪些代碼會影響頁面的哪些部分。

我之前就遇到過這樣的問題，每當你想修改代碼時，心裡就會隱隱地不安。由於jQuery選擇器依賴於服務器生成的HTML結構，因此很難確定修改代碼時不會破壞其他功能。

另一方面，有時候你的網站只需要少量交互或動態的內容。然而，即便是在這些情況下，我仍然不推薦使用jQuery，因為現在我們可以利用原生API實現很多功能。

即便我確實需要更強大的功能，我也會尋找特定的庫，例如利用a

我認為我們使用jQuery的理由在於，它提供的功能很全面，可以為網站的前端提供全面的支持。你不必學習各種的原生API或專用庫，只需閱讀jQuery文檔就可以立即提高工作效率。

jQuery的命令式方法不利於擴展，但比其他庫的聲明式方法更直接。對於範圍非常有限的網站來說，採用jQuery開發還是很合理的，因為它不需要任何複雜的構建或編譯過程。

此外，如果你很確信網站的複雜度不會增加，而且你也不想使用原生功能，那麼jQuery是一個不錯的選擇，因為原生的功能肯定比同等的jQuery代碼更冗長。

還有一種情況：你必須支持舊版本的IE。在這種情況下，jQuery可以處理好占主導地位的IE瀏覽器。

展望未來

短期內jQuery並不會消失。jQuery還在積極地發展中，儘管我們有很多原生方法，而許多開發人員也更喜歡使用原生的API。

jQuery曾經幫助過一代開發人員創建適用於每種瀏覽器的網站。雖然如今jQuery的很多方面已經被新的庫、框架和範例所取代，但Web開發之所以能有今天，jQuery可謂功不可沒。

除非jQuery的功能發生重大變化，否則在未來幾年內，jQuery的使用率可能會繼續緩慢但穩定地下降。新網站都會傾向於採用更現代的框架構建，適合採用jQuery的情況會越來越少。

對有些人來說，Web開發工具的流失率讓人有點痛心，但對我來說，這是一個快速進步的標誌。jQuery為Web開發帶來了更好的方式。而它之後的後起之秀也在朝著這個方向努力。

原文鏈接：https://blog.logrocket.com/the-history-and-legacy-of-jquery/

本文為 CSDN 翻譯，轉載請註明來源出處。

閱讀更多 程序猿久一 的文章

關鍵字: jQuery Mozilla Safari