發展歷程

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，榮耀！

作者：陳大魚頭 著作權歸原作者所有
來源：https://juejin.im/post/5c2d932c5188254fef2360fa?utm_source=gold_browser_extension

本博認為

原生es3、es5就像走路，jquery就像自行車，vue、react之類的就類似電瓶車，未來還會出現汽車、轎車、高鐵、飛機呢。jq代表一個繁榮的時代，我們期待下一個未來。

閱讀更多 Tingno記前端 的文章

關鍵字: JSON ECMAScript GitHub