為什麼 jQuery 是停止使用 jQuery 的一個很好的提醒

作者：Shalitha Suranga✏️

jQuery 有著悠久且受人尊敬的歷史，然而，其新版本的 jQuery v4 beta 已經發布，並沒有為現代 Web 開發人員帶來任何有趣的功能。現在是停止使用 jQuery 的好時機有幾個原因：

1. 現代瀏覽器和原生 JavaScript API 現在原生支援 jQuery 提供的所有功能，使其變得多餘，並且其實用功能已過時
2. 與本機實作相比，使用 jQuery 不必要地增加了 Web 應用程式套件的大小並降低了效能
3. jQuery 4 的發布證實了它的過時，缺乏重要的新功能，專注於生存，並強調原生 JavaScript 和現代框架已經超越了它。
4. jQuery 向 ES 模組的遷移以及 jQuery 4 中現代實踐的採用，對於 Web 開發人員來說並沒有增加任何新內容
5. 將 jQuery 與 React、Vue 和 Angular 等現代前端框架一起使用可能會與其架構和編碼建議發生衝突
6. 現代前端框架使用 polyfill 發出生產程式碼，因此開發人員無需使用 jQuery API 為舊版瀏覽器建立網頁

我們將更詳細地探討這些要點，並透過將其可用功能與本機 JavaScript Web API 進行比較，深入探討 jQuery v4 為何結束了長達十年的旅程。

v4之前的jQuery黃金時代

從前端 Web 開發開始，開發人員就使用 JavaScript 透過動態更新 HTML 元素來實現使用者友善的 Web 前端。

在 2000 年代初期，還沒有像 React 這樣功能齊全、基於組件的現代前端開發庫，瀏覽器也沒有提供動畫等高級 CSS 功能和高級、開發人員友好、功能齊全的 CSS 功能。 DOM 操作 API，因此開發人員必須使用現有的 Web API 編寫許多程式碼行來建立 Web 前端 - 他們甚至必須編寫程式碼來解決瀏覽器與 AJAX 通訊 API 的兼容性問題。

jQuery 透過提供 DOM 操作的速記函數和跨瀏覽器 AJAX API 解決了這些問題，因此每個 Web 開發人員都在他們的 Web 應用程式中包含了 jQuery 腳本。

正如今天每個人都推薦基於組件的前端框架一樣，jQuery 是 2000 年代中期創建動態 Web 前端最受推薦的方法，當時 jQuery 的使用在其衰落之前達到了頂峰：

官方 Bootstrap 3.4 網站使用來自官方 CDN 的 jQuery

2000 年代中期，jQuery v1 到 v3 用於：

• 每個流行的網站 HTML 模板，用於實現滑桿、圖片庫等
• 透過 Internet Explorer 支援進行 DOM 操作和進行 HTTP/AJAX 呼叫的 Web 應用
• Bootstrap 來實作模態框、下拉式選單等元件。
• 用於 DOM 操作的每個動態 WordPress 模板和外掛程式

隨著 v4 的發布，jQuery 的狀態

jQuery 於 2024 年 2 月發布了第一個測試版，並於 7 月發布了第二個測試版  —  程式碼庫維護人員計劃很快發布候選版本。 jQuery v4 版本有以下主要變化：

• 不再支援 IE 10 及更早版本的網頁瀏覽器
• 刪除了已棄用的方法，例如 jQuery.isArray()
• 支援使用透過 Trusted Types API 建立的 HTML 內容
• 支援在 AJAX 方法中使用原生 JavaScript 二進位資料
• jQuery 程式碼庫已透過 Rollup 捆綁程式從 AMD（requirejs 模組）遷移到 ES 模組

隨著 jQuery v4 beta 的發布，它嘗試透過使用 ES 模組來現代化其程式碼庫，並透過放棄 IE 10 支援來減少套件大小。您可以從這篇官方部落格文章中了解有關即將發布的 jQuery v4 版本的更多資訊。

