為什麼越來越少的人用 jQuery?

為什麼越來越少的人用 jQuery?

作者 | 寒月

最早期的開發,大多都使用jQuery,它給我們帶來了很多的便利:快速選取元素,方便操作DOM元素的API,各個瀏覽器之間完美的兼容性,鏈式操作,動畫、ajax等等都是jQuery為前端開發人員來帶的好處。為什麼現在越來越少人用了呢?我來分以下幾點,闡述我的想法:

1.JS更新帶來的衝擊

1.快速選取DOM節點

對於大部分使用jQuery的開發工程師來說,能夠快速選取DOM節點,這個無疑是一個重要的原因,但是就目前情況來說,這個優勢顯然已經蕩然無存了,為什麼呢?

跟大家說兩個API,這兩個API已經非常多的人在用了,就是document.querySelector和document.querySelectorAll方法。

這兩個方法可以通過傳入CSS選擇器形式的字符串,就可以匹配到預期的DOM節點。以下是目前兩個API的兼容情況:

為什麼越來越少的人用 jQuery?

querySelector兼容情況

為什麼越來越少的人用 jQuery?

querySelectorAll兼容圖

從圖中可以看到,這兩個API已經很好的兼容各個瀏覽器。

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

為什麼越來越少的人用 jQuery?

所以說jQuery快速選擇DOM節點的優勢已經不存在了。

2.方便操作DOM元素的API

可以方便操作DOM元素的API,比如addClass 、removeClass 、toggleClass。現在原生JS也得到了支持,這個API叫做classList。

為什麼越來越少的人用 jQuery?

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

3.動畫

現在CSS3動畫技術已經非常的成熟,已經完全可以取代jQuery做的動畫,而且還能比jQuery的Animate方法實現更復雜的動畫,兼容性好,性能消耗小,何樂而不為呢?

舉個例子吧,比方說如果實現背景顏色過度,CSS3可以完美的實現,但是jQuery就不行。

並且現在已經出現了很多優秀的CSS3動畫庫,大名鼎鼎的Animate.css庫大家肯定都有耳聞吧。

為什麼越來越少的人用 jQuery?

目前CSS3動畫的兼容性

4.Ajax操作

jQuery的ajax操作,為我們省去了兼容瀏覽器方面的問題,並且也提供了簡明的API去調用get和post,讓開發者從繁瑣的兼容性與使用原生API上解脫出來。但是現在,這個優勢也已經非常微小了。

不管是原生JS的Fetch API還是Axios。都為我們提供了強大的Ajax使用能力,並且Axios還有攔截器這個優勢。這時相較而言,jQuery的Axios確實已經無法相比了。

當然Fetch在IE上來說,肯定是沒法用的

為什麼越來越少的人用 jQuery?

Fetch兼容性

但是已經有了Fetch的Polyfill方案:github/fetch

這樣只需要引用這一個小小的JS,就可以使用方便的Ajax了。相較於jQuery,那是小巧很多的。

2.性能問題

在原來的開發中,工程師們不會太糾結於性能問題。但是現在不同了,為了提高用戶體現,首要的就是解決瀏覽器繪製所帶了的性能問題。最經典的莫過重繪和迴流這兩個概念。

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

迴流:一般來說,瀏覽器進入頁面的時候就已經進行了一次迴流,迴流其實指的就是頁面重新進行排版佈局。

既然我們想提高性能,那麼就可以先從這兩概念入手,肯定是以最小的代價更新頁面是提高性能最好的手段。但可惜的是,jQuery並沒有做到。為什麼這麼說,請看以下分析:

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

比如說我們這時多了一個換一換按鈕。在傳統開發模式中,這時的換一換按鈕肯定執行的還是上面的代碼,獲取元素,修改元素的innerHTML,但是現在問題出現了,就是我們有必要將所有元素重新刪除,再重新添加一遍嗎?答案肯定是不需要(下圖所示,創建一個元素的代價有多大)。

為什麼越來越少的人用 jQuery?

一個li節點上的所有屬性

因為這時我們只需要將每一個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。

極大提高了開發的效率,並且可以使用最新的ES6、ES7語法進行開發,在編碼體驗上,就提高了一個檔次。

現在jQuery已經完美地退出了歷史的舞臺,它已經完成了它所要完成的任務。

作者簡介:寒月,喜歡技術,喜歡分享,喜歡寫文章的文藝前端工程師。


分享到:


相關文章: