譯者按: 看來 jQuery 還是有一些用武之地的。
為了保證可讀性,本文采用意譯而非直譯。翻譯僅供學習探討,不代表 Fundebug 觀點。
許多人都在提倡: “直接用原生的 JavaScript 就好了,不需要 jQuery 了”。
You might not need jQuery嘗試告訴我們,擺脫 jQuery 是一件很容易的事情。但是,它的第一個例子恰恰告訴我們用 jQuery 其實也不錯,因為我們寫了 10 行原生的 JavaScript 程式碼,其實只需要 1 行 jQuery 程式碼就夠了。
很多 JavaScript 的 API,尤其是 DOM 相關的 API,挑戰了我的審美哲學,直白點說,我覺得它們太糟糕了!el.insertAdjacentElement('afterend', other)
當然也可以用,但是$(el).after(other)
更加簡潔。$()
函式也沒那麼好看,我沒有特別喜歡,但是它比原生的 API 好太多了。
你們如何獲取某個元素的 sibling 呢?到底用nextSibling
還是用nextElementSibling
?它們有什麼不同?各個瀏覽器分別支援哪個方法?當你忙著去 MDN 查文件的時候,我直接用 jQuery 的next
和prev()
就好了。
許多常用的 JavaScript 的標準 API 都挺奇怪的,這裡我就不列出來了,大家去You might not need jQuery看看就知道了。
寫程式碼的時候,我們總會需要使用一些常用的幫助函式,You might not need jQuery列舉了很多,使用 jQuery 可以很方便的使用這些幫助函式,這樣我們就不需要每次都去 Stack OverFlow 上去複製程式碼了。。。
瀏覽器的相容問題已經沒有以前那麼頭疼了,但是它還是個不小的問題,除非你覺得只要 85%的使用者 OK 就行。關於這個問題,大家可以閱讀我的Why Hello CSS doesn’t use CSS variables。
那麼,我們必須使用 jQuery 嗎?當然不是!使用任何第三方庫都是有代價的,增加了複雜度,也增加了檔案大小。但是,jQuery 其實沒那麼大,壓縮之後的大小隻有 30K。如果我們去掉 ajax 以及一些不常用的功能的話,就只有 23K;如果我們使用 querySelector 替代 SizzleJS 來構建的話,則只有 17K 了。無論是 30K 還是 17K,對許多應用來說,這個大小都是完全可以接受的。
大家不妨看看Bootstrap removing jQuery,為了移除 jQuery,他們也是花了不少精力啊:自己擼幫助函式;放棄相容 IE,因為太難寫了;他們花了 1 年半時間來倒騰這個。最終的結果在我看來,這些努力似乎不值得。
我理解他們為什麼這麼做,大家希望在 Vue 專案中使用 Bootstrap,但是同時使用 Vue 和 jQuery 的話有點傻。對於減少網頁大小,我非常同意,也很喜歡Web bloat與The Ethics of Web Performance兩篇部落格中的觀點。但是,我們需要實際一點,不要過於理想主義。新增 17K 的 jQuery 真的那麼糟糕嗎?當我吐槽 Medium 或者 New York Times 這樣的網站需要的 JS 檔案超過 1M 的時候,有的人會這樣反駁:”莫非你還在用 56k 的頻寬?“,但是,為什麼 17K 的 jQuery 就那麼不能接受了呢?
不用 jQuery 而自己寫幫助函式也可以,比如你希望你寫的函式被其他人複用,或者你寫的函式特別小。但是為了不用 jQuery,放棄向後相容?那我覺得還是用 jQuery 得了。所有事情都用 jQuery 實現當然不好,但是任何時候都不用 jQuery也不是什麼明智之舉。
我不是 jQuery 的狂熱粉絲,我也願意使用一些簡化版的 jQuery,只要它們可以讓 JS 的 API 更好用一點。You might not need jQuery推薦了bonzo和$dom,以及其他一些 AJAX 庫,但是大多數看起來沒怎麼維護。如果沒有足夠吸引人的理由,最好不要去替代 jQuery,因為 jQuery 本身沒什麼大毛病。
有些讀者也許會去比較 Vue, React 以及其他前端框架,但是這篇部落格的目的是比較 jQuery 與原生的 JavaScript,沒有打算去論證整個前端到底應該如何開發。
話說回來,我覺得有些場景下只使用簡單的 JavaScript 也挺好的,主要原因是我希望網頁可以足夠快,可以讓儘量多的人正常訪問。以我的經驗,使用服務端渲染,再加上漸進式增強 JavaScript,是最佳的實現方式,開發起來很簡單,訪問速度足夠快,BUG 也很少。
難道前端框架不好嗎?當然不是,沒有什麼絕對不好的技術,所有技術都有一定的取捨,當然也包括 jQuery。
參考
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了10億+錯誤事件,付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家免費試用!
版權宣告
轉載時請註明作者Fundebug以及本文地址: blog.fundebug.com/2019/06/04/…