關于jQuery的簡介及發展分析

這篇文章將為大家詳細講解有關關于jQuery的簡介及發展分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

早期，jQuery 對我們意義重大

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

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

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

我們將永遠不會忘記 John Resig 和 jQuery 貢獻者創建和維護的這樣一個有用的基本庫。

后來的 Web 標準

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

我們可以將 jQuery 與現代瀏覽器支持的 Web 標準的快速演化進行比較：

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

現在可以使用 Element.classList 來實現 CSS 類名切換；

CSS 現在支持在樣式表中而不是在 JavaScript 中定義可視動畫；

現在可以使用 Fetch Standard 執行 $.ajax 請求；

addEventListener() 接口已經足夠穩定，可以跨平臺使用；

我們可以使用輕量級的庫來封裝事件委托模式；

隨著 JavaScript 語言的發展，jQuery 提供的一些語法糖已經變得多余。

另外，鏈式語法不能滿足我們想要的編寫代碼的方式。

最后，我們開始使用 Flow 來注解類型，以便在構建時執行靜態類型檢查，并且我們發現，鏈式語法不適合做靜態分析，因為幾乎所有 jQuery 方法返回的結果都是相同的類型。我們當時之所以選擇 Flow，是因為 @flow weak 模式等功能可以讓我們逐步將類型應用于無類型的代碼庫上。

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

自定義元素

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

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

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

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

關于關于jQuery的簡介及發展分析就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。