為什麼 jQuery v4 證實了它的失敗

jQuery v4 beta 的發布確實並不是停止關注 jQuery 的原因，但 v4 版本所顯示的增長和未來證實了 jQuery 在現代 Web 技術中的衰落。當瀏覽器標準開始提供以開發人員生產力為中心的高級 DOM 操作功能和 CSS 中的高級功能（幫助開發人員在不使用 JavaScript 的情況下實現動態樣式）時，這種情況就慢慢開始了。

jQuery v1 到 v3 無疑實現了瀏覽器本身不提供的跨瀏覽器開發人員友好的功能。例如，jQuery 的 Sizzle 選擇器引擎可協助開發人員在瀏覽器實作 document.querySelectorAll() 之前查詢 DOM 元素。而且，由於內建 AJAX API 的瀏覽器相容性問題，$.ajax() 是先前開發人員的 fetch() 。

一個舊的 StackOverflow 答案，建議使用 jQuery 而不是舊的原生 Web API

在 jQuery v2 到 v3 期間，HTML、JavaScript、CSS 和 Web API 得到了大幅增強，並為 jQuery 功能提供了標準 API，從而使 jQuery 成為了過時的選擇。

jQuery 試圖透過遵守標準 API 來生存，例如在 v3 中支援標準 Promise 接口，並刪除重複程式碼，但標準的瀏覽器功能贏得了現代開發人員的心。 jQuery 發布的 v4 不是帶有功能，而是帶有增強功能，以保持與現代 Web 技術的相關性。

jQuery v4 為您帶來了 27kb gzip 壓縮包增量，用於您的 Web 瀏覽器本機附帶 0kb 客戶端 JavaScript 程式碼的功能！

jQuery 與本機瀏覽器 API

讓我們並排比較 jQuery 與本機瀏覽器 API 程式碼的幾個開發需求，看看現代 Web API 如何讓 jQuery 過時。

建立新的 HTML 檔案並透過官方 CDN 連結 jQuery v4 beta 版本，如下開始：

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

選擇 DOM 元素

現代前端程式庫和框架提供了用於存取 DOM 元素引用的 ref 概念，但是如果 Web 開發人員不依賴特定的前端框架，則通常必須查詢 DOM 元素。了解 document.querySelectorAll() 如何實作類似 jQuery 的簡單、原生 DOM 選擇：

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

結果：

使用 jQuery 和本機 Web API 透過 CSS 查詢選擇 DOM 元素

jQuery提供了closest()方法來遍歷並為給定的選擇器找到匹配的DOM節點。原生 DOM API 也使用 OOP 模式實作相同的方法：

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

結果：

使用 jQuery 和本機 Web API 選擇最接近的 DOM 元素

有些 jQuery 功能在現代標準 DOM API 中沒有相同的速記替代品，但我們可以透過現代 JavaScript 功能有效地使用現有的 DOM API 方法。

例如，jQuery 支援非標準的 :contains(text) 選擇器，因此我們必須使用 filter() 陣列方法來實現它，如下所示：

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

結果：

使用 jQuery 和本機 Web API 過濾包含特定文字段的元素

querySelectorAll() 方法利用現代 CSS 偽類的強大功能，為 jQuery find() 函數提供更好的本機替代方案。例如，我們可以使用 :scope 偽類別來限製本機查詢選擇器呼叫的範圍，類似於 jQuery find() 函數：

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

結果：

使用 jQuery 和本機 Web API 來決定 DOM 元素選擇器的範圍

檢索並更新 DOM 屬性

類別屬性、特定於元素的屬性和自訂資料屬性是 Web 開發人員在開發 Web 應用程式時經常需要檢索和更新的常見 HTML 屬性。

過去，開發人員必須手動操作原生 className 屬性來更新元素類別名稱，因此他們使用 jQuery 的 addClass()、removeClass() 和toggleClass() 預先開發的函數實作。但現在，原生 classList 物件實作了更好的類別屬性值處理支援：

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

