JQuery老矣,尚能飯否

陳大魚頭發表於2019-01-03

發展歷程

write less, do more -- John Resig

​ 在2005年8月的某一天,有一位叫John Resig的美(guo)人,在blog上連發3個栗子公開懟了PrototypeBehaviour的程式碼冗長,在那之後沒多久就開源了風靡全球的利器JQuery,還相容了IE5.5,解決了開發者相容性處理的心頭大患,之後JQuery就一發不可收拾,很快就統一了整個瀏覽器世界...

​ 隨著時代的發展、各個瀏覽器逐漸趨向統一以及node的出現,興起了許多現代化的工具,例如:react, vue, angularjswebpackgulp等可以解放開發者雙手,加快開發效率的庫與框架;並且瀏覽器端的API也日漸完善,ES6改革性的出現,JQuery的代替方案變得越來越多,也因此對JQuery不滿甚至要完全廢棄JQuery的聲音也越來越多。

後現代的JQuery

JQuery已經到了暮年,該退出瀏覽器的舞臺....了嗎?

體積過大?

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

jquery_min_size

事實上,最新的JQuery壓縮完之後也就85KB,這點開銷,在現代裝置中都不是什麼問題,移動裝置4G甚至可以達到數MB每秒,PC端就更不用說了,所以說JQuery體積多大,佔用多大資源這一條在一般情況下是不成立的!

DOM操作很麻煩?

有人說,dom操作太麻煩,還是用MV**框架直接運算元組來得快一些....

​ 現在github已經移除了JQuery的依賴,但是並沒有使用任何現代化框架,而是用原生JS去進行了重構,我個人認為,JQuerygithub移除不能說明JQuery不中用了,只能說明是瀏覽器端API以及ECMAScript已經日漸完善了。

​ 對於常規的DOM增刪改查,在MV**裡只需要運算元組,是比較方便,但是在JQuery裡我們也可以用運算元據的思維去實現,封裝好要處理的DOM結果,用觀察者模式去監聽資料來源的變動從而更改DOM不一樣也可以很快嘛?

麵條式程式碼很醜?

一長串的鏈式呼叫,看著就很煩。

noodles

​ 這鍋,JQuery是不背的。。。因為這就是個人寫程式碼能力的問題了。。。。

vue

跨域處理的優勢

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

​ 我對技術沒有偏見,不管是JQuery也好,原生JS也好或者層出不窮的框架,都是工具,只要能好好的完成任務就是好技術。

​ 隨著時代的發展,JQuery的市場佔有率是越來越少,以後會不會完全被拋棄,這我不知道。只是JQuery代表的是一個時代,是瀏覽器發展的見證者,也是我心目中的王者,雖然我以後也很有可能會完全棄用它,但是它在我心目中的地位是不變的!

JQuery,榮耀!

相關文章