成人区人妻精品一区二区不卡网站 ,jαpαnesehd熟女熟妇伦

首頁

web前端

js教程

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

Barbara Streisand

Nov 06, 2024 pm 01:20 PM

作者：Shalitha Suranga??

jQuery 有著悠久且受人尊敬的歷史，然而，其新版本的 jQuery v4 beta 已經(jīng)發(fā)布，並沒有為現(xiàn)代 Web 開發(fā)人員帶來任何有趣的功能?，F(xiàn)在是停止使用 jQuery 的好時(shí)機(jī)有幾個(gè)原因：

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

我們將更詳細(xì)地探討這些要點(diǎn)，並透過將其可用功能與本機(jī) JavaScript Web API 進(jìn)行比較，深入探討 jQuery v4 為何結(jié)束了長達(dá)十年的旅程。

v4之前的jQuery黃金時(shí)代

從前端 Web 開發(fā)開始，開發(fā)人員就使用 JavaScript 透過動(dòng)態(tài)更新 HTML 元素來實(shí)現(xiàn)使用者友善的 Web 前端。

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

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

正如今天每個(gè)人都推薦基於組件的前端框架一樣，jQuery 是 2000 年代中期創(chuàng)建動(dòng)態(tài) Web 前端最受推薦的方法，當(dāng)時(shí) jQuery 的使用在其衰落之前達(dá)到了頂峰：
Why jQuery s a good reminder to stop using jQuery
官方 Bootstrap 3.4 網(wǎng)站使用來自官方 CDN 的 jQuery

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

每個(gè)流行的網(wǎng)站 HTML 模板，用於實(shí)現(xiàn)滑桿、圖片庫等
透過 Internet Explorer 支援進(jìn)行 DOM 操作和進(jìn)行 HTTP/AJAX 呼叫的 Web 應(yīng)用
Bootstrap 來實(shí)作模態(tài)框、下拉式選單等元件。
用於 DOM 操作的每個(gè)動(dòng)態(tài) WordPress 模板和外掛程式

隨著 v4 的發(fā)布，jQuery 的狀態(tài)

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

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

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

為什麼 jQuery v4 證實(shí)了它的失敗

jQuery v4 beta 的發(fā)布確實(shí)並不是停止關(guān)注 jQuery 的原因，但 v4 版本所顯示的增長和未來證實(shí)了 jQuery 在現(xiàn)代 Web 技術(shù)中的衰落。當(dāng)瀏覽器標(biāo)準(zhǔn)開始提供以開發(fā)人員生產(chǎn)力為中心的高級 DOM 操作功能和 CSS 中的高級功能（幫助開發(fā)人員在不使用 JavaScript 的情況下實(shí)現(xiàn)動(dòng)態(tài)樣式）時(shí)，這種情況就慢慢開始了。

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

Why jQuery s a good reminder to stop using jQuery
一個(gè)舊的 StackOverflow 答案，建議使用 jQuery 而不是舊的原生 Web API

在 jQuery v2 到 v3 期間，HTML、JavaScript、CSS 和 Web API 得到了大幅增強(qiáng)，並為 jQuery 功能提供了標(biāo)準(zhǔn) API，從而使 jQuery 成為了過時(shí)的選擇。

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

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

jQuery 與本機(jī)瀏覽器 API

讓我們並排比較 jQuery 與本機(jī)瀏覽器 API 程式碼的幾個(gè)開發(fā)需求，看看現(xiàn)代 Web API 如何讓 jQuery 過時(shí)。

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

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

選擇 DOM 元素

現(xiàn)代前端程式庫和框架提供了用於存取 DOM 元素引用的 ref 概念，但是如果 Web 開發(fā)人員不依賴特定的前端框架，則通常必須查詢 DOM 元素。了解 document.querySelectorAll() 如何實(shí)作類似 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);

結(jié)果：

Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 透過 CSS 查詢選擇 DOM 元素

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

// 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')));

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 選擇最接近的 DOM 元素

有些 jQuery 功能在現(xiàn)代標(biāo)準(zhǔn) DOM API 中沒有相同的速記替代品，但我們可以透過現(xiàn)代 JavaScript 功能有效地使用現(xiàn)有的 DOM API 方法。

