分析為什么會(huì)棄用jQuery

這篇文章主要介紹“分析為什么會(huì)棄用jQuery”，在日常操作中，相信很多人在分析為什么會(huì)棄用jQuery問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”分析為什么會(huì)棄用jQuery”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

早期，jQuery 對(duì)我們意義重大

GitHub.com 在 2007 年底開始使用 jQuery 1.2.1，那是谷歌發(fā)布 Chrome 瀏覽器的前一年。當(dāng)時(shí)還沒有通過 CSS 選擇器來查詢 DOM 元素的標(biāo)準(zhǔn)方法，也沒有動(dòng)態(tài)渲染元素的樣式的標(biāo)準(zhǔn)方法，而 Internet Explorer 的 XMLHttpRequest 接口與其他很多 API 一樣，在瀏覽器之間存在不一致性問題。

jQuery 讓 DOM 操作、創(chuàng)建動(dòng)畫和“AJAX”請(qǐng)求變得相當(dāng)簡(jiǎn)單，基本上，它讓 Web 開發(fā)人員能夠創(chuàng)建更加現(xiàn)代化的動(dòng)態(tài) Web 體驗(yàn)。最重要的是，使用 jQuery 為一個(gè)瀏覽器開發(fā)的代碼也適用于其他瀏覽器。在 GitHub 的早期階段，jQuery 讓小型的開發(fā)團(tuán)隊(duì)能夠快速進(jìn)行原型設(shè)計(jì)并開發(fā)出新功能，而無需專門針對(duì)每個(gè) Web 瀏覽器調(diào)整代碼。

基于 jQuery 簡(jiǎn)單的接口所構(gòu)建的擴(kuò)展庫也成為  GitHub.com  前端的基礎(chǔ)構(gòu)建塊：pjax（ https://github.com/defunkt/jquery-pjax ）和 facebox（ https://github.com/defunkt/facebox ）。

我們將永遠(yuǎn)不會(huì)忘記 John Resig 和 jQuery 貢獻(xiàn)者創(chuàng)建和維護(hù)的這樣一個(gè)有用的基本庫。

后來的 Web 標(biāo)準(zhǔn)

多年來，GitHub 成長(zhǎng)為一家擁有數(shù)百名工程師的公司，并逐漸成立了一個(gè)專門的團(tuán)隊(duì)，負(fù)責(zé) JavaScript 代碼的規(guī)模和質(zhì)量。我們一直在排除技術(shù)債務(wù)，有時(shí)技術(shù)債務(wù)會(huì)隨著依賴項(xiàng)的增多而增長(zhǎng)，這些依賴項(xiàng)在一開始會(huì)為我們帶來一定的價(jià)值，但這些價(jià)值也隨著時(shí)間的推移而下降。

我們可以將 jQuery 與現(xiàn)代瀏覽器支持的 Web 標(biāo)準(zhǔn)的快速演化進(jìn)行比較：

• [ ] $(selector) 模式可以使用 querySelectorAll() 來替換；

• [ ] 現(xiàn)在可以使用 Element.classList 來實(shí)現(xiàn) CSS 類名切換；

• [ ] CSS 現(xiàn)在支持在樣式表中而不是在 JavaScript 中定義可視動(dòng)畫；

• [ ] 現(xiàn)在可以使用 Fetch Standard 執(zhí)行 $.ajax 請(qǐng)求；

• [ ] addEventListener() 接口已經(jīng)足夠穩(wěn)定，可以跨平臺(tái)使用；

• [ ] 我們可以使用輕量級(jí)的庫來封裝事件委托模式；

• [ ] 隨著 JavaScript 語言的發(fā)展，jQuery 提供的一些語法糖已經(jīng)變得多余。

另外，鏈?zhǔn)秸Z法不能滿足我們想要的編寫代碼的方式。例如：

$('.js-widget')
  .addClass('is-loading')
  .show()

這種語法寫起來很簡(jiǎn)單，但是根據(jù)我們的標(biāo)準(zhǔn)，它并不能很好地傳達(dá)我們的意圖。作者是否期望在當(dāng)前頁面上有一個(gè)或多個(gè) js-widget 元素？另外，如果我們更新頁面標(biāo)記并意外遺漏了 js-widget 類名，瀏覽器是否會(huì)拋出異常會(huì)告訴我們出了什么問題？默認(rèn)情況下，當(dāng)沒有任何內(nèi)容與選擇器匹配時(shí)，jQuery 會(huì)跳過整個(gè)表達(dá)式，但對(duì)我們來說，這是一個(gè) bug。

