當前位置: 妍妍網 > 碼農

jQuery 老矣,尚能飯否?

2024-02-14碼農

近日,jQuery 官方釋出了 v4.0 測試版,標誌著這個曾經盛極一時的 JavaScript 框架正迎來全新的發展階段。 盡管新框架和庫不斷湧現,jQuery 依然憑借其深厚的積累與廣泛的使用者基礎,在前端領域占據著一席之地。

jQuery,曾經的前端霸主,如今隨著技術的不斷發展,它怎樣了?本文將分享 jQuery 4.0 的更新亮點,回顧其輝煌的發展歷程,並聊聊對 jQuery 的未來的看法。

jQuery 4.0 更新內容

經過精心籌備,jQuery 4.0 beta 版本終於釋出了!該版本帶來了錯誤修復、效能提升和重大改進,其中最顯著的是舍棄了對 IE<11 的支持,以更好地適應現代 Web 標準。jQuery 團隊長期以來一直在尋求重大改進,如今,jQuery 4.0.0 beta 終於實作了這些目標,包括清除冗余程式碼、淘汰過時 API、移除未公開的內部參數,以及簡化過於復雜的「魔術」行為。

下面就來看看 4.0 版本都有哪些更新。

再見 IE<11

隨著技術的進步,jQuery 4.0 決定停止支持 IE10 及更早的瀏覽器。我們計劃在未來版本(jQuery 5.0)中進一步減少支持的瀏覽器範圍。此次更新將移除專為舊版 IE 設計的程式碼,使程式碼庫更加高效。同時,我們也停止了對其他老舊瀏覽器的支持,如 Edge Legacy、舊版 iOS 和 Firefox,以及 Android 原生瀏覽器。若你需支持這些瀏覽器,可以使用 jQuery 3.x。

刪除已棄用的 API

