爲何愈來愈少的人用jQuery

摘要：JQuery該退役了。

• 原文：爲何愈來愈少的人用jQuery
• 做者：Lemonade

Fundebug經受權轉載，版權歸原做者全部。

最先期的開發，大多都使用jQuery，它給咱們帶來了不少的便利：快速選取元素，方便操做DOM元素的API，各個瀏覽器之間完美的兼容性，鏈式操做，動畫、ajax等等都是jQuery爲前端開發人員來帶的好處。爲何如今愈來愈少人用了呢？我來分如下幾點，闡述個人想法：

1、JS更新帶來的衝擊

1. 快速選取DOM節點

對於大部分使用jQuery的開發工程師來講，可以快速選取DOM節點，這個無疑是一個重要的緣由，可是就目前狀況來講，這個優點顯然已經蕩然無存了，爲何呢？跟你們說兩個API，這兩個API已經很是多的人在用了，就是document.querySelector和document.querySelectorAll方法。這兩個方法能夠經過傳入css選擇器形式的字符串，就能夠匹配到預期的DOM節點。如下是目前兩個API的兼容狀況：

從圖中能夠看到，這兩個API已經很好的兼容各個瀏覽器。

Vue中也是使用此API進行元素獲取的：

因此說jQuery快速選擇DOM節點的優點已經不存在了。

2. 方便操做DOM元素的API

能夠方便操做DOM元素的API，好比addClass 、removeClass 、toggleClass。如今原生JS也獲得了支持，這個API叫作classList。

雖說IE兼容的不太完美，可是最基本該實現也都實現了。

3. 動畫

如今CSS3動畫技術已經很是的成熟，已經徹底能夠取代jQuery作的動畫，並且還能比jQuery的animate方法實現更復雜的動畫，兼容性好，性能消耗小，何樂而不爲呢？舉個例子吧，比方說若是實現背景顏色過分，CSS3能夠完美的實現，可是jQuery就不行。而且如今已經出現了不少優秀的CSS3動畫庫，大名鼎鼎的Animate.css庫你們確定都有耳聞吧。

4. Ajax操做

jQuery的ajax操做，爲咱們省去了兼容瀏覽器方面的問題，而且也提供了簡明的API去調用get和post，讓開發者從繁瑣的兼容性與使用原生API上解脫出來。可是如今，這個優點也已經很是微小了。不論是原生JS的Fetch API仍是axios。都爲咱們提供了強大的ajax使用能力，而且axios還有攔截器這個優點。這時相較而言，jQuery的ajax確實已經沒法相比了。

固然Fetch在IE上來講，確定是無法用的

可是已經有了Fetch的Polyfill方案：github/fetch

這樣只須要引用這一個小小的JS，就可使用方便的ajax了。相較於jQuery，那是小巧不少的。

2、性能問題

在原來的開發中，工程師們不會太糾結於性能問題。可是如今不一樣了，爲了提升用戶體現，首要的就是解決瀏覽器繪製所帶了的性能問題。最經典的莫太重繪和迴流這兩個概念。

重繪：就是頁面從新進行繪製，比方說，修改一個元素的背景顏色。

迴流：通常來講，瀏覽器進入頁面的時候就已經進行了一次迴流，迴流其實指的就是頁面從新進行排版佈局。

既然咱們想提升性能，那麼就能夠先從這兩概念入手，確定是以最小的代價更新頁面是提升性能最好的手段。但惋惜的是，jQuery並無作到。爲何這麼說，請看如下分析:

當咱們拿到一組新聞數據要渲染到ul標籤裏時，一般咱們會先將新聞數據逐條進行字符串拼接，緊接着使用$符選擇ul元素，並修改ul的innerHTML的值爲拼接好的字符串（使用html API），此時完成了第一次渲染。此次頁面進行了重繪（這時必然的），首先不分析第一次的性能好或壞，用下一個說明將更加有力。

好比說咱們這時多了一個換一換按鈕。在傳統開發模式中，這時的換一換按鈕確定執行的仍是上面的代碼，獲取元素，修改元素的innerHTML，可是如今問題出現了，就是咱們有必要將全部元素從新刪除，再從新添加一遍嗎？答案確定是不須要（下圖所示，建立一個元素的代價有多大）。

由於這時咱們只須要將每個li裏的文字和a標籤裏的連接修改便可，那顯然是沒有必要像上面那樣從新再添加一遍li的。由於一個DOM元素，可能包含上百條屬性，這對性能開銷是很大的。

那麼如今出現的新概念 Virtual DOM（虛擬DOM），就能夠解決這個問題。其實Virtual DOM就是對真實DOM節點的描述，經過改變Virtual DOM來以最小變更來改變真實DOM（Virtual DOM不必定真的比jQuery性能更好）。

尤雨溪：網上都說操做真實 DOM 慢，但測試結果卻比 React 更快，爲何？

3、現代框架對jQuery的影響

如今國內比較火的React 、Vue 、Angular框架，都是屬於MV*框架的範疇，其設計特色，主要是以數據爲核心。能夠說操做DOM的事兒，就留給框架去作了。這比傳統jQuery開發效率高，代碼可維護性高，可擴展性強、性能好。

打個比方：

我讓jQuery去買瓶醬油，給了他100塊錢，這時咱們須要告訴他去小賣鋪的路怎麼走、怎麼跟老闆說買啥醬油，買多少錢的醬油，找多少零錢，還得告訴他怎麼回來（命令式）。

這時我讓Vue去買醬油去了，這時我只須要給他錢，而且告訴他目的地在哪兒，買什麼醬油便可，不須要手把手教他（函數式）。

這就是傳統開發和現代框架開發的不一樣。

使用現代框架開發，可使用Webpack（固然使用jQuery也可使用Webpack）,可使用人家提供的現成的腳手架，比方說create-react-app，vue-cli。極大提升了開發的效率，而且可使用最新的ES六、ES7語法進行開發，在編碼體驗上，就提升了一個檔次。

如今jQuery已經完美的退出了歷史的舞臺，他已經完成了他所要完成的任務。

關於Fudebug

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，獲得了Google、360、金山軟件、百姓網等衆多知名用戶的承認。歡迎免費試用！