剑网3指尖江湖职业推荐 www.1468054.com


很多人提倡“只使用純 JavaScript,根本不需要 jQuery”。好吧,很多東西確實是我不需要的,盡管它們可能都很好。我可能也不需要 jQuery,但它確實也很好。

有些文章試圖告訴我們:去掉 jQuery 其實是很容易的。但這篇文章在開頭卻舉了一個使用 jQuery 很好的理由:一行簡單的 jQuery 代碼取代 10 行 vanilla JS(純原生 JavaScript)代碼!

使用 jQuery 的優勢

JavaScript API(特別是 DOM API)的很多東西都與我的審美觀相去甚遠,我這么說算客氣的。el.insertAdjacentElement(‘afterend’, other) 固然沒有問題,但如果寫成 (el).after(other)不是更好嗎?雖然我也不是那么喜歡

() 函數,但它再怎樣都比 DOM 提供的函數要好得多。

通常你是怎么獲取一個元素的兄弟元素的?是 nextSibling 還是 nextElementSibling?它們有什么不一樣嗎?哪些瀏覽器支持它們?又或者不支持?為了記住這些,你需要記住或者去查閱 MDN,但如果使用了 jQuery,只需要調用 next() 或者 prev() 方法。

JavaScript API 提供的很多標準操作都很奇怪,我本來可以列出很多,不過上面提到的那篇文章已經列出了一大部分了。

你可能還需要一些輔助函數來完成一些常見的任務,同樣,上述的文章也列出了很多這樣的函數。而 jQuery 就包含了這些東西,省得你到處拷貝粘貼這類代碼。

雖然現在瀏覽器兼容性問題不像以前那么嚴重,但仍然是個問題,特別是如果你無法接受“只要 85% 的用戶能夠使用就可以了”。

是否必須選擇 jQuery

那么你要一直使用 jQuery 嗎?當然不是了。在項目里添加依賴意味著更大的復雜性和更大的文件體積。不過,jQuery 本身并不大。經過壓縮的默認大小為 30K,如果不包含 AJAX 和其他不常用的東西大小只有 23K,如果使用 querySelector 替代 SizzleJS 就只剩下 17K。對于我來說,30K 或者經過優化的 17K 的 jQuery 已經能夠滿足大部分用途。

從 Bootstrap 移除 jQuery 的案例可以看出,使用純 JavaScript 的代價是很大的:他們重寫了輔助函數,去掉了對 IE 的支持(因為太難了),讓 API 變得不兼容,總共花了一年半的時間。從結果來看,我不覺得它比之前好多少。

我明白他們為什么要那么做。人們希望將 Bootstrap 和 Vue.js 放在一起使用,而把 jQuery 和 Vue.js 放在一起又顯得很奇怪。我也很贊成我們要避免“Web 膨脹”,但至少也要務實些。在項目里包含 17K 的 jQuery 真的有那么糟糕嗎?相比 Medium 或紐約時報這些動不動就要加載上兆 JavaScript 的網站,一個 17K 的 jQuery 就那么讓你難以承受嗎?

當然,我們也有一些不使用 jQuery 的理由:比如你想要寫一些會被別人重用的代碼或者小函數。但即使是這樣,也不至于要拼了老命避免使用 jQuery。什么東西都用 jQuery 來寫不是個好主意,但完全不使用 jQuery 也不是。

我并沒有只與 jQuery 為伍,但它的一些優點確實彌補了 JavaScript API 的不足。之前的那篇文章建議使用bonzo$dom,以及其他一些與 AJAX 有關的包,但它們當中大部分似乎已經停止維護了。另外,既然所有人都會使用 jQuery,那么除非非常有必要,否則為什么要用其他東西來替代它?

總結

一些讀者可能會想:“那么其他框架呢,比如 Vue.js、React”?其實這篇文章的目的在于比較純 JavaScript 和 jQuery,而不是要和讀者討論什么前端開發大法。

總的來說,使用純 JavaScript 也是有理由的,比如我想要開發一個非??斕耐?,使用最簡單的代碼,可以讓盡可能多的人訪問到。在我看來,服務器端生成的帶有“漸進式增強”風格的 JavaScript 通常是最好的方式。這種開發方式速度快,而且容易,bug 更少。

那這是不是意味著 Web 框架就不是好東西了呢?當然不是了。沒有什么東西是非黑即白的,它們一般都存在一系列的權衡(jQuery 當然也是)。

我認為,Web 是主要是用來瀏覽 document 的,而不是一個操作系統。盡管對于很多 Web APP 來說,使用 document 方式也可以很好的進行一些操作。

余下全文(1/3)

本文最初發表在www.infoq.cn,文章內容屬作者個人觀點,不代表本站立場。

分享這篇文章:

請關注我們:

發表評論

電子郵件地址不會被公開。 必填項已用*標注