最后，我們開始使用 Flow 來注解類型，以便在構(gòu)建時(shí)執(zhí)行靜態(tài)類型檢查，并且我們發(fā)現(xiàn)，鏈?zhǔn)秸Z法不適合做靜態(tài)分析，因?yàn)閹缀跛?jQuery 方法返回的結(jié)果都是相同的類型。我們當(dāng)時(shí)之所以選擇 Flow，是因?yàn)?@flow weak 模式等功能可以讓我們逐步將類型應(yīng)用于無類型的代碼庫上。

總而言之，移除 jQuery 意味著我們可以更多地依賴 Web 標(biāo)準(zhǔn)，讓 MDN Web 文檔成為前端開發(fā)人員事實(shí)上的默認(rèn)文檔，在將來可以維護(hù)更具彈性的代碼，并且可以將 30KB 的依賴從我們的捆綁包中移除，加快頁面的加載速度和 JavaScript 的執(zhí)行速度。

逐步解耦

雖然定下了最終目標(biāo)，但我們也知道，分配所有資源一次性移除 jQuery 是不可行的。這種匆匆忙忙的做法可能會(huì)導(dǎo)致網(wǎng)站功能出現(xiàn)回歸。相反，我們采取了以下的策略：

1. 設(shè)定指標(biāo)，跟蹤整一行代碼調(diào)用 jQuery 的比率，并監(jiān)控指標(biāo)走勢(shì)隨時(shí)間變化的情況，確保它保持不變或下降，而不是上升。

1. 我們不鼓勵(lì)在任何新代碼中導(dǎo)入 jQuery。為了方便自動(dòng)化，我們創(chuàng)建了 eslint-plugin-jquery（ https://github.com/dgraham/eslint-plugin-jquery ），如果有人試圖使用 jQuery 功能，例如 $.ajax，CI 檢查將會(huì)失敗。

2. 舊代碼中存在大量違反 eslint 規(guī)則的情況，我們?cè)诖a注釋中使用特定的 eslint-disable 規(guī)則進(jìn)行了注解?？吹竭@些代碼的讀者，他們都該知道，這些代碼不符合我們當(dāng)前的編碼實(shí)踐。

3. 我們創(chuàng)建了一個(gè)拉請(qǐng)求機(jī)器人，當(dāng)有人試圖添加新的 eslint-disable 規(guī)則時(shí)，會(huì)對(duì)拉取請(qǐng)求留下評(píng)論。這樣我們就可以盡早參與代碼評(píng)審，并提出替代方案。

4. 很多舊代碼使用了 pjax 和 facebox 插件，所以我們?cè)诒３炙鼈兊慕涌趲缀醪蛔兊耐瑫r(shí)，在內(nèi)部使用 JS 重新實(shí)現(xiàn)它們的邏輯。靜態(tài)類型檢查有助于提升我們進(jìn)行重構(gòu)的信心。

5. 很多舊代碼與 rails-behavior 發(fā)生交互，我們的 Ruby on Rails 適配器幾乎是“不顯眼的”JS，它們將 AJAX 生命周期處理器附加到某些表單上：

// 舊方法
  $(document).on('ajaxSuccess', 'form.js-widget', function(event, xhr, settings, data) {
    // 將響應(yīng)數(shù)據(jù)插入到 DOM 中
  })

1. 我們選擇觸發(fā)假的 ajax* 生命周期事件，并保持這些表單像以前一樣異步提交內(nèi)容，而不是立即重寫所有調(diào)用，只是會(huì)在內(nèi)部使用 fetch()。

2. 我們自己維護(hù)了 jQuery 的一個(gè)版本，每當(dāng)發(fā)現(xiàn)我們不再需要 jQuery 的某個(gè)模塊的時(shí)候，就會(huì)將它從自定義版本中刪除，并發(fā)布更輕量的版本。例如，在移除了 jQuery 的 CSS 偽選擇器之后（如:visible 或:checkbox）我們就可以移除 Sizzle 模塊了，當(dāng)所有的 $.ajax 調(diào)用都被 fetch() 替換時(shí)，就可以移除 AJAX 模塊。