例如，jQuery 支援非標(biāo)準(zhǔn)的 :contains(text) 選擇器，因此我們必須使用 filter() 陣列方法來實(shí)現(xiàn)它，如下所示：

// 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')));

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 過濾包含特定文字段的元素

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

<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);

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 來決定 DOM 元素選擇器的範(fàn)圍

檢索並更新 DOM 屬性

類別屬性、特定於元素的屬性和自訂資料屬性是 Web 開發(fā)人員在開發(fā) Web 應(yīng)用程式時(shí)經(jīng)常需要檢索和更新的常見 HTML 屬性。

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

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

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 更新類別屬性值

同時(shí)， getAttribute() 和 setAttribute() 原生 DOM 方法成為眾所周知的 jQuery attr() 簡寫函數(shù)的標(biāo)準(zhǔn)替代品：

<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);

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 變更和擷取 HTML 元素屬性

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

// 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')));

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 更新自訂資料屬性

DOM 元素操作

過去，大多數(shù)開發(fā)人員使用 jQuery 進(jìn)行 DOM 操作，因?yàn)樵?DOM 操作 API 不提供以開發(fā)人員生產(chǎn)力為中心的功能。現(xiàn)在，每個(gè)現(xiàn)代標(biāo)準(zhǔn) Web 瀏覽器都實(shí)現(xiàn)了高效、高級、內(nèi)建的 DOM 操作支援。

建立和附加元素是 DOM 操作任務(wù)中最頻繁的操作。以下是使用 jQuery 和本機(jī) 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')));

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 來使用 before() 和 after() 函數(shù)

動(dòng)畫 DOM 元素

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

原生 CSS 動(dòng)畫/過渡和 JavaScript Web 動(dòng)畫 API 讓 jQuery 動(dòng)畫 API 過時(shí)。以下是如何使用標(biāo)準(zhǔn) Web 動(dòng)畫 API 實(shí)作 fadeIn()：

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

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 附加和刪除事件處理程序

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

<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() 函數(shù)來觸發(fā)事件處理程序一次?—?現(xiàn)在每個(gè)標(biāo)準(zhǔn) Web 瀏覽器都支援用於相同目的的一次選項(xiàng)：

// 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')));

與網(wǎng)路服務(wù)通信

過去的整體式 Web 應(yīng)用程式經(jīng)常會(huì)向後端伺服器發(fā)送 HTTP 請求，以取得包含更新資料的新頁面? —? Web 應(yīng)用程式會(huì)針對每個(gè)主要使用者操作呈現(xiàn)整個(gè)頁面。

後來，開發(fā)人員透過 AJAX 請求 HTML 內(nèi)容來更新部分網(wǎng)頁，從而製作出了更好的互動(dòng)式 Web 應(yīng)用程式。由於內(nèi)建 AJAX API 的瀏覽器相容性和生產(chǎn)力問題，他們使用 jQuery 發(fā)送 AJAX 請求。

現(xiàn)在開發(fā)人員可以使用標(biāo)準(zhǔn)的 fetch() 函數(shù)來取代 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')));

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 傳送 HTTP 請求

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

<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);

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 jQuery 和本機(jī) Web API 從 RESTful Web 服務(wù)請求 JSON 資料

實(shí)用功能

jQuery 提供各種預(yù)先開發(fā)的實(shí)用函數(shù)來節(jié)省 Web 開發(fā)人員的時(shí)間。如今，我們可以找到 jQuery v4 中存在的所有這些預(yù)先開發(fā)的實(shí)用函數(shù)的內(nèi)建 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() 這樣的舊實(shí)用程式在過去的 jQuery 版本中已經(jīng)被棄用，並在 v4 中被刪除。

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

