- 首發:krissarea.gitee.io
- 作者:陳大魚頭
- github: KRISACHAN
發展歷程
write less, do more -- John Resig
在2005年8月的某一天,有一位叫John Resig
的美(guo)人,在blog上連發3個栗子公開懟了Prototype
的Behaviour
的程式碼冗長,在那之後沒多久就開源了風靡全球的利器JQuery,還相容了IE5.5,解決了開發者相容性處理的心頭大患,之後JQuery就一發不可收拾,很快就統一了整個瀏覽器世界...
隨著時代的發展、各個瀏覽器逐漸趨向統一以及node
的出現,興起了許多現代化的工具,例如:react
, vue
, angularjs
,webpack
,gulp
等可以解放開發者雙手,加快開發效率的庫與框架;並且瀏覽器端的API也日漸完善,ES6改革性的出現,JQuery
的代替方案變得越來越多,也因此對JQuery
不滿甚至要完全廢棄JQuery
的聲音也越來越多。
後現代的JQuery
JQuery
已經到了暮年,該退出瀏覽器的舞臺....了嗎?
體積過大?
很多人詬病JQuery
體積很大,佔用資源很多,但是讓我們來看一下最新的JQuery.min.js
的大小。
事實上,最新的JQuery
壓縮完之後也就85KB,這點開銷,在現代裝置中都不是什麼問題,移動裝置4G甚至可以達到數MB每秒,PC端就更不用說了,所以說JQuery體積多大,佔用多大資源這一條在一般情況下是不成立的!
DOM操作很麻煩?
有人說,
dom
操作太麻煩,還是用MV**
框架直接運算元組來得快一些....
現在github
已經移除了JQuery
的依賴,但是並沒有使用任何現代化框架,而是用原生JS
去進行了重構,我個人認為,JQuery
被github
移除不能說明JQuery
不中用了,只能說明是瀏覽器端API以及ECMAScript
已經日漸完善了。
對於常規的DOM增刪改查,在MV**
裡只需要運算元組,是比較方便,但是在JQuery
裡我們也可以用運算元據的思維去實現,封裝好要處理的DOM結果,用觀察者模式去監聽資料來源的變動從而更改DOM不一樣也可以很快嘛?
麵條式程式碼很醜?
一長串的鏈式呼叫,看著就很煩。
這鍋,JQuery
是不背的。。。因為這就是個人寫程式碼能力的問題了。。。。
跨域處理的優勢
JQuery
在跨域中發揮的作用
現代化的前後端協作通常都會以跨域的方式進行,一般方式都是CORS
了,後端開好許可權,按AJAX的方式去請求,真香~
但是,如果在一些不得已要用JSONP
的場合,例如第三方SDK使用,現代的框架處理起來就比較難受了,這裡用JQuery就很方便了
const getJSON = async () => {
try {
const res = await $.ajax({
url,
dataType: 'jsonp',
jsonp: 'cb',
});
} catch (error) {
// do something;
};
};
複製程式碼
單純地用ES6
+ JQuery
也是可以很好的完成任務
動畫處理
JQuery
在動畫處理上也發揮了很大的作用
雖然現在很多人寫動畫會用CSS3
的屬性,Web Animations API
或者JSON
去寫,但是如果要寫一些step的動畫,用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();
};
複製程式碼
其實這樣也可以把動畫寫得很好看
後記
在我心裡,
JQuery
永遠是個王者
我對技術沒有偏見,不管是JQuery
也好,原生JS
也好或者層出不窮的框架,都是工具,只要能好好的完成任務就是好技術。
隨著時代的發展,JQuery
的市場佔有率是越來越少,以後會不會完全被拋棄,這我不知道。只是JQuery
代表的是一個時代,是瀏覽器發展的見證者,也是我心目中的王者,雖然我以後也很有可能會完全棄用它,但是它在我心目中的地位是不變的!
JQuery
,榮耀!