為什麼越來越少的人用jQuery

2021-09-02 16:45:30 字數 3017 閱讀 8340

摘要:jquery該退役了。

最早期的開發,大多都使用jquery,它給我們帶來了很多的便利:快速選取元素,方便操作dom元素的api,各個瀏覽器之間完美的相容性,鏈式操作,動畫、ajax等等都是jquery為前端開發人員來帶的好處。為什麼現在越來越少人用了呢?我來分以下幾點,闡述我的想法:

1. 快速選取dom節點

對於大部分使用jquery的開發工程師來說,能夠快速選取dom節點,這個無疑是乙個重要的原因,但是就目前情況來說,這個優勢顯然已經蕩然無存了,為什麼呢?跟大家說兩個api,這兩個api已經非常多的人在用了,就是document.queryselector和document.queryselectorall方法。這兩個方法可以通過傳入css選擇器形式的字串,就可以匹配到預期的dom節點。以下是目前兩個api的相容情況:

從圖中可以看到,這兩個api已經很好的相容各個瀏覽器。

vue中也是使用此api進行元素獲取的:

所以說jquery快速選擇dom節點的優勢已經不存在了。

2. 方便操作dom元素的api

可以方便操作dom元素的api,比如addclass 、removeclass 、toggleclass。現在原生js也得到了支援,這個api叫做classlist。

雖然說ie相容的不太完美,但是最基本該實現也都實現了。

3. 動畫

現在css3動畫技術已經非常的成熟,已經完全可以取代jquery做的動畫,而且還能比jquery的animate方法實現更複雜的動畫,相容性好,效能消耗小,何樂而不為呢?舉個例子吧,比方說如果實現背景顏色過度,css3可以完美的實現,但是jquery就不行。並且現在已經出現了很多優秀的css3動畫庫,大名鼎鼎的animate.css庫大家肯定都有耳聞吧。

4. ajax操作

jquery的ajax操作,為我們省去了相容瀏覽器方面的問題,並且也提供了簡明的api去呼叫get和post,讓開發者從繁瑣的相容性與使用原生api上解脫出來。但是現在,這個優勢也已經非常微小了。不管是原生js的fetch api還是axios。都為我們提供了強大的ajax使用能力,並且axios還有***這個優勢。這時相較而言,jquery的ajax確實已經無法相比了。

當然fetch在ie上來說,肯定是沒法用的

但是已經有了fetch的polyfill方案:github/fetch

這樣只需要引用這乙個小小的js,就可以使用方便的ajax了。相較於jquery,那是小巧很多的。

在原來的開發中,工程師們不會太糾結於效能問題。但是現在不同了,為了提高使用者體現,首要的就是解決瀏覽器繪製所帶了的效能問題。最經典的莫過重繪和回流這兩個概念。

**重繪:**就是頁面重新進行繪製,比方說,修改乙個元素的背景顏色。

**回流:**一般來說,瀏覽器進入頁面的時候就已經進行了一次回流,回流其實指的就是頁面重新進行排版布局。

既然我們想提高效能,那麼就可以先從這兩概念入手,肯定是以最小的代價更新頁面是提高效能最好的手段。但可惜的是,jquery並沒有做到。為什麼這麼說,請看以下分析:

當我們拿到一組新聞資料要渲染到ul標籤裡時,通常我們會先將新聞資料逐條進行字串拼接,緊接著使用$符選擇ul元素,並修改ul的innerhtml的值為拼接好的字串(使用html api),此時完成了第一次渲染。這次頁面進行了重繪(這時必然的),首先不分析第一次的效能好或壞,用下乙個說明將更加有力。

比如說我們這時多了乙個換一換按鈕。在傳統開發模式中,這時的換一換按鈕肯定執行的還是上面的**,獲取元素,修改元素的innerhtml,但是現在問題出現了,就是我們有必要將所有元素重新刪除,再重新新增一遍嗎?答案肯定是不需要(下圖所示,建立乙個元素的代價有多大)。

因為這時我們只需要將每乙個li裡的文字和a標籤裡的鏈結修改即可,那顯然是沒有必要像上面那樣重新再新增一遍li的。因為乙個dom元素,可能包含上百條屬性,這對效能開銷是很大的。

那麼現在出現的新概念 virtual dom(虛擬dom),就可以解決這個問題。其實virtual dom就是對真實dom節點的描述,通過改變virtual dom來以最小變動來改變真實dom(virtual dom不一定真的比jquery效能更好)。

尤雨溪:網上都說操作真實 dom 慢,但測試結果卻比 react 更快,為什麼?

現在國內比較火的react 、vue 、angular框架,都是屬於mv*框架的範疇,其設計特點,主要是以資料為核心。可以說操作dom的事兒,就留給框架去做了。這比傳統jquery開發效率高,**可維護性高,可擴充套件性強、效能好。

打個比方:

我讓jquery去買瓶醬油,給了他100塊錢,這時我們需要告訴他去小賣鋪的路怎麼走、怎麼跟老闆說買啥醬油,買多少錢的醬油,找多少零錢,還得告訴他怎麼回來**(命令式)**。

這時我讓vue去買醬油去了,這時我只需要給他錢,並且告訴他目的地在哪兒,買什麼醬油即可,不需要手把手教他**(函式式)**。

這就是傳統開發和現代框架開發的不同。

現在jquery已經完美的退出了歷史的舞台,他已經完成了他所要完成的任務。

為什麼站長越來越少?

幾年前,如果要想在網路上發展,可以說必須得做 而現在,想要在網路發展,即使沒有 也可以發展,他們寧願選擇 今日頭條等這些第三方平台,也不願意建乙個 還記得五年前,那時候的自己剛接觸網路,看到別人有 我是非常的羨慕,也希望自己可以有乙個 讓自己成一句站長,那樣,就感覺無比的驕傲。後來,我三天的時間建立...

為什麼社交網路上的原創內容越來越少了?

越來越少的 facebook 使用者在社交 上發布個人原創內容 包括你自己寫的狀態和 facebook 有點兒不安。根據接觸到 facebook 相關檔案的科技 the information 的報道 在 2015 年上半年,在 facebook 上分享和發布內容的數量下降了 5.5 其中個人原創資...

以後我給你們上課的機會可能越來越少了

笑話吧,真的很經典,不記下來以後就忘了 個人感覺教授的笑話冷到一定境界了,更為牛x的是,教授講笑話皮不笑肉不笑,並正在向伍傑的方向發展。看來一位超越趙哥並凌駕於張波之上的老師誕生了 1.第一次上教授的課,上課第一句話就是 上節課我們學習了微積分.2.在我看來,學物理是不需要智商的。像你們現在學的數學...