大家好我是易學前端筆記，今天給大家分享拋棄jQuery，擁抱原生JavaScript

前端發展很快，現代瀏覽器原生 API 已經足夠好用。我們並不需要為了操作 DOM、Event 等再學習一下 jQuery 的 API。同時由於 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，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 多倍！

如何移除 jQuery

1. 替換代碼

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

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

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

oui-dom-utils 來做選擇器和樣式相關

oui-dom-events 來做 Event，支持命名空間和事件代理

2. 舊瀏覽器自動跳轉

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

總結

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

閱讀更多 易學前端筆記 的文章

關鍵字: 狀態 技術 JavaScript