'jQuery的前世今生'

jQuery曾經是世上最流行的JavaScript庫，在2000年後期，它得到了廣泛的應用，圍繞它也產生了一個豐富的生態系統，誕生了大量的插件、框架。

但是到了最近一段時間，jQuery的地位急劇下降。這篇文章會回顧一下jQuery的前世今生。

jQuery的歷史

John Resig在2005年開發了JQuery的第一個版本，並且在BarCampNYC中宣佈了它。在jQuery網站中，他寫到：

jQuery是一個JavaScript庫為了讓編寫JavaScript代碼變得有趣。jQuery通過封裝通用性、重複性的功能，移除掉不必要的代碼修辭，讓JavaScript代碼變得簡單、精煉和更加可讀。

jQuery主要解決了兩大問題，第一：它提供了一整套簡潔的API用於操作Dom，尤其是提供了一系列強大的方法去選擇頁面元素。除了可以基於元素id或者class來選擇元素，jQuery還可以支持複雜的表達式，例如基於和其他元素關係來篩選：

// 在contact節點下，選出people列表中每一個元素
$('#contacts ul.people li');
複製代碼

這個篩選引擎最終抽象成一個獨立庫“Sizzle”。

第二個賣點是它抹平了不同瀏覽器的差異。在它以前，要支持多個瀏覽器是件非常不容易的事情。

由於早年瀏覽器缺乏統一標準，開發者需要兼容不同瀏覽器解決各種邊界情況。可以看下早期jQuery的源代碼，搜索"jQuery.browser"：

// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
 // Use the handy event callback
 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" ) {
 // Only works if you document.write() it
 document.write("<scr" + "ipt id=__ie_init defer=true " + 
 "src=javascript:void(0)><\\/script>");
 // Use the defer script hack
 var script = document.getElementById("__ie_init");
 script.onreadystatechange = function() {
 if ( this.readyState == "complete" )
 jQuery.ready();
 };
 // Clear from memory
 script = null;
// If Safari is used
} else if ( jQuery.browser == "safari" ) {
 // Continually check to see if the document.readyState is valid
 jQuery.safariTimer = setInterval(function(){
 // loaded and complete are both valid states
 if ( document.readyState == "loaded" || 
 document.readyState == "complete" ) {
 // If either one are found, remove the timer
 clearInterval( jQuery.safariTimer );
 jQuery.safariTimer = null;
 // and execute any waiting functions
 jQuery.ready();
 }
 }, 10);
}

通過使用jQuery，開發者就可以讓jQuery的團隊去完成這些瀏覽器兼容的事情。後來，jQuery又添加了更多的特性，例如動畫和ajax。jQuery自此變成了網站開發的標準依賴庫，即使到今天依舊發揮了重要的作用。W3Techs預估當今依然有74%網站使用jQuery。

jQuery的管理也變得越來越正式，2011年，jQuery團隊正式成立委員會，2012年，委員會組成了jQuery基金會。

到了2015年，jQuery基金會和Dojo基金會合併到了JS基金會，然後到了2019年，又和Node.js基金會合併成OpenJS基金會。

變化的環境

然而，近年來jQuery的受歡迎程度有所下降。 GitHub從他們網站中刪除了jQuery，而Bootstrap v5也將丟棄jQuery，因為它是Bootstrap中最大的JavaScript的依賴庫（壓縮和gzip後30KB）。Web開發的一些趨勢削弱了jQuery作為必須使用的工具的地位。

瀏覽器

瀏覽器差異和限制變得不那麼重要了。首先是標準化有所改進， 主要的瀏覽器供應商（Apple，Google，Microsoft和Mozilla）通過Web Hypertext Application Technology Working Group在Web標準上進行協作。

雖然瀏覽器在很大程度上仍然存在差異，但供應商至少有一種方法可以找到並發展共同點而不是互相發動不間斷的戰爭。 因此，瀏覽器API變得更加強大，例如，Fetch API可以取代jQuery的Ajax函數：

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

querySelector 和 querySelectorAll API可以替代jQuery的元素查詢能力:

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

操作DOM元素可以用 classList :

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

您可能不需要jQuery網站列出了幾個可以用原生代碼替換jQuery代碼的情況。有些開發人員總是會使用jQuery，因為他們並不知道這些API是可用的，但是隨著開發人員瞭解它們，他們對jQuery的依賴性降低了。

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

第二個原因是瀏覽器的更新速度比過去更快。大多數瀏覽器現在都有常綠更新策略，Apple的Safari是主要的例外。他們可以在沒有用戶干預的情況下靜默更新，並且不依賴於操作系統更新。

這意味著用戶可以更快地採用新的瀏覽器功能和錯誤修復，開發人員不必等待使用率百分比達到可接受的水平。他們可以自信地使用功能和API而無需加載jQuery或polyfill。

第三個原因是IE越來越接近無關緊要，IE一直是各地Web開發者的禍根。特定版本的IE的錯誤是眾所周知的，並且因為IE是2000年代的主流瀏覽器並且缺乏常規更新，舊版本固執地徘徊。

微軟加速了IE的棄用，結束了對2016年IE 10及以下版本的支持，將IE 11作為最後一個支持版本。Web開發人員忽視IE兼容性的現象越來越普遍。

即使jQuery在2013年發佈版本2.0時也放棄了對IE 8及以下版本的支持。雖然遺留網站等一些特殊情況仍然需要IE，但這些情況正變得越來越少。

新框架

自jQuery發佈以來，出現了大量的Web框架，目前的一些領先者是React，Angular和Vue。這些框架比jQuery有兩個顯著優勢。

首先，它們可以輕鬆地將UI組件化。它們能夠很好的處理展現頁面以及更新頁面。 jQuery通常僅用於更新頁面，依靠服務器提供初始頁面。

另一方面，React，Angular和Vue組件允許HTML，JS甚至CSS之間的緊密耦合。就像我們可能將代碼庫分解為多個自包含的函數和類一樣，將UI分解為可重用的組件可以更容易地構建和維護複雜的網站。

第二個優點是較新的框架鼓勵聲明性範例，其中開發人員描述UI應該是什麼樣的，並將其留給框架以進行必要的更改以實現目標。這種方法與以jQuery代碼為特徵的命令式方法形成對比。

使用jQuery，您可以明確地編寫執行任何更改的步驟。使用聲明性框架，您會說，“基於這些數據，這就是用戶界面的樣子。”這可以顯著減少編寫無錯代碼時必須進行的心理記賬。

開發人員已經採用這些新方法來構建網站，從而降低了jQuery的使用率。

什麼時候使用jQuery

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

如果預計相關項目的複雜性會增加，最好從一個不同的庫或框架開始，這樣可以讓您明智地處理這種複雜性，例如將UI分解為組件。對於這樣的網站使用jQuery起初可以很好，但它可以快速演變成​​意大利麵條式的代碼，在那裡你不確定哪些代碼會影響頁面的哪些部分。

我之前已經處理過這個問題，每當你想做出改變時，情況就會產生一種不安的感覺。由於jQuery選擇器依賴於服務器生成的HTML結構，因此很難確定您沒有破壞任何東西。

另一方面，您擁有隻需要少量交互性或動態內容的簡單網站。對於這些情況，我仍然默認不使用jQuery，因為我們現在可以使用原生API做更多事情。

即使我確實需要更強大的功能，我也會為用例尋找特定的庫，例如用於Ajax的axios或用於動畫的Animate.css。使用像這樣的庫通常比加載整個jQuery而只是為了它的一些功能更輕量級。

作者：奶爸碼農

鏈接：https://juejin.im/post/5d71fdd06fb9a06ae57d1372