GitHub.com 在 2007 年底開(kāi)始使用 jQuery 1.2.1，那是谷歌發(fā)布 Chrome 瀏覽器的前一年。當時(shí)還沒(méi)有通過(guò) CSS 選擇器來(lái)查詢(xún) DOM 元素的標準方法，也沒(méi)有動(dòng)態(tài)渲染元素的樣式的標準方法，而 Internet Explorer 的 XMLHttpRequest 接口與其他很多 API 一樣，在瀏覽器之間存在不一致性問(wèn)題。
jQuery 讓 DOM 操作、創(chuàng )建動(dòng)畫(huà)和“AJAX”請求變得相當簡(jiǎn)單，基本上，它讓 Web 開(kāi)發(fā)人員能夠創(chuàng )建更加現代化的動(dòng)態(tài) Web 體驗。最重要的是，使用 jQuery 為一個(gè)瀏覽器開(kāi)發(fā)的代碼也適用于其他瀏覽器。在 GitHub 的早期階段，jQuery 讓小型的開(kāi)發(fā)團隊能夠快速進(jìn)行原型設計并開(kāi)發(fā)出新功能，而無(wú)需專(zhuān)門(mén)針對每個(gè) Web 瀏覽器調整代碼。
基于 jQuery 簡(jiǎn)單的接口所構建的擴展庫也成為 GitHub.com 前端的基礎構建塊：pjax（https://github.com/defunkt/jquery-pjax）和 facebox（https://github.com/defunkt/facebox）。
我們將永遠不會(huì )忘記 John Resig 和 jQuery 貢獻者創(chuàng )建和維護的這樣一個(gè)有用的基本庫。
多年來(lái)，GitHub 成長(cháng)為一家擁有數百名工程師的公司，并逐漸成立了一個(gè)專(zhuān)門(mén)的團隊，負責 JavaScript 代碼的規模和質(zhì)量。我們一直在排除技術(shù)債務(wù)，有時(shí)技術(shù)債務(wù)會(huì )隨著(zhù)依賴(lài)項的增多而增長(cháng)，這些依賴(lài)項在一開(kāi)始會(huì )為我們帶來(lái)一定的價(jià)值，但這些價(jià)值也隨著(zhù)時(shí)間的推移而下降。
我們可以將 jQuery 與現代瀏覽器支持的 Web 標準的快速演化進(jìn)行比較：
$(selector) 模式可以使用 querySelectorAll() 來(lái)替換；
現在可以使用 Element.classList 來(lái)實(shí)現 CSS 類(lèi)名切換；
CSS 現在支持在樣式表中而不是在 JavaScript 中定義可視動(dòng)畫(huà)；
現在可以使用 Fetch Standard 執行 $.ajax 請求；
addEventListener() 接口已經(jīng)足夠穩定，可以跨平臺使用；
我們可以使用輕量級的庫來(lái)封裝事件委托模式；
隨著(zhù) JavaScript 語(yǔ)言的發(fā)展，jQuery 提供的一些語(yǔ)法糖已經(jīng)變得多余。
另外，鏈式語(yǔ)法不能滿(mǎn)足我們想要的編寫(xiě)代碼的方式。例如：
$('.js-widget') .addClass('is-loading') .show()這種語(yǔ)法寫(xiě)起來(lái)很簡(jiǎn)單，但是根據我們的標準，它并不能很好地傳達我們的意圖。作者是否期望在當前頁(yè)面上有一個(gè)或多個(gè) js-widget 元素？另外，如果我們更新頁(yè)面標記并意外遺漏了 js-widget 類(lèi)名，瀏覽器是否會(huì )拋出異常會(huì )告訴我們出了什么問(wèn)題？默認情況下，當沒(méi)有任何內容與選擇器匹配時(shí)，jQuery 會(huì )跳過(guò)整個(gè)表達式，但對我們來(lái)說(shuō)，這是一個(gè) bug。
最后，我們開(kāi)始使用 Flow 來(lái)注解類(lèi)型，以便在構建時(shí)執行靜態(tài)類(lèi)型檢查，并且我們發(fā)現，鏈式語(yǔ)法不適合做靜態(tài)分析，因為幾乎所有 jQuery 方法返回的結果都是相同的類(lèi)型。我們當時(shí)之所以選擇 Flow，是因為 @flow weak 模式等功能可以讓我們逐步將類(lèi)型應用于無(wú)類(lèi)型的代碼庫上。
總而言之，移除 jQuery 意味著(zhù)我們可以更多地依賴(lài) Web 標準，讓 MDN Web 文檔成為前端開(kāi)發(fā)人員事實(shí)上的默認文檔，在將來(lái)可以維護更具彈性的代碼，并且可以將 30KB 的依賴(lài)從我們的捆綁包中移除，加快頁(yè)面的加載速度和 JavaScript 的執行速度。
雖然定下了最終目標，但我們也知道，分配所有資源一次性移除 jQuery 是不可行的。這種匆匆忙忙的做法可能會(huì )導致網(wǎng)站功能出現回歸。相反，我們采取了以下的策略：
1. 設定指標，跟蹤整一行代碼調用 jQuery 的比率，并監控指標走勢隨時(shí)間變化的情況，確保它保持不變或下降，而不是上升。
2. 我們不鼓勵在任何新代碼中導入 jQuery。為了方便自動(dòng)化，我們創(chuàng )建了 eslint-plugin-jquery（https://github.com/dgraham/eslint-plugin-jquery），如果有人試圖使用 jQuery 功能，例如 $.ajax，CI 檢查將會(huì )失敗。
3. 舊代碼中存在大量違反 eslint 規則的情況，我們在代碼注釋中使用特定的 eslint-disable 規則進(jìn)行了注解?？吹竭@些代碼的讀者，他們都該知道，這些代碼不符合我們當前的編碼實(shí)踐。
4. 我們創(chuàng )建了一個(gè)拉請求機器人，當有人試圖添加新的 eslint-disable 規則時(shí)，會(huì )對拉取請求留下評論。這樣我們就可以盡早參與代碼評審，并提出替代方案。
5. 很多舊代碼使用了 pjax 和 facebox 插件，所以我們在保持它們的接口幾乎不變的同時(shí)，在內部使用 JS 重新實(shí)現它們的邏輯。靜態(tài)類(lèi)型檢查有助于提升我們進(jìn)行重構的信心。
6. 很多舊代碼與 rails-behavior 發(fā)生交互，我們的 Ruby on Rails 適配器幾乎是“不顯眼的”JS，它們將 AJAX 生命周期處理器附加到某些表單上：
// 舊方法 $(document).on('ajaxSuccess', 'form.js-widget', function(event, xhr, settings, data) { // 將響應數據插入到 DOM 中 })7. 我們選擇觸發(fā)假的 ajax* 生命周期事件，并保持這些表單像以前一樣異步提交內容，而不是立即重寫(xiě)所有調用，只是會(huì )在內部使用 fetch()。
8. 我們自己維護了 jQuery 的一個(gè)版本，每當發(fā)現我們不再需要 jQuery 的某個(gè)模塊的時(shí)候，就會(huì )將它從自定義版本中刪除，并發(fā)布更輕量的版本。例如，在移除了 jQuery 的 CSS 偽選擇器之后（如:visible 或:checkbox）我們就可以移除 Sizzle 模塊了，當所有的 $.ajax 調用都被 fetch() 替換時(shí)，就可以移除 AJAX 模塊。
這樣做有兩個(gè)目的：加快 JavaScript 執行速度，同時(shí)確保不會(huì )有新代碼試圖使用已移除的功能。
9. 我們根據網(wǎng)站的分析結果盡快放棄對舊版本 Internet Explorer 的支持。每當某個(gè) IE 版本的使用率低于某個(gè)閾值時(shí)，我們就會(huì )停止向它提供 JavaScript 支持，并專(zhuān)注支持更現代的瀏覽器。盡早放棄對 IE 8 和 IE 9 的支持對于我們來(lái)說(shuō)意味著(zhù)可以采用很多原生的瀏覽器功能，否則的話(huà)有些功能很難通過(guò) polyfill 來(lái)實(shí)現。
10. 作為 GitHub.com 前端功能開(kāi)發(fā)新方法的一部分，我們專(zhuān)注于盡可能多地使用常規 HTML，并且逐步添加 JavaScript 行為作為漸進(jìn)式增強。因此，那些使用 JS 增強的 Web 表單和其他 UI 元素通常也可以在禁用 JavaScript 的瀏覽器上正常運行。在某些情況下，我們可以完全刪除某些遺留的代碼，而不需要使用 JS 重寫(xiě)它們。
經(jīng)過(guò)多年的努力，我們逐漸減少對 jQuery 的依賴(lài)，直到?jīng)]有一行代碼引用它為止。
近年來(lái)一直在炒作一項新技術(shù)，即自定義元素——瀏覽器原生的組件庫，這意味著(zhù)用戶(hù)無(wú)需下載、解析和編譯額外的字節。
從 2014 年開(kāi)始，我們已經(jīng)基于 v0 規范創(chuàng )建了一些自定義元素。然而，由于標準仍然在不斷變化，我們并沒(méi)有投入太多精力。直到 2017 年，Web Components v1 規范發(fā)布，并且 Chrome 和 Safari 實(shí)現了這一規范，我們才開(kāi)始更廣泛地采用自定義元素。
在移除 jQuery 期間，我們也在尋找用于提取自定義元素的模式。例如，我們將用于顯示模態(tài)對話(huà)框的 facebox 轉換為 我們的漸進(jìn)式增強理念也延伸到了自定義元素上。這意味著(zhù)我們將盡可能多地保留標記內容，然后再標記上添加行為。例如， 以下是實(shí)現 我們很期待 Web 組件的 Shadow DOM。Shadow DOM 的強大功能為 Web 帶來(lái)了很多可能性，但也讓 polyfill 變得更加困難。因為使用 polyfill 會(huì )導致性能損失，因此在生產(chǎn)環(huán)境中使用它們是不可行的。 https://githubengineering.com/removing-jquery-from-github-frontend/元素中時(shí)，可以在不使用 JavaScript 的情況下具備交互性，它被升級成具有輔助增強功能。// local-time 根據用戶(hù)的當前時(shí)區顯示時(shí)間。//// 例如://
聯(lián)系客服
