者 | GitHub 前端工程團(tuán)隊

譯者 | 無明

編輯 | 覃云 - 前端之巔

最近，我們將 jQuery 完全從 GitHub.com 的前端代碼中移除了，這標(biāo)志著我們數(shù)年來逐步移除 jQuery 這個漸進(jìn)式的過程終于結(jié)束了，這對我們來說是一件里程碑式的事件。這篇文章將介紹過去我們是如何依賴上 jQuery 的，隨著時間地推移，我們意識到不再需要它，但到最后我們并沒有使用另一個庫或框架取代它，而是使用標(biāo)準(zhǔn)的瀏覽器 API 實現(xiàn)了我們所需要的一切。

早期，jQuery 對我們意義重大

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

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

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

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

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

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

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

• $(selector) 模式可以使用 querySelectorAll() 來替換；
• 現(xiàn)在可以使用 Element.classList 來實現(xiàn) CSS 類名切換；
• CSS 現(xiàn)在支持在樣式表中而不是在 JavaScript 中定義可視動畫；
• 現(xiàn)在可以使用 Fetch Standard 執(zhí)行 $.ajax 請求；
• addEventListener() 接口已經(jīng)足夠穩(wěn)定，可以跨平臺使用；
• 我們可以使用輕量級的庫來封裝事件委托模式；
• 隨著 JavaScript 語言的發(fā)展，jQuery 提供的一些語法糖已經(jīng)變得多余。

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

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

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

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

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

逐步解耦

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

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

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

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

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

5. 很多舊代碼使用了 pjax 和 facebox 插件，所以我們在保持它們的接口幾乎不變的同時，在內(nèi)部使用 JS 重新實現(xiàn)它們的邏輯。靜態(tài)類型檢查有助于提升我們進(jìn)行重構(gòu)的信心。

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

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

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

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

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

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

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

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

自定義元素

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

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

在移除 jQuery 期間，我們也在尋找用于提取自定義元素的模式。例如，我們將用于顯示模態(tài)對話框的 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)顯示原始時間戳，它被升級成可以將時間轉(zhuǎn)換為本地時區(qū)，而對于<details-dialog>，當(dāng)它被嵌在 <details>元素中時，可以在不使用 JavaScript 的情況下具備交互性，它被升級成具有輔助增強(qiáng)功能。

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

// local-time 根據(jù)用戶的當(dāng)前時區(qū)顯示時間。
//
// 例如:
// <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 變得更加困難。因為使用 polyfill 會導(dǎo)致性能損失，因此在生產(chǎn)環(huán)境中使用它們是不可行的。

英文原文

https://githubengineering.com/removing-jquery-from-github-frontend/

法： $.ajax([settings]);

1. 
   
2. $.ajax({
3. type: "POST",
4. url: "UserLogincheck",
5. data: {username:$("#username").val(), password:$("#password").val(),verify:$("#verify").val()},
6. dataType: "json",
7. success: function(data){
8. if(data==1){
9. // 用戶名或密碼錯誤
10. alert("用戶名或密碼錯誤");
11. }
12. else if(data==2){
13. alert("驗證碼錯誤");
14. // 驗證碼錯誤
15. }
16. else if(data==0){
17. window.location.href="index";
18. }
19. //跳轉(zhuǎn)頁面
20. },
21. error:function(XMLHttpRequest, textStatus, errorThrown){//請求失敗時調(diào)用此函數(shù)
22. console.log(XMLHttpRequest.status);
23. console.log(XMLHttpRequest.readyState);
24. console.log(textStatus);
25. }
26. });

php作為后臺的處理過程

1. 
   
2. public function UserLogincheck(){//用戶登陸驗證(用戶名和郵箱均可登陸)
3. $very=new \Think\Verify();
4. if($very->check($_POST['verify'])){//驗證碼正確
5. $user_admin=I('post.username');
6. $judge=" (user_name='$user_admin' or user_email='$user_admin' )";
7. $user_del_status=$this->user->where($judge)->getField('user_del');
8. if($user_del_status==0){//用戶未被注銷
9. $user_password=I('post.password');
10. $judge .="and user_password='$user_password'";
11. $res=$this->user->where($judge)->find();
12. if($res){//記錄用戶登陸狀態(tài)
13. $_SESSION['ADMIN_user_id']=$this->user->where($judge)->getField('user_id');
14. $_SESSION['ADMIN_user_name']=$data['user_name'];
15. $this->ajaxReturn(0);//登陸成功
16. }
17. $this->ajaxReturn(1);//用戶名或密碼錯誤
18. }
19. else
20. $this->ajaxReturn(8);//用戶信息被注銷
21. }
22. else
23. $this->ajaxReturn(2);//驗證碼錯誤
24. }

