最早期的開發,大多都使用jQuery,它給我們帶來了很多的便利:快速選取元素,方便操作DOM元素的API,各個瀏覽器之間完美的相容性,鏈式操作,動畫、ajax等等都是jQuery為前端開發人員來帶的好處。為什麼現在越來越少人用了呢?我來分以下幾點,闡述我的想法:
一、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,那是小巧很多的。
二、效能問題
在原來的開發中,工程師們不會太糾結於效能問題。但是現在不同了,為了提高使用者體現,首要的就是解決瀏覽器繪製所帶了的效能問題。最經典的莫過重繪和迴流這兩個概念。
**重繪:**就是頁面重新進行繪製,比方說,修改一個元素的背景顏色。
**迴流:**一般來說,瀏覽器進入頁面的時候就已經進行了一次迴流,迴流其實指的就是頁面重新進行排版佈局。
既然我們想提高效能,那麼就可以先從這兩概念入手,肯定是以最小的代價更新頁面是提高效能最好的手段。但可惜的是,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 更快,為什麼?
三、現代框架對jQuery的影響
現在國內比較火的React 、Vue 、Angular框架,都是屬於MV*框架的範疇,其設計特點,主要是以資料為核心。可以說操作DOM的事兒,就留給框架去做了。這比傳統jQuery開發效率高,程式碼可維護性高,可擴充套件性強、效能好。
打個比方:
我讓jQuery去買瓶醬油,給了他100塊錢,這時我們需要告訴他去小賣鋪的路怎麼走、怎麼跟老闆說買啥醬油,買多少錢的醬油,找多少零錢,還得告訴他怎麼回來**(命令式)**。
這時我讓Vue去買醬油去了,這時我只需要給他錢,並且告訴他目的地在哪兒,買什麼醬油即可,不需要手把手教他**(函式式)**。
這就是傳統開發和現代框架開發的不同。
使用現代框架開發,可以使用Webpack(當然使用jQuery也可以使用Webpack),可以使用人家提供的現成的腳手架,比方說create-react-app,vue-cli。極大提高了開發的效率,並且可以使用最新的ES6、ES7語法進行開發,在編碼體驗上,就提高了一個檔次。
現在jQuery已經完美的退出了歷史的舞臺,他已經完成了他所要完成的任務。