結果：

使用 jQuery 和本機 Web API 更新類別屬性值

同時， getAttribute() 和 setAttribute() 原生 DOM 方法成為眾所周知的 jQuery attr() 簡寫函數的標準替代品：

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

結果：

使用 jQuery 和本機 Web API 變更和擷取 HTML 元素屬性

jQuery 建議開發人員使用其 attr() 函數來設定自訂資料屬性，但現在您可以使用內建的資料集屬性來更有效率地檢索/修改資料屬性，如下所示：

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

結果：

使用 jQuery 和本機 Web API 更新自訂資料屬性

DOM 元素操作

過去，大多數開發人員使用 jQuery 進行 DOM 操作，因為原生 DOM 操作 API 不提供以開發人員生產力為中心的功能。現在，每個現代標準 Web 瀏覽器都實現了高效、高級、內建的 DOM 操作支援。

建立和附加元素是 DOM 操作任務中最頻繁的操作。以下是使用 jQuery 和本機 Web API 完成此操作的方法：

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

結果：

使用 jQuery 和本機 Web API 來使用 before() 和 after() 函數

動畫 DOM 元素

如果您是一位十多年前構建Web 應用程式的經驗豐富的Web 開發人員，您就會知道jQuery fadeIn()、fadeOut() 和animate() 函數如何幫助您使Web 應用程式更具交互性。這些動畫函數甚至支援動畫緩動以建立更流暢的動畫。

原生 CSS 動畫/過渡和 JavaScript Web 動畫 API 讓 jQuery 動畫 API 過時。以下是如何使用標準 Web 動畫 API 實作 fadeIn()：

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

結果：

使用 jQuery 和本機 Web API 附加和刪除事件處理程序

jQuery 和原生 DOM API 都提供了附加事件監聽器的簡寫方法：

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

jQuery 也提供了 one() 函數來觸發事件處理程序一次 — 現在每個標準 Web 瀏覽器都支援用於相同目的的一次選項：

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

與網路服務通信

過去的整體式 Web 應用程式經常會向後端伺服器發送 HTTP 請求，以取得包含更新資料的新頁面  —  Web 應用程式會針對每個主要使用者操作呈現整個頁面。

後來，開發人員透過 AJAX 請求 HTML 內容來更新部分網頁，從而製作出了更好的互動式 Web 應用程式。由於內建 AJAX API 的瀏覽器相容性和生產力問題，他們使用 jQuery 發送 AJAX 請求。

現在開發人員可以使用標準的 fetch() 函數來取代 jQuery 的 AJAX 功能：

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

結果：

使用 jQuery 和本機 Web API 傳送 HTTP 請求

如今，大多數開發人員使用 RESTful API 將資料來源與表示層分開。 jQuery 提供了一種高效的速記函數，用於從 RESTful 服務獲取 JSON 數據，但本機 fetch() 提供了更好的標準方法：

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

結果：

使用 jQuery 和本機 Web API 從 RESTful Web 服務請求 JSON 資料

實用功能

jQuery 提供各種預先開發的實用函數來節省 Web 開發人員的時間。如今，我們可以找到 jQuery v4 中存在的所有這些預先開發的實用函數的內建 ECMAScript 功能，如下表所列：

jQuery	Native replacement
`$.each()`	`Array.forEach()`
`$.extend()`	`Object.assign() or the spread operator`
`$.inArray()`	`Array.includes()`
`$.map()`	`Array.map()`
`$.parseHTML()`	`document.implementation.createHTMLDocument()`
`$.isEmptyObject()`	`Object.keys()`
`$.merge()`	`Array.concat()`

像 $.parseJSON() 這樣的舊實用程式在過去的 jQuery 版本中已經被棄用，並在 v4 中被刪除。

我可以將 jQuery 與 Vue、React 或 Angular 一起使用嗎？

