jQuery的前世此生

做者：Danny Guo

翻譯：奶爸碼農

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而只是爲了它的一些功能更輕量級。

我認爲使用jQuery的最佳理由是它提供了全面的功能，能夠爲網站的前端提供支持。您沒必要學習全部各類原生API或專用庫，而只需閱讀jQuery文檔並當即提升工做效率。

它的命令式方法不能很好地擴展，但它比其餘庫的聲明性方法更直接。對於範圍明確有限的網站，放入jQuery並繼續前進是合理的;它不須要任何複雜的構建或編譯過程。

當你有理由相信網站不會變得更加複雜，而且你不想打擾本機功能時，jQuery是一個不錯的選擇，原生功能確定比等效的jQuery代碼更冗長。

當您必須支持舊版本的IE時，會出現另外一個用例。在這種狀況下，jQuery的功能與IE瀏覽器占主導地位的瀏覽器同樣好。

展望

jQuery不會很快消失。 它正在積極開發中，即便有原生方法，許多開發人員也更喜歡使用它的API。

它幫助一代開發人員製做適用於每一個瀏覽器的網站。雖然它已經在不少方面被新的庫、框架和範例取代，但jQuery在使網絡成爲如今的狀態方面發揮了巨大的積極做用。

除非jQuery功能發生重大變化，不然jQuery在將來幾年內的使用率可能會繼續緩慢但穩定降低。新網站傾向於從一開始就使用更現代的框架構建，jQuery的適用場景正變得愈來愈少。

有些人對網絡開發工具的流失率不滿意，但對我來講，這是一個快速進步的標誌。 jQuery爲咱們提供了更好的方法來作事。它的繼任者也作了一樣的事情。

有興趣同窗能夠關注微信公衆號奶爸碼農，不按期分享關於投資、理財、IT的信息：