首頁 > web前端 > js教程 > 主體

github不用jq用什麼

(*-*)浩
發布: 2019-05-29 10:45:05
原創
2156 人瀏覽過

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

github不用jq用什麼

早期,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 轉換為元素(https://github.com/github/details-dialog-element)。

我們的漸進式增強理念也延伸到了自訂元素上。這意味著我們將盡可能保留標記內容,然後再標記上新增行為。例如,預設顯示原始時間戳,它被升級成可以將時間轉換為本地時區,而對於,當它被嵌在

元素中時,可以在不使用JavaScript 的情況下具備互動性,它被升級成具有輔助增強功能。

以上是github不用jq用什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板