這些在多個版本中已被棄用的函式現在終於在 jQuery 的主要版本中迎來了它們的終點。這些函式或因設計為內部使用,或因已有所有支持瀏覽器的原生替代方案,而被移除。具體包括:

  • jQuery.cssNumber

  • jQuery.cssProps

  • jQuery.isArray

  • jQuery.parseJSON

  • jQuery.nodeName

  • jQuery.isFunction

  • jQuery.isWindow

  • jQuery.camelCase

  • jQuery.type

  • jQuery.now

  • jQuery.isNumeric

  • jQuery.trim

  • jQuery.fx.interval

  • 如果你的程式碼中有使用這些函式,請務必更新,以使用相應的原生方法或替代函式,確保與最新版本的 jQuery 相容。

    其他:

    1. 移除特定方法 :jQuery 4.0 移除了幾個專為內部使用設計的陣列方法,包括 push sort splice 。開發者應更新程式碼,使用標準的陣列方法替代。

    2. 事件順序變更 focusin focusout 事件的處理順序在 jQuery 4.0 中有所改變,以符合最新的 W3C 規範。這可能會影響依賴舊順序的外掛程式或程式碼。新的順序是: blur -> focusout -> focus -> focusin

    3. jQuery.ajax 新增 FormData 支持: jQuery.ajax 現在可以自動處理二進制數據,包括 FormData ,無需額外配置。

    JSONP 自動轉換已移除

    jQuery 4.0 不再自動將 dataType: "json" 和提供的回呼函式轉換為 JSONP 請求。現在推薦使用 CORS 進行跨域互動,因為它在 jQuery 4.0 支持的所有瀏覽器中都有效。這有助於避免在不知情的情況下執行來自遠端域的程式碼。

    jQuery 源碼采用 ES 模組

    jQuery 主分支的源碼已從 AMD 遷移到 ES 模組。雖然之前 jQuery 源碼一直與釋出版本一起提供在 npm 和 GitHub 上,但之前不能直接作為模組匯入,除非使用 RequireJS。現在使用 Rollup 打包 jQuery,並單獨在 ES 模組上執行所有測試。

    Trusted Types 和 CSP 支持

    jQuery 4.0 現在支持 Trusted Types,允許使用 TrustedHTML 包裝的 HTML 作為 jQuery 操作方法的輸入,同時遵守 Content Security Policy 的 require-trusted-types-for 指令。

    此外,為避免 CSP 錯誤,jQuery 4.0 已將大多數異步指令碼請求從使用 XHR 切換到使用 <script> 標簽。只有在特定情況下(如使用 "headers" 選項時)才繼續使用 XHR。對於需要支持 IE11 的情況,建議使用主構建版本或添加原生 Promises 的 polyfill。

    更精簡的構建版本

    jQuery 4.0 的精簡構建版本經過最佳化,移除了 Deferreds 和 Callbacks,使其大小進一步縮小(壓縮後低於 20k)。雖然 Deferreds 提供了一些原生 Promises 不具備的功能,但在大多數場景下,可以使用原生 Promises 替代。對於需要支持 IE11 的使用者,建議使用主構建版本。

    jQuery 發展歷程

    jQuery 是什麽?

    jQuery是一個快速、簡潔的JavaScript框架,jQuery 的釋出初衷是簡化 JavaScript 編程,並提供跨瀏覽器的相容性。在早期的 Web 開發中,不同的瀏覽器對 JavaScript 的實作存在很大的差異,這使得編寫跨瀏覽器的 JavaScript 程式碼變得非常困難。jQuery 的目標是透過提供一致的 API,簡化 JavaScript 編程,並使其更易於跨瀏覽器開發。

    jQuery 的出現解決了許多早期 Web 開發中的常見問題,例如:

  • 簡化DOM操作 :在Web開發中,DOM(文件物件模型)操作是非常常見的任務。然而,原生的JavaScript DOM操作程式碼冗長且復雜,容易出錯。jQuery透過封裝常用的DOM操作,提供了一種簡潔、易用的API,使得開發者能夠更加方便地操作DOM。

  • 解決瀏覽器相容性問題 :由於不同瀏覽器對JavaScript的支持程度不同,因此在編寫JavaScript程式碼時需要考慮瀏覽器相容性問題。jQuery對常用瀏覽器進行了相容性處理,開發者無需關心瀏覽器差異,只需編寫標準的jQuery程式碼即可。

  • 簡化事件處理 :在Web開發中,事件處理是非常重要的功能。然而,原生的JavaScript事件處理程式碼也比較復雜,且容易出錯。jQuery封裝了常用的事件處理常式,使得開發者能夠更加方便地處理各種事件。

  • 簡化動畫設計 :在Web開發中,動畫設計也是常見的需求。然而,原生的JavaScript動畫設計程式碼復雜且難以實作。jQuery提供了簡單易用的動畫設計API,使得開發者能夠輕松地實作各種動畫效果。

  • 提供Ajax支持 :Ajax技術是現代Web套用的重要組成部份。然而,原生的JavaScript Ajax程式碼也比較復雜,且需要處理各種回呼和錯誤。jQuery提供了簡單易用的Ajax API,使得開發者能夠更加方便地使用Ajax技術。

  • jQuery 的歷史

    jQuery 的歷史可以追溯到2005年,當時John Resig為了簡化JavaScript編程而開始開發一個名為Prototype的「Behaviour」庫。然而,他發現這個庫過於龐大且復雜,於是決定重新開發一個更加輕量級、易於使用的JavaScript庫,這就是jQuery的雛形。

    在2006年1月,John Resig在BarCamp NYC上首次釋出了jQuery。這個初版已經支持CSS選擇符、事件處理和AJAX互動,而且其獨特的鏈式語法和短小清晰的多功能介面也受到了廣泛好評。隨著版本的叠代,jQuery逐漸增加了對動畫效果、外掛程式擴充套件等方面的支持,使得開發者能夠更加方便地使用JavaScript進行Web開發。

    以下是 jQuery 的發展歷程中的一些關鍵節點:

    1. 2006年1月,John Resig正式宣布以jQuery的名稱釋出自己的程式庫。這是一個為JavaScript編寫的簡潔、快速且功能豐富的庫。

    2. 2006年8月,jQuery釋出了第一個穩定版本,這個版本已經支持CSS選擇符、事件處理和AJAX互動。

    3. 2007年7月,jQuery 1.1.3版釋出,這個版本的變化主要集中在對jQuery選擇符引擎執行速度的顯著提升,使得jQuery的效能達到了其他同類JavaScript庫如Prototype、Mootools以及Dojo的水平。

    4. 同年9月,jQuery 1.2版釋出,這個版本去掉了對XPath選擇符的支持,增加了對效果進行更為靈活的客製的能力,並借助新增的名稱空間事件,使外掛程式開發變得更容易。同時,jQuery UI計畫也開始啟動。

    5. 2008年5月,jQuery 1.2.6版釋出,這個版本主要是將Brandon Aaron開發的流行的Dimensions外掛程式的功能移植到了核心庫中,同時修復了許多BUG,提高了效能。

    6. 2009年1月,jQuery 1.3版釋出,這個版本使用了全新的選擇符引擎Sizzle,顯著提升了在各個瀏覽器下的查詢速度,使程式庫的效能有了極大提升。

    7. 2009年9月,微軟和諾基亞公司正式宣布支持開源的jQuery庫,微軟公司還將jQuery作為Visual Studio工具集的一部份,提供包括jQuery的智慧提示、程式碼片段、範例文件編制等內容在內的功能。

    8. 2012年1月31日,jQuery 1.5正式版釋出,這個版本包括了許多重大改進,如重寫了Ajax模組,新增了延緩物件(Deferred Objects),提供了jQuery替身——jQuery.sub(),增強了遍歷相鄰節點的效能,並對jQuery開發團隊構建系統進行了改進。

    9. 2013年4月18日,jQuery 2.0正式版釋出,這個版本不再支持IE6/7/8,檔大小與1.9.1相比小了12%,可以構建一個更小、更輕量的版本。同時,jQuery 2.0 API完全相容jQuery 1.9 API,它融合了CSS,HTML,JavaScript,AJAX等多項技術。

    10. 2014年:jQuery團隊推出了3.x版本。這個版本分為兩個分支:jQuery 3.0和jQuery 3.0 compat。其中,jQuery 3.x是2.x的後續版本,主要關註效能和內部架構的最佳化。而jQuery 3.0 compat版本則是為了相容1.x版本而設計的,允許開發者在升級到3.x版本時保持程式碼的穩定性。同時,隨著現代瀏覽器對HTML5和CSS3的支持越來越完善,jQuery也開始更加註重與這些新標準的相容性和最佳化。

    11. 2018年:jQuery釋出了 3.3 版本,這個版本帶來了一些小型的改進和效能最佳化,以及對一些現代瀏覽器特性的支持。此時,隨著前端技術的快速發展,jQuery雖然仍然是一個受歡迎的庫,但也面臨著來自其他新興框架(如React、Vue等)的競爭。

    12. 2020年及以後:jQuery團隊繼續維護著庫的穩定性和相容性,不斷修復BUG並最佳化效能。

    jQuery 未來展望

    jQuery 的現狀可以說是處於一個相對成熟且穩定的狀態,但同時也面臨著一些挑戰和變化。

    首先,從積極的角度來看,jQuery 仍然是一個非常受歡迎和廣泛使用的 JavaScript 庫,其生態系中擁有 超百萬個外掛程式 ,根據 BuiltWith 的數據,排名前 100 萬的網站中有 78% 仍以某種方式使用 jQuery。它的簡單易用、強大的 DOM 操作、事件處理、動畫和 Ajax 功能,以及良好的瀏覽器相容性,使得它在許多計畫中仍然是首選的 JavaScript 庫。特別是在一些小型公司或者計畫中,由於開發周期短、人員技能限制等原因,jQuery 仍然是一個非常重要的工具。

    目前,jQuery 的 npm 下載量大概是 Vue 的兩倍:

    然而,隨著前端技術的不斷發展和變化,jQuery 也面臨著一些挑戰。一方面,隨著現代瀏覽器對原生 JavaScript 的支持越來越好,許多原本需要依賴 jQuery 實作的功能現在已經可以透過原生 JavaScript 來實作,而且效能可能更好。另一方面,隨著前端框架和庫的不斷湧現,如 React、Vue、Angular 等,這些框架提供了更加高效、靈活和現代化的開發方式,因此在一些大型或者復雜的計畫中,jQuery 可能不再是首選。

    此外,值得註意的是,雖然 jQuery 本身仍然非常活躍,但是其社群已經不如過去那麽繁榮了。這在一定程度上反映了前端技術的整體趨勢:隨著更加現代化、高效和靈活的前端框架和庫的出現,傳統的 JavaScript 庫的地位可能會逐漸下降。

    最後,我們來看看網友對 jQuery 的看法。

  • 寫起來爽,維護起來困難。

  • 江山代有框架出,各領風騷數十年,科技產品不論是硬體還是軟體都會淘汰jQuery用起來一時寫一時爽,維護起來就難了,挑幾個點思考下:

    1. 沒有元件的概念,程式碼難以復用。

    2. 沒有關註點分離,html與JS交織在一起,可讀性差

    3. 每次編寫都遵循繁瑣的編寫流程:Init,ajax,拼接html,bindEvent。

    簡單講,現在框架解決了上述問題。

  • 簡單易用

  • 作為個人寫程式碼,前端裝node,webpack太麻煩了,每次釋出都還要編譯,太煩了。jquery多簡單

  • 功不可沒

  • 2023年8月26日,距離上一版本時隔 一年零五個月 之久,jQuery更新了 3.6.1 維護版本。


    jQuery強調的理念是寫得少,做得多(write less, do more)。它簡化了操作DOM的方法,讓早期的程式設計師們能更方便的實作動畫、修改CSS等各種操作,說它是JavaScript史上使用最廣泛的一個庫也不為過。jQuery獨特的選擇器、鏈式操作、事件處理機制和封裝完善的Ajax都是其他JavaScript庫望塵莫及的。


    在這個前端快速更新叠代的時代,各大框架大行其道,關註jQuery的人越來越少,甚至不願意去面對它。但它曾經輝煌過,它的功績功不可沒,不可磨滅。

    曾經輝煌過的 JS 框架如今漸漸日薄西山,在將來我們是會將見證其終局,還是看著它一步步改進之後又重新回歸到大眾視野?

  • 還在更新,還能用

  • 2023年了,jquery還在更新,所以還能用。作為一個工具庫,用它其實不丟人。所有的工具都會過時,所有的技術都會被替代。站在這個時代裏,不管你隨波逐流,還是堅守陣地,都離不開時代的局限性。任何的嘲諷都顯得毫無意義。你我他都可能成為別人嘲諷的過去。

  • 不再積極維護,但仍是一個很好的選擇

  • 下圖是 jQuery 在 Github 上的 commits 活躍度統計圖:

    可以看到 2014 年是一個分水嶺,React 也是那一年前後誕生的,之後逐漸送出數越來越少,2016 年之後更加明顯,另外一方面原因也是因為 jQuery 庫本身比較輕量級,核心穩定後,後期改動就不大了。


    原始作者 jeresig 應該很早就沒在 jQuery 計畫繼續參與貢獻了,目前估計是後面三位在繼續維護 jQuery 計畫。


    作為一個開發時間跨度長達 18 年,在 React、Vue、Angular 出現之前基本上統治前端頁面開發的 JS 庫,應該說整個計畫核心應該非常穩定了,Bug 不多,是一個非常優秀的庫。


    如果計畫不是非常復雜,想要怎麽快怎麽來的話,jQuery 就非常合適了,基本上在 html 裏面參照一個 CDN 上的資源,然後就能用了,而且 jQuery 本身也挺好用的。


    還有一些地方就是不太適合 React 這類響應式框架的場景,比如富文字編輯器,可能就操作原生的 DOM 元素就好了,我記得 CKEditor 裏面就有用到 jQuery。


    個人認為在之後很長一段時間,在一些場景裏面,jQuery 應該還是一個很好的選擇。

  • 使用jQuery,享受純正的js開發

  • jQuery一直在更新,4.0 即將釋出。微小型計畫首選,vue、react雖然稱自己是輕量級框架,但是在jquery面前就是一個弟弟,什麽數據雙向繫結,動態路由之類的,不就是框架裏完成了這部份的開發,自己也可以封裝出這個功能。


    使用jQuery,享受純正的js開發。

  • 存在即合理

  • 只能說jquery曾經我是用得最多的,但現在卻已經轉向各種框架

    jquery有著曾經的輝煌,不管技術怎麽發展,它作為之前的前端開發貢獻了不可磨滅的成就。


    以前寫jquery,各種操作dom,各種爽,比原生的js好用太多,對於各種api也是手到擒來。寫點選選單列表顯示選中效果,只要一行程式碼就搞掂,這是多麽舒服的寫法。


    我不知道jquery會不會消失,但存在即合理,雖然現在各種框架流行,但對於seo來說,這是框架沒有辦法做到的。而jquery操作dom的直接手法,對於seo來說簡直是太好了。


    爬蟲看到jquery,心裏那個高興啊,隨便走一下,各種數據就收集了,真是爽歪歪啊~


    希望jquery一直前行~~~

  • 寫油猴指令碼很有用

  • 寫油猴指令碼,jquery非常地好用。

  • 很多老計畫在用

  • 新計畫估計很少有用的了,老計畫還很多,也還有很多人使用,逐漸會被淘汰,不管vue還是react,運算元據比操作dom方便也有趣很多。

    註:以上看法來源於知乎。

    最後,回歸到主題,jQuery 老矣,尚能飯否?

    對於jQuery來說,盡管近年來新興的前端框架和庫不斷湧現,但jQuery仍然保持著它的魅力和實用性。它擁有大量成熟的外掛程式和社群支持,這使得它成為許多計畫中的首選選擇,尤其是在需要快速原型開發、簡單DOM操作或維護老舊計畫時。

    然而,隨著前端技術的不斷發展和新框架的湧現,jQuery在某些方面可能不是最優選擇。對於需要高效能、復雜數據互動或元件化開發的計畫,一些現代的前端框架(如React、Vue、Angular等)可能更適合。這些框架提供了更豐富的功能和更好的效能,能夠滿足更復雜的應用程式的需求。

    然而,隨著前端技術的不斷發展和新框架的湧現,jQuery在某些方面可能不是最優選擇。對於需要高效能、復雜數據互動或元件化開發的計畫,一些現代的前端框架(如React、Vue、Angular等)可能更適合。這些框架提供了更豐富的功能和更好的效能,能夠滿足更復雜的套用的需求。

    對於 JQuery 你怎麽看?歡迎在評論區留言討論!

    👇🏻 點選下方閱讀原文,獲取魚皮往期編程幹貨。

    往期推薦