jQuery老矣，尚能飯否

韓冰發布于2019-05-22 19:25 / 2529人閱讀

摘要：后現代的已經到了暮年，該退出瀏覽器的舞臺了嗎體積過大很多人詬病體積很大，占用資源很多，但是讓我們來看一下最新的的大小。因為這就是個人寫代碼能力的問題了。。。。隨著時代的發展，的市場占有率是越來越少，以后會不會完全被拋棄，這我不知道。

作者：陳大魚頭

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海洋”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。

云服務器 GPU云服務器尚能登錄飯否網 jquery插件源碼jquery jQuery$

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6865.html

每日 30 秒 ? H1 の小秘密

showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 簡介 heading 標簽、SEO、無障礙閱讀 ps: 內容有點多，本來只想講一個點，但是關聯性太強了，所以辛苦大家了。在學習 HTML 標簽的時候，很多教程只告訴你怎么用而沒有講清楚是什么，讓我們一起從 h1 到 h6 開始重新認識 HTM...

blastz 2019-08-23 16:42 評論0 收藏0
Jquery ajax, Axios, Fetch區別之我見

摘要：我們都知道因為同源策略的問題，瀏覽器的請求是可能隨便跨域的一定要有跨域頭或者借助，但是，中可以設置為不跨域，如下所示這樣之后我們會得到一個為的返回。免費幫忙內推阿里等各大IT公司的崗位，有興趣可以帶簡歷加微信angeltune 引言前端技術真是一個發展飛快的領域，我三年前入職的時候只有原生XHR和Jquery ajax，我們還曾被JQuery 1.9版本版本以下不支持大文件請求這個...

YanceyOfficial 2019-08-22 13:49 評論0 收藏0
【董天一】一場IPFS引領下的共享之風正在走向區塊鏈

摘要：網絡啟動開啟了一個共享的新時代，與實體經濟的結合讓項目變得更加有意義，區塊鏈已經走向了我們。直到年，互聯網和區塊鏈終于從概念上走到了一起，就是這場流行起來的共享之風。風險當然，伴隨著區塊鏈項目的毫無疑問是高風險如影隨形。作者簡介：董天一 ,IPFS/Filecoin中國區技術布道人 ,《IPFS指南》作者。畢業于北京大學軟件與微電子學院曾擔任甲骨文亞洲研發中心（中國）數據庫開發工程師...

褰辯話 2019-06-27 18:55 評論0 收藏0