當現代應用程式開發前端程式庫不存在時，Web 開發人員使用 jQuery。他們主要使用 jQuery 的 DOM 操作和 AJAX 功能來動態更新前端，而無需刷新整個網頁。現在，現代前端框架/庫中的 SPA（單頁應用程式）開發技術讓 Web 開發人員可以構建高度交互、結構良好、輕量級的 Web 應用程序，而無需使用老式的基於 AJAX 的渲染技術。

我們可以像任何流行的前端庫/框架一樣將jQuery 與Vue、React 和Angular 一起使用，但不鼓勵將jQuery 與這些前端庫集成，因為它不會為現代前端開發生態系統帶來任何價值。

每個流行的前端函式庫都提供了 ref 概念來存取元件內的 DOM 元素引用，因此您不需要使用 jQuery 或 document.querySelector()。例如，您可以取得

的 DOM 元素參考。在Vue中如下：

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

結果：

使用 refs 存取 Vue 中的 DOM 元素引用

如下在 Vue 中使用 jQuery 確實是可能的，但它使用大約十年前引入的老式語法破壞了現代 Vue 源代碼，並破壞了現代前端庫應使用的預期方式：

從'jquery'導入$；

導出預設值{
 安裝（）{
   const elm = $('#elm');
   控制台.log(榆樹);
 }
}
腳本>


 <div>



<p>手動 DOM 操作很少發生在像 Vue 這樣的現代前端庫中。但是，如果您遇到這種情況，建議使用原生 Web API。 </p>

<h2>
  
  
  結論
</h2>

<p>jQuery 無疑是一個非凡的 JavaScript 程式庫，它引入了一種高效、開發人員友好的方法來使用 DOM 操作和 AJAX 技術建立 Web 應用程式前端。 jQuery 由於瀏覽器相容性問題以及本機 Web API 中缺乏以開發人員為中心的功能而受到歡迎。 W3C 和 ECMAScript 透過引進新的 Web API 和 JavaScript 語言功能解決了這些問題。 </p>

<p>Web API 的當前狀態為 jQuery 擁有的所有功能提供了更好、現代、開發人員友好的類別和函數，使得 jQuery 在現代 Web 中變得不必要。 </p>

<p>最近的 jQuery v4 beta 版本證實了這一點，其功能刪除和增強側重於維護而不是創新。由於跨瀏覽器本機 Web API 的可用性，V4 和其他 jQuery 版本很可能會刪除更多功能。 </p>
<p>即將推出的版本可能會終止對舊版瀏覽器的支持，因為大多數用戶傾向於使用最新的瀏覽器。我還認為jQuery 不會再次流行，因為目前的本機Web API 非常穩定且標準化良好，但使用依賴jQuery 的遺留Web 應用程式的開發人員將繼續使用它並將其專案升級到jQuery v4、v5 和很快。話雖如此，沒有人願意透過添加 jQuery 來增加 Web 應用程式套件的大小，以實現他們可以在任何流行的 Web 瀏覽器中輕鬆找到的開發功能！ </p>


<hr>

<h2>
  
  
  LogRocket：透過了解上下文更輕鬆地調試 JavaScript 錯誤
</h2>

<p>偵錯程式碼總是一項乏味的任務。但你越了解自己的錯誤，就越容易糾正它們。 </p>

<p>LogRocket 讓您以新的、獨特的方式理解這些錯誤。我們的前端監控解決方案追蹤使用者與 JavaScript 前端的互動，使您能夠準確查看使用者的操作導致了錯誤。 </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173087043468616.jpg" alt="Why jQuery s a good reminder to stop using jQuery"></p>

<p>LogRocket 記錄控制台日誌、頁面載入時間、堆疊追蹤、帶有標頭正文的慢速網路請求/回應、瀏覽器元資料和自訂日誌。了解 JavaScript 程式碼的影響從未如此簡單！ </p>

<p>免費試用。 </p>


          </div>

            
        

以上是為什麼 jQuery 是停止使用 jQuery 的一個很好的提醒的詳細內容。更多資訊請關注PHP中文網其他相關文章！