九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

本文經(jīng)授權(quán)轉(zhuǎn)載

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

JS更新帶來的沖擊

1.快速選取DOM節(jié)點

對于大部分使用jQuery的開發(fā)工程師來說，能夠快速選取DOM節(jié)點，這個無疑是一個重要的原因，但是就目前情況來說，這個優(yōu)勢顯然已經(jīng)蕩然無存了，為什么呢？

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

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

從圖中可以看到，這兩個API已經(jīng)很好的兼容各個瀏覽器。

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

所以說jQuery快速選擇DOM節(jié)點的優(yōu)勢已經(jīng)不存在了。

2.方便操作DOM元素的API

可以方便操作DOM元素的API，比如addClass 、removeClass 、toggleClass?，F(xiàn)在原生JS也得到了支持，這個API叫做classList。

雖然說IE兼容的不太完美，但是最基本該實現(xiàn)也都實現(xiàn)了。

3.動畫

現(xiàn)在CSS3動畫技術(shù)已經(jīng)非常的成熟，已經(jīng)完全可以取代jQuery做的動畫，而且還能比jQuery的Animate方法實現(xiàn)更復雜的動畫，兼容性好，性能消耗小，何樂而不為呢？

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

并且現(xiàn)在已經(jīng)出現(xiàn)了很多優(yōu)秀的CSS3動畫庫，大名鼎鼎的Animate.css庫大家肯定都有耳聞吧。

4.Ajax操作

jQuery的ajax操作，為我們省去了兼容瀏覽器方面的問題，并且也提供了簡明的API去調(diào)用get和post，讓開發(fā)者從繁瑣的兼容性與使用原生API上解脫出來。但是現(xiàn)在，這個優(yōu)勢也已經(jīng)非常微小了。

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

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

但是已經(jīng)有了Fetch的Polyfill方案：github/fetch

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

性能問題

在原來的開發(fā)中，工程師們不會太糾結(jié)于性能問題。但是現(xiàn)在不同了，為了提高用戶體現(xiàn)，首要的就是解決瀏覽器繪制所帶了的性能問題。最經(jīng)典的莫過重繪和回流這兩個概念。

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

回流：一般來說，瀏覽器進入頁面的時候就已經(jīng)進行了一次回流，回流其實指的就是頁面重新進行排版布局。

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

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

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

因為這時我們只需要將每一個li里的文字和a標簽里的鏈接修改即可，那顯然是沒有必要像上面那樣重新再添加一遍li的。

因為一個DOM元素，可能包含上百條屬性，這對性能開銷是很大的。

那么現(xiàn)在出現(xiàn)的新概念Virtual DOM（虛擬DOM），就可以解決這個問題。其實Virtual DOM就是對真實DOM節(jié)點的描述，通過改變Virtual DOM來以最小變動來改變真實DOM（Virtual DOM不一定真的比jQuery性能更好）。

那么，網(wǎng)上都說操作真實 DOM 慢，但測試結(jié)果卻比 React 更快，為什么？

現(xiàn)代框架對jQuery的影響

現(xiàn)在國內(nèi)比較火的React 、Vue 、Angular框架，都是屬于MV*框架的范疇，其設計特點，主要是以數(shù)據(jù)為核心。

可以說操作DOM的事兒，就留給框架去做了。這比傳統(tǒng)jQuery開發(fā)效率高，代碼可維護性高，可擴展性強、性能好。

打個比方：

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

這時我讓Vue去買醬油去了，這時我只需要給他錢，并且告訴他目的地在哪兒，買什么醬油即可，不需要手把手教他（函數(shù)式）。

這就是傳統(tǒng)開發(fā)和現(xiàn)代框架開發(fā)的不同。

使用現(xiàn)代框架開發(fā)，可以使用Webpack（當然使用jQuery也可以使用Webpack）,可以使用人家提供的現(xiàn)成的腳手架，比方說create-react-app，vue-cli。

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

現(xiàn)在jQuery已經(jīng)完美地退出了歷史的舞臺，它已經(jīng)完成了它所要完成的任務。