ajax參數(shù)詳解：

data

類型：String

發(fā)送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組，jQuery 將自動為不同值對應(yīng)同一個名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。

dataFilter

類型：Function

給 Ajax 返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)。提供 data 和 type 兩個參數(shù)：data 是 Ajax 返回的原始數(shù)據(jù)，type 是調(diào)用 jQuery.ajax 時提供的 dataType 參數(shù)。函數(shù)返回的值將由 jQuery 進(jìn)一步處理。

dataType

類型：String

預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷，比如 XML MIME 類型就被識別為 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執(zhí)行這個腳本。隨后服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調(diào)函數(shù)?？捎弥?

"xml": 返回 XML 文檔，可用 jQuery 處理。

"html": 返回純文本 HTML 信息；包含的 script 標(biāo)簽會在插入 dom 時執(zhí)行。

"script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。除非設(shè)置了 "cache" 參數(shù)。注意：在遠(yuǎn)程請求時(不在同一個域下)，所有 POST 請求都將轉(zhuǎn)為 GET 請求。（因為將使用 DOM 的 script標(biāo)簽來加載）

"json": 返回 JSON 數(shù)據(jù) 。

"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。

"text": 返回純文本字符串

error

類型：Function

默認(rèn)值: 自動判斷 (xml 或 html)。請求失敗時調(diào)用此函數(shù)。

有以下三個參數(shù)：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。

如果發(fā)生了錯誤，錯誤信息（第二個參數(shù)）除了得到 null 之外，還可能是 "timeout", "error", "notmodified" 和 "parsererror"。

這是一個 Ajax 事件。

global

類型：Boolean

是否觸發(fā)全局 AJAX 事件。默認(rèn)值: true。設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

ifModified

類型：Boolean

僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。默認(rèn)值: false。使用 HTTP 包 Last-Modified 頭信息判斷。在 jQuery 1.4 中，它也會檢查服務(wù)器指定的 'etag' 來確定數(shù)據(jù)沒有被修改過。

jsonp

類型：String

在一個 jsonp 請求中重寫回調(diào)函數(shù)的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數(shù)里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 會導(dǎo)致將 "onJsonPLoad=?" 傳給服務(wù)器。

jsonpCallback

類型：String

為 jsonp 請求指定一個回調(diào)函數(shù)名。這個值將用來取代 jQuery 自動生成的隨機(jī)函數(shù)名。這主要用來讓 jQuery 生成度獨特的函數(shù)名，這樣管理請求更容易，也能方便地提供回調(diào)函數(shù)和錯誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時候，指定這個回調(diào)函數(shù)名。

password

類型：String

用于響應(yīng) HTTP 訪問認(rèn)證請求的密碼

processData

類型：Boolean

默認(rèn)值: true。默認(rèn)情況下，通過data選項傳遞進(jìn)來的數(shù)據(jù)，如果是一個對象(技術(shù)上講只要不是字符串)，都會處理轉(zhuǎn)化成一個查詢字符串，以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息，請設(shè)置為 false。

scriptCharset

類型：String

只有當(dāng)請求時 dataType 為 "jsonp" 或 "script"，并且 type 是 "GET" 才會用于強(qiáng)制修改 charset。通常只在本地和遠(yuǎn)程的內(nèi)容編碼不同時使用。

success

類型：Function

請求成功后的回調(diào)函數(shù)。

參數(shù)：由服務(wù)器返回，并根據(jù) dataType 參數(shù)進(jìn)行處理后的數(shù)據(jù)；描述狀態(tài)的字符串。

這是一個 Ajax 事件。

traditional

類型：Boolean

如果你想要用傳統(tǒng)的方式來序列化數(shù)據(jù)，那么就設(shè)置為 true。請參考工具分類下面的 jQuery.param 方法。

timeout

類型：Number

設(shè)置請求超時時間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。

type

類型：String

默認(rèn)值: "GET")。請求方式 ("POST" 或 "GET")， 默認(rèn)為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。

url

類型：String

默認(rèn)值: 當(dāng)前頁地址。發(fā)送請求的地址。

username

類型：String

用于響應(yīng) HTTP 訪問認(rèn)證請求的用戶名。

xhr

類型：Function

需要返回一個 XMLHttpRequest 對象。默認(rèn)在 IE 下是 ActiveXObject 而其他情況下是 XMLHttpRequest 。用于重寫或者提供一個增強(qiáng)的 XMLHttpRequest 對象。這個參數(shù)在 jQuery 1.3 以前不可用。