主持人 > 博客 > 網絡新聞 > jQuery 的歷史和遺產

jQuery 的歷史和遺產

jQuery 的歷史和遺產
jQuery - 這是最受歡迎的 世界上有一個 JavaScript 函式庫。 Web 開發社群在 2000 年代末創建了它，形成了一個由在幕後使用 jQuery 的網站、外掛程式和框架組成的豐富生態系統。

但近年來，它作為網路開發首要工具的地位已經被削弱。 讓我們看看為什麼 jQuery 變得流行，為什麼它不再流行，以及在什麼情況下仍然建議使用它來創建現代網站。

jQuery 簡史

約翰·雷西格（約翰·雷西格）於 2005 年創建了該庫的第一個版本，並且 2006年出版-m，在一個名為 BarCampNYC 的活動中。 在 jQuery 官方網站 作者寫道：

jQuery 是一個基於以下座右銘的 Javascript 函式庫：Javascript 應該是有趣的程式碼。 jQuery 處理常見的、重複性的任務，去除所有不必要的標記，並使它們變得簡短、優雅和乾淨。

jQuery 有兩個主要優點。 第一個是用來操作網頁的便利 API。 特別是，它提供了強大的選擇元素的方法。 您不僅可以透過 ID 或類別進行選擇，jQuery 還允許您編寫複雜的表達式，例如，根據元素與其他元素的關係來選擇元素：

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

隨著時間的推移，選擇機制變成了一個單獨的庫 嘯.

這個函式庫的第二個優點是它抽象化了瀏覽器之間的差異。 在那些年裡，要寫能夠在所有瀏覽器中可靠運行的程式碼是很困難的。

缺乏標準化意味著開發人員需要考慮瀏覽器和邊緣情況之間的眾多差異。 看一眼 這個早期的 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 使得更複雜的技術（例如動畫和 Ajax）的實現變得更加容易。 該庫實際上已成為網站的標準依賴項。 如今，它為互聯網的很大一部分提供了動力。 W3Techs 認為 如今 74% 的網站使用 jQuery.

對 jQuery 開發的控制也變得更加正式。 2011年團隊 創建了 jQuery 板。 2012 年 jQuery Board 轉變為 jQuery 基金會.

2015 年，jQuery 基金會與 Dojo 基金會合併， 創立 JS 基金會，然後與 Node.js 基金會合併為 2019-m 創建 OpenJS基金會，其中 jQuery 是“突破性項目“

環境的變化

然而，近年來 jQuery 失去了人氣。 GitHub 從我網站的前端刪除了該庫。 引導程式 v5 擺脫 jQuery因為這是他的“常規 JavaScript 的最大客戶端依賴性「（目前大小為 30 KB，已縮小並打包）。 Web 開發的幾個趨勢削弱了 jQuery 作為重要工具的地位。

瀏覽器

由於多種原因，瀏覽器的差異和限制已經變得不那麼重要了。 一是標準化程度有所提高。 主要瀏覽器開發人員（Apple、Google、Microsoft 和 Mozilla）正在共同開發 網路標準 框架內 Web超文本應用技術工作小組.
儘管瀏覽器在許多重要方面仍然存在差異，但供應商至少有一種方法來搜尋和建立通用資料庫，而不是 永久戰爭 一起。 因此，瀏覽器 API 獲得了新的功能。 例如， 獲取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);
    });

方法 查詢選擇器 и 查詢選擇器全部 重複的 jQuery 選擇器：

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

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

現在您可以使用操作元素類 類別列表:

// jQuery
$('#warning').toggleClass('visible');

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

該網站 你可能不需要 jQuery 下面還有幾種可以用本機程式碼取代 jQuery 程式碼的情況。 有些開發人員總是堅持使用 jQuery，因為他們根本不了解新的 API，但當他們了解時，他們就會開始減少使用該程式庫的頻率。

使用本機功能可以提高頁面效能。 許多 jQuery 的動畫效果 現在你可以實施 更有效 使用CSS。

第二個原因是瀏覽器的更新速度比以前快得多。 他們大多數都使用 「常青」更新策略，Apple Safari 除外。 它們可以在背景更新，無需用戶參與，並且與作業系統更新無關。

這意味著新的瀏覽器功能和錯誤修復的分發速度要快得多，開發人員不必等到發布 我可以用嗎 將達到可接受的水平。 他們可以自信地使用新功能和 API，而無需下載 jQuery 或 polyfill。

