發(fā)展歷程

write less, do more -- John Resig

?在2005年8月的某一天，有一位叫John Resig的美(guo)人，在blog上連發(fā)3個(gè)栗子公開懟了Prototype的Behaviour的代碼冗長(zhǎng)，在那之后沒多久就開源了風(fēng)靡全球的利器JQuery，還兼容了IE5.5，解決了開發(fā)者兼容性處理的心頭大患，之后JQuery就一發(fā)不可收拾，很快就統(tǒng)一了整個(gè)瀏覽器世界...

?隨著時(shí)代的發(fā)展、各個(gè)瀏覽器逐漸趨向統(tǒng)一以及node的出現(xiàn)，興起了許多現(xiàn)代化的工具，例如：react, vue, angularjs，webpack，gulp等可以解放開發(fā)者雙手，加快開發(fā)效率的庫(kù)與框架；并且瀏覽器端的API也日漸完善，ES6改革性的出現(xiàn)，JQuery的代替方案變得越來越多，也因此對(duì)JQuery不滿甚至要完全廢棄JQuery的聲音也越來越多。

后現(xiàn)代的JQuery

JQuery已經(jīng)到了暮年，該退出瀏覽器的舞臺(tái)....了嗎？

體積過大？

?很多人詬病JQuery體積很大，占用資源很多，但是讓我們來看一下最新的JQuery.min.js的大小。

事實(shí)上，最新的JQuery壓縮完之后也就85KB，這點(diǎn)開銷，在現(xiàn)代設(shè)備中都不是什么問題，移動(dòng)設(shè)備4G甚至可以達(dá)到數(shù)MB每秒，PC端就更不用說了，所以說JQuery體積多大，占用多大資源這一條在一般情況下是不成立的！

DOM操作很麻煩？

有人說，dom操作太麻煩，還是用MV**框架直接操作數(shù)組來得快一些....

?現(xiàn)在github已經(jīng)移除了JQuery的依賴，但是并沒有使用任何現(xiàn)代化框架，而是用原生JS去進(jìn)行了重構(gòu)，我個(gè)人認(rèn)為，JQuery被github移除不能說明JQuery不中用了，只能說明是瀏覽器端API以及ECMAScript已經(jīng)日漸完善了。

?對(duì)于常規(guī)的DOM增刪改查，在MV**里只需要操作數(shù)組，是比較方便，但是在JQuery里我們也可以用操作數(shù)據(jù)的思維去實(shí)現(xiàn)，封裝好要處理的DOM結(jié)果，用觀察者模式去監(jiān)聽數(shù)據(jù)源的變動(dòng)從而更改DOM不一樣也可以很快嘛？

面條式代碼很丑？

一長(zhǎng)串的鏈?zhǔn)秸{(diào)用，看著就很煩

?這鍋，JQuery是不背的。。。因?yàn)檫@就是個(gè)人寫代碼能力的問題了。。。。具體代碼就不寫了，在下面兩節(jié)中大家自己判斷吧......

跨域處理的優(yōu)勢(shì)

JQuery在跨域中發(fā)揮的作用

?現(xiàn)代化的前后端協(xié)作通常都會(huì)以跨域的方式進(jìn)行，一般方式都是CORS了，后端開好權(quán)限，按AJAX的方式去請(qǐng)求，真香~

?但是，如果在一些不得已要用JSONP的場(chǎng)合，例如第三方SDK使用，現(xiàn)代的框架處理起來就比較難受了，這里用JQuery就很方便了

const getJSON = async () => { try { const res = await $.ajax({ url, dataType: 'jsonp', jsonp: 'cb', }); } catch (error) { // do something; };};

?單純地用ES6 + JQuery也是可以很好的完成任務(wù)

動(dòng)畫處理

JQuery在動(dòng)畫處理上也發(fā)揮了很大的作用

?雖然現(xiàn)在很多人寫動(dòng)畫會(huì)用CSS3的屬性，Web Animations API或者JSON去寫，但是如果要寫一些step的動(dòng)畫，用JQuery也是很好的選擇

const step1 = () => $.when( dom1.animate({ left, top }, delay), dom2.animate({ width, height }, delay)).promise();const step2 = () => $.when( dom1.animate({ left, top }, delay), dom2.animate({ width, height }, delay)).promise();const move = async () => { await step1(); dom1.delay(500); await step2();};

?其實(shí)這樣也可以把動(dòng)畫寫得很好看

后記

在我心里，JQuery永遠(yuǎn)是個(gè)王者

?我對(duì)技術(shù)沒有偏見，不管是JQuery也好，原生JS也好或者層出不窮的框架，都是工具，只要能好好的完成任務(wù)就是好技術(shù)。

?隨著時(shí)代的發(fā)展，JQuery的市場(chǎng)占有率是越來越少，以后會(huì)不會(huì)完全被拋棄，這我不知道。只是JQuery代表的是一個(gè)時(shí)代，是瀏覽器發(fā)展的見證者，也是我心目中的王者，雖然我以后也很有可能會(huì)完全棄用它，但是它在我心目中的地位是不變的！

?JQuery，榮耀！

作者：陳大魚頭

鏈接：https://juejin.im/post/5ce3b267f265da1bd260c0d7

來源：掘金

總結(jié)

以上是生活随笔為你收集整理的jquery控制只监听数字_jQuery老矣，尚能饭否的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。