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

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

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

JS更新帶來(lái)的沖擊

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

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

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

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

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

Vue中也是使用此API進(jìn)行元素獲取的：

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

2.方便操作DOM元素的API

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

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

3.動(dòng)畫

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

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

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

4.Ajax操作

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

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

當(dāng)然Fetch在IE上來(lái)說(shuō)，肯定是沒(méi)法用的

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

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

性能問(wèn)題

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

重繪：就是頁(yè)面重新進(jìn)行繪制，比方說(shuō)，修改一個(gè)元素的背景顏色。

回流：一般來(lái)說(shuō)，瀏覽器進(jìn)入頁(yè)面的時(shí)候就已經(jīng)進(jìn)行了一次回流，回流其實(shí)指的就是頁(yè)面重新進(jìn)行排版布局。

既然我們想提高性能，那么就可以先從這兩概念入手，肯定是以最小的代價(jià)更新頁(yè)面是提高性能最好的手段。但可惜的是，jQuery并沒(méi)有做到。為什么這么說(shuō)，請(qǐng)看以下分析:

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

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

因?yàn)檫@時(shí)我們只需要將每一個(gè)li里的文字和a標(biāo)簽里的鏈接修改即可，那顯然是沒(méi)有必要像上面那樣重新再添加一遍li的。

因?yàn)橐粋€(gè)DOM元素，可能包含上百條屬性，這對(duì)性能開(kāi)銷是很大的。

那么現(xiàn)在出現(xiàn)的新概念Virtual DOM（虛擬DOM），就可以解決這個(gè)問(wèn)題。其實(shí)Virtual DOM就是對(duì)真實(shí)DOM節(jié)點(diǎn)的描述，通過(guò)改變Virtual DOM來(lái)以最小變動(dòng)來(lái)改變真實(shí)DOM（Virtual DOM不一定真的比jQuery性能更好）。

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

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

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

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

打個(gè)比方：

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

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

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

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

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

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