第三個原因是 Internet Explorer 正接近完全無關緊要的狀態。 IE 長期以來一直是世界各地 Web 開發的禍根。 它的錯誤很普遍，而且由於 IE 在 2000 年代佔據主導地位並且沒有使用常青更新策略，因此舊版本仍然很常見。

2016年，微軟加速了IE的退役， 停止支持 第十個及更早版本，限制了對 IE 11 的支援。越來越多的 Web 開發人員可以忽略 IE 相容性。

甚至 jQuery 也從 IE 8 開始停止支援 IE XNUMX 及以下版本 版本 2.0，發表於 2013 年。 儘管在某些情況下仍然需要 IE 支援（例如在舊站點上），但這些情況出現的頻率越來越低。

新框架

自從 jQuery 出現以來，已經創建了許多框架，包括現代的領導者 應對, 角 и Vue公司。 與 jQuery 相比，它們有兩個重要的優點。

首先，它們使將使用者介面分離為組件變得容易。 框架旨在處理頁面呈現和更新。 而 jQuery 通常只用於更新，將提供初始頁面的任務留給伺服器。

另一方面，React、Angular 和 Vue 元件可讓您緊密耦合 HTML、程式碼甚至 CSS。 正如我們將程式碼庫劃分為許多獨立的函數和類別一樣，將介面劃分為可重複使用元件的能力使得建置和維護複雜網站變得更加容易。

第二個優點是，最近的框架遵循聲明性範例，其中開發人員描述介面應該是什麼樣子，並將其留給框架進行所有必要的更改以實現所需的效果。 這種方法與 jQuery 程式碼的命令式方法相反。

在 jQuery 中，您明確地寫下進行任何更改的步驟。 在聲明式框架中，您會說：“根據這些數據，介面應該如下所示。” 這可以使編寫無錯誤的程式碼變得更加容易。

開發人員採用了新的網站開發方法，這就是為什麼 jQuery 受歡迎程度下降的原因。

何時使用 jQuery？

所以當 必須 使用 jQuery？

如果專案的複雜性增加，那麼最好從另一個允許您有效管理複雜性的程式庫或框架開始。 例如，將介面劃分為組件。 在此類網站上使用 jQuery 起初可能看起來不錯，但它很快就會導致意大利麵條式程式碼，您不確定哪個片段影響頁面的哪個部分。

我曾經遇到過這樣的情況，當我試圖做出任何改變時，感覺就像是一項艱鉅的任務。 您不能確定不會破壞任何內容，因為 jQuery 選擇器依賴伺服器產生的 HTML 結構。

另一方面是簡單的網站，只需要一點互動或動態內容。 在這些情況下我也不會預設使用 jQuery，因為您可以使用本機 API 做更多事情。

即使我需要更強大的東西，我也會尋找專門的庫，例如 軸距 對於阿賈克斯或 Animate.css 用於動畫。 這比為一個小功能加載所有 jQuery 更容易。

我認為使用 jQuery 的最佳理由是它為網站前端提供了全面的功能。 您無需學習各種本機 API 或專用函式庫，只需閱讀 jQuery 文件即可立即提高工作效率。

命令式方法的擴充性不好，但它比其他函式庫的聲明式方法更容易學習。 對於功能明顯有限的站點，最好使用 jQuery 並冷靜地工作：該庫不需要複雜的組裝或編譯。

此外，如果您確信您的網站不會隨著時間的推移而變得複雜，並且您不關心本機功能（這肯定需要編寫比 jQuery 更多的程式碼），那麼 jQuery 是不錯的選擇。

如果您需要支援舊版的 IE，也可以使用此程式庫。 然後 jQuery 將為您提供服務，就像 IE 是最受歡迎的瀏覽器時代一樣。

勘探

jQuery 不會很快消失。 她 積極發展，並且許多開發人員更喜歡使用其 API，即使本機方法可用。 該程式庫幫助整整一代開發人員創建了可在任何瀏覽器上運行的網站。 儘管 jQuery 在許多方面已被新的函式庫、框架和範例所取代，但它在現代 Web 的創建中發揮了巨大的積極作用。

除非 jQuery 的功能發生重大變化，否則該程式庫的使用量在未來幾年內可能會繼續緩慢但穩定地下降。 新網站往往從一開始就使用更現代的框架來構建，適合 jQuery 的用例變得越來越少。

有些人不喜歡網頁開發工具過時的速度，但對我來說，這是快速進步的證據。 jQuery 讓我們能夠把很多事情做得更好。 她的繼任者也是如此。

來源： www.habr.com

添加評論