這樣做有兩個(gè)目的：加快 JavaScript 執(zhí)行速度，同時(shí)確保不會(huì)有新代碼試圖使用已移除的功能。

1. 我們根據(jù)網(wǎng)站的分析結(jié)果盡快放棄對(duì)舊版本 Internet Explorer 的支持。每當(dāng)某個(gè) IE 版本的使用率低于某個(gè)閾值時(shí)，我們就會(huì)停止向它提供 JavaScript 支持，并專注支持更現(xiàn)代的瀏覽器。盡早放棄對(duì) IE 8 和 IE 9 的支持對(duì)于我們來說意味著可以采用很多原生的瀏覽器功能，否則的話有些功能很難通過 polyfill 來實(shí)現(xiàn)。

2. 作為 GitHub.com 前端功能開發(fā)新方法的一部分，我們專注于盡可能多地使用常規(guī) HTML，并且逐步添加 JavaScript 行為作為漸進(jìn)式增強(qiáng)。因此，那些使用 JS 增強(qiáng)的 Web 表單和其他 UI 元素通常也可以在禁用 JavaScript 的瀏覽器上正常運(yùn)行。在某些情況下，我們可以完全刪除某些遺留的代碼，而不需要使用 JS 重寫它們。

經(jīng)過多年的努力，我們逐漸減少對(duì) jQuery 的依賴，直到?jīng)]有一行代碼引用它為止。

自定義元素

近年來一直在炒作一項(xiàng)新技術(shù)，即自定義元素——瀏覽器原生的組件庫，這意味著用戶無需下載、解析和編譯額外的字節(jié)。

從 2014 年開始，我們已經(jīng)基于 v0 規(guī)范創(chuàng)建了一些自定義元素。然而，由于標(biāo)準(zhǔn)仍然在不斷變化，我們并沒有投入太多精力。直到 2017 年，Web Components v1 規(guī)范發(fā)布，并且 Chrome 和 Safari 實(shí)現(xiàn)了這一規(guī)范，我們才開始更廣泛地采用自定義元素。

在移除 jQuery 期間，我們也在尋找用于提取自定義元素的模式。例如，我們將用于顯示模態(tài)對(duì)話框的 facebox 轉(zhuǎn)換為<details-dialog>元素（ https://github.com/github/details-dialog-element ）。

我們的漸進(jìn)式增強(qiáng)理念也延伸到了自定義元素上。這意味著我們將盡可能多地保留標(biāo)記內(nèi)容，然后再標(biāo)記上添加行為。例如，<local-time>默認(rèn)顯示原始時(shí)間戳，它被升級(jí)成可以將時(shí)間轉(zhuǎn)換為本地時(shí)區(qū)，而對(duì)于<details-dialog>，當(dāng)它被嵌在 <details>元素中時(shí)，可以在不使用 JavaScript 的情況下具備交互性，它被升級(jí)成具有輔助增強(qiáng)功能。

以下是實(shí)現(xiàn)<local-time>自定義元素的示例：

// local-time 根據(jù)用戶的當(dāng)前時(shí)區(qū)顯示時(shí)間。
//
// 例如:
//   <local-time datetime="2018-09-06T08:22:49Z">Sep 6, 2018</local-time>
//
class LocalTimeElement extends HTMLElement {
  static get observedAttributes() {
    return ['datetime']
  }
  attributeChangedCallback(attrName, oldValue, newValue) {
    if (attrName === 'datetime') {
      const date = new Date(newValue)
      this.textContent = date.toLocaleString()
    }
  }
}
if (!window.customElements.get('local-time')) {
  window.LocalTimeElement = LocalTimeElement
  window.customElements.define('local-time', LocalTimeElement)

我們很期待 Web 組件的 Shadow DOM。Shadow DOM 的強(qiáng)大功能為 Web 帶來了很多可能性，但也讓 polyfill 變得更加困難。因?yàn)槭褂?polyfill 會(huì)導(dǎo)致性能損失，因此在生產(chǎn)環(huán)境中使用它們是不可行的。

到此，關(guān)于“分析為什么會(huì)棄用jQuery”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！