jQuery老矣，尚能飯否

• 做者：陳大魚頭
• 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，榮耀！

若是你、喜歡探討技術，或者對本文有任何的意見或建議，你能夠掃描下方二維碼，關注微信公衆號「 魚頭的Web海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。