JQuery老矣，尚能飯否

阿新 • • 發佈：2019-01-04

我的github地址：Github

發展歷程

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

JQuery老矣，尚能飯否

發展歷程