?拋棄jQuery,擁抱原生JavaScript - 前端加油站 - 科蟻網

拋棄jQuery,擁抱原生JavaScript

前端發展很快,現代瀏覽器原生 API 已經足夠好用。我們并不需要為了操作 DOM、Event 等再學習一下 jquery 的 API。同時由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用場景大大減少。因此我們項目組在雙十一后抽了一周時間,把所有代碼中的 jQuery 移除。下面總結一下:

Why not jQuery

1. 模式變革

jQuery 代表著傳統的以 DOM 為中心的開發模式,但現在復雜頁面開發流行的是以 React 為代表的以數據/狀態為中心的開發模式

應用復雜后,直接操作 DOM 意味著手動維護狀態,當狀態復雜后,變得不可控。React 以狀態為中心,自動幫我們渲染出 DOM,同時通過高效的 DOM Diff 算法,也能保證性能。我們在 React 應用實踐中也發現,大部分當你想直接操作 DOM 的時候,就意味著你可能做錯了。

2. 不支持同構渲染

重構就是前后端運行同一份代碼,后端也可以渲染出頁面,這對 SEO 要求高的場景非常合適。由于 React 等流行框架天然支持,已經具有可行性。當我們在嘗試把現有應用改成同構時,因為代碼要運行在服務器端,但服務器端沒有 DOM,所以引用 jQuery 就會報錯。這也是要移除 jQuery 的迫切原因。同時不但要移除 jQuery,在很多場合也要避免直接操作 DOM。

3. 原生 API 足夠好用

由于瀏覽器的歷史原因,曾經的前端開發為了兼容不同瀏覽器怪癖,需要增加很多成本。jQuery 由于提供了非常易用的 API,屏蔽了瀏覽器差異,極大地提高了開發效率。這也導致很多前端只懂 jQuery。其實這幾年瀏覽器更新很快,也借鑒了很多 jQuery 的 API,如 querySelector,querySelectorAll 和 jQuery 選擇器同樣好用,而且性能更優。

4. 性能

前端開發一般不需要考慮性能問題,但你想在性能上追求極致的話,一定要知道 jQuery 性能很差。原生 API 選擇器相比 jQuery 豐富很多,如 document.getElementsByClassName 性能是 $(classSelector) 的 50 多倍!

3145347651-565d1118a0a57_articlex

測試鏈接:http://jsperf.com/jquery-vs-native-api

5. 時機成熟

差的瀏覽器(IE)已經淘汰的差不多了。

If We Didn’t Spend So Much on IE Support, We Could Be Taking Vacations on Mars
Christian Alfoni
我們的主打產品現在有千萬用戶,因為我們一直引導用戶升級瀏覽器,上個月統計 IE 9 以下用戶只占不到 3%。但為了這 3% 的用戶我們前端開發卻增加了很多工作量,也限制了我們升級我們的架構,因此放棄支持他們利大于弊。當然這要根據產品來定,比如這是百度統計的國內瀏覽器占有率,IE8 竟然還有 22%。有些產品可以為了保證用戶體驗,在舊的瀏覽器上投入很大成本,甚至做到了極致。其實我覺得產品更應該做的是引導用戶升級瀏覽器。微軟也宣布 2016年1月12號停止支持 IE 11 以下瀏覽器,繼續使用舊瀏覽器就會有安全風險,我們更應該主動引導,只要產品有足夠吸引力,大部分用戶升級并不困難。

tji

數據來源 百度統計

下面是國際上 IE 占有率,IE8 已經跌出前 10,IE 11 比較多,還好支持他們并不難。

TB121HKKFXXXXXJXVXXSrt.VXXX-522-456

數據來源 W3 Counter

如何移除 jQuery

1. 替換代碼

移除 jQuery 可以很順利,我們把整個過程詳細整理了,并開源。

打開 https://github.com/oneuijs/You-Dont-Need-jQuery 對 API 查找替換即可。

同時我們簡單封裝了一些方法:

oui-dom-utils 來做選擇器和樣式相關
oui-dom-events 來做 Event,支持命名空間和事件代理
剛去了 jQuery 又引了新的庫,這不是玩我嗎??其實以上兩個庫很簡單,只是常用方法的簡單封裝,建議你看一下代碼。你當然可以不用。

以上的庫都用于我們的生產環境,我們會長期維護,保證更新。

2. 舊瀏覽器自動跳轉

代碼替換后,當用戶用舊瀏覽器打開時,你還要做一個跳轉,把用戶定位到提示頁面,提示用戶下載升級瀏覽器。IE9 以下瀏覽器都支持條件判斷語句,可以在 </head> 標簽結束前添加如下代碼做自動跳轉

<!–[if lte IE 9]>
<script>if (!/update\.htm/.test(location.href)) window.location = ‘//abc.com/update.htm’; </script>
<![endif]–>
總結

本文并不是強迫你一定要移除 jQuery,jQuery 為支持舊瀏覽器節省了很多成本。但條件成熟的情況下,移除 jQuery,參照 You Don’t Need jQuery 擁抱原生 JavaScript 能同樣保證開發效率,也可以給產品帶來更好的性能,同時也能提高開發者水平。


鮮花

握手

雷人

路過
1

雞蛋

剛表態過的朋友 (1 人)

該文章已有5人參與評論

請發表評論

全部評論

查看全部評論>>

老子是皇帝彩金