當(dāng)現(xiàn)代應(yīng)用程式開發(fā)前端程式庫不存在時(shí)，Web 開發(fā)人員使用 jQuery。他們主要使用 jQuery 的 DOM 操作和 AJAX 功能來動(dòng)態(tài)更新前端，而無需刷新整個(gè)網(wǎng)頁。現(xiàn)在，現(xiàn)代前端框架/庫中的 SPA（單頁應(yīng)用程式）開發(fā)技術(shù)讓 Web 開發(fā)人員可以構(gòu)建高度交互、結(jié)構(gòu)良好、輕量級的 Web 應(yīng)用程序，而無需使用老式的基於 AJAX 的渲染技術(shù)。

我們可以像任何流行的前端庫/框架一樣將jQuery 與Vue、React 和Angular 一起使用，但不鼓勵(lì)將jQuery 與這些前端庫集成，因?yàn)樗粫?huì)為現(xiàn)代前端開發(fā)生態(tài)系統(tǒng)帶來任何價(jià)值。

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

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

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

結(jié)果：
Why jQuery s a good reminder to stop using jQuery
使用 refs 存取 Vue 中的 DOM 元素引用

如下在 Vue 中使用 jQuery 確實(shí)是可能的，但它使用大約十年前引入的老式語法破壞了現(xiàn)代 Vue 源代碼，並破壞了現(xiàn)代前端庫應(yīng)使用的預(yù)期方式：

從'jquery'導(dǎo)入$；

導(dǎo)出預(yù)設(shè)值{
 安裝（）{
   const elm = $('#elm');
   控制臺(tái).log(榆樹);
 }
}
腳本>


 <div>



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

<h2>
  
  
  結(jié)論
</h2>

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

<p>Web API 的當(dāng)前狀態(tài)為 jQuery 擁有的所有功能提供了更好、現(xiàn)代、開發(fā)人員友好的類別和函數(shù)，使得 jQuery 在現(xiàn)代 Web 中變得不必要。 </p>

<p>最近的 jQuery v4 beta 版本證實(shí)了這一點(diǎn)，其功能刪除和增強(qiáng)側(cè)重於維護(hù)而不是創(chuàng)新。由於跨瀏覽器本機(jī) Web API 的可用性，V4 和其他 jQuery 版本很可能會(huì)刪除更多功能。 </p>
<p>即將推出的版本可能會(huì)終止對舊版瀏覽器的支持，因?yàn)榇蠖鄶?shù)用戶傾向於使用最新的瀏覽器。我還認(rèn)為jQuery 不會(huì)再次流行，因?yàn)槟壳暗谋緳C(jī)Web API 非常穩(wěn)定且標(biāo)準(zhǔn)化良好，但使用依賴jQuery 的遺留Web 應(yīng)用程式的開發(fā)人員將繼續(xù)使用它並將其專案升級到j(luò)Query v4、v5 和很快。話雖如此，沒有人願(yuàn)意透過添加 jQuery 來增加 Web 應(yīng)用程式套件的大小，以實(shí)現(xiàn)他們可以在任何流行的 Web 瀏覽器中輕鬆找到的開發(fā)功能！ </p>


<hr>

<h2>
  
  
  LogRocket：透過了解上下文更輕鬆地調(diào)試 JavaScript 錯(cuò)誤
</h2>

<p>偵錯(cuò)程式碼總是一項(xiàng)乏味的任務(wù)。但你越了解自己的錯(cuò)誤，就越容易糾正它們。 </p>

<p>LogRocket 讓您以新的、獨(dú)特的方式理解這些錯(cuò)誤。我們的前端監(jiān)控解決方案追蹤使用者與 JavaScript 前端的互動(dòng)，使您能夠準(zhǔn)確查看使用者的操作導(dǎo)致了錯(cuò)誤。 </p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173087043468616.jpg" class="lazy" alt="Why jQuery s a good reminder to stop using jQuery"></p>

<p>LogRocket 記錄控制臺(tái)日誌、頁面載入時(shí)間、堆疊追蹤、帶有標(biāo)頭正文的慢速網(wǎng)路請求/回應(yīng)、瀏覽器元資料和自訂日誌。了解 JavaScript 程式碼的影響從未如此簡單！ </p>

<p>免費(fèi)試用。 </p>


          </div>

以上是為什麼 jQuery 是停止使用 jQuery 的一個(gè)很好的提醒的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡(luò)admin@php.cn