我們還需要學jQuery嗎?

引言

最近擼Vue的項目,感覺的有點心累。恰巧近日,有讀者來信,就是想諮詢一下

現在還有必要學習jQuery麼?

我明白,現在MVVM框架逐漸佔據了主要市場,很多老項目也逐漸的從jQuery轉向了MVVM架構!

例如,知名網站github在2018-09-06發了一篇文章叫《Removing jQuery from GitHub.com frontend》就提到了,GitHub已經改版並放棄了jQuery。

於是一些讀者就有此疑問啦!jQuery必須學!

正文

jQuery的那些事

光陰似箭,歲月如梭…時間回到了2005年8月!

640?wx_fmt=png


他在自己博客上發了一個文章,對Prototype的“Behavior”部分的一些語法改進意見。然後呢沒過多久,他就開發出了jQuery,並迅速的風靡全球!
ps:Prototype也是一個JavaScript基礎類庫。

OK,好,我們先來看看Jquery當時能迅速的風靡全球的原因有哪些!(1)出色的DOM操作封裝

var dom = document.getElementById('test');
dom.style.color = 'blue';

用上jQuery後,一行搞定

$('#test').css('color', 'blue');

(2)便捷的Ajax操作

 $.ajax({url:"/guduyan",
    success:function(result){
        //dosomething
    }});

(3)出色的動畫效果<div>元素移動到左邊,直到left屬性等於250像素爲止。

使用Jquery,我們可以這麼寫

$("div").animate({left:'250px'});

總而言之,jQuery作爲一個JavaScript庫。這個庫裏有很多函數,可以簡化你的DOM操作,提供一些特效功能…等等!它的目的就是讓一些你不會寫,不想寫,沒時間寫的代碼,那麼庫幫你準備好一些函數接口,讓你調用直接完成功能。

MVVM的框架

而Vue、React之類,它們是JavaScript框架,引入了組件化、模塊化的概念,採用虛擬DOM取代原來的DOM操作!在Vue這類MVVM框架中,數據和視圖完全分離開來了。對數據進行操作不再需要引用相應的DOM對象,達到了解耦的目的!

針對原來的jQuery的幾個優點(1)針對jquery裏便捷的DOM操作

ps:Dom操作不可能完全消失,否則Vue沒必要再提供$refs屬性。某些文章中說可以完全替代,我不敢苟同。

(2)針對jQuery裏出色的動畫效果

(3)針對jQuery便捷的Ajax操作

除了上面幾點以外。像Vue這類的MVVM框架爲了性能,不讓開發者直接操作DOM樹,引入虛擬DOM的概念。

node1.style.marginTop=50+'px'; 
node2.style.width=50+'px';
node3.style.height=50+'px';
.......10次

那麼,每次DOM改變的時候,都需要在瀏覽器中進行渲染。每一次DOM改變的時候,瀏覽器都需要重新計算CSS,進行佈局處理,然後重新渲染頁面。這都需要時間。

虛擬DOM就是爲了解決這個瀏覽器性能問題而被設計出來的。例如前面的例子,假如一次操作中有10次更新DOM的動作,虛擬DOM不會立即操作DOM,而是將這10次更新的內容保存到本地的一個js對象中,最終將這個js對象一次性attach到DOM樹上,通知瀏覽器去執行繪製工作,這樣可以避免大量的重複工作。畢竟js對象是內存對象,直接操作js對象,比操作真實DOM,快很多。

可能還是比較抽象,我拿vue來說明。

640?wx_fmt=png

如上圖所示,在Vue的底層實現上,Vue將模板編譯成虛擬DOM渲染函數。結合Vue自帶的響應系統,在狀態改變時,Vue能夠智能地計算出重新渲染組件的最小代價並應到DOM操作上。

那麼,實例圖如下

640?wx_fmt=png


OK,上面兩張圖看完,應該能明白Vue這類MVVM框架使用虛擬DOM的好處了。我就不繼續拓展了。因爲再細節下去,我還可以扯一些怎麼寫這種虛擬DOM,如何映射到真實的DOM。考慮到寫了也沒人看,我還是不寫了。

那個那個那個,插播一下!講到這裏,思考一下

面試官:"可以說說你們項目爲什麼用Vue這種MVVM框架麼?"

現在,可以回答這個問題了麼?

接下來我們來談一談,既然MVVM框架這麼好,那爲什麼還要學jQuery呢?

學jQuery的必要性

(1)目前大量網站在用jQuery雖然目前大量文章鼓吹什麼jQuery不行啦,要退出潮流啦!然而,各位隨便去個網站,按f12輸入一個$,大部分還是會返回一個"function(a,b){return new r.fn.init(a,b,h)}"煙哥在寫這段話的時候,特意跑去京東試了一下,返回值如下

640?wx_fmt=png


至於其他的博客園啊,巴拉巴拉的,自己去試試,看看返回值是啥!
這種時候你應該要問

我勒個去,說好的要退出歷史舞臺呢?怎麼這麼多網站還在用jQuery!

很簡單,因爲jQuery已經佔領了市場。一個產品如果已經趨於穩定,再讓他換另一套架構又是一筆成本。正是因爲目前市面上還是大量網站在用jQuery,所以學好jQuery還是很有必要的!

(2)Jquery能支持IE8以下版本由於Vue之類的框架,只能支持IE8以上的版本。所以老實說,我也不懂現在鼓吹什麼,市面上都是什麼IE8瀏覽器啊。實際情況是,現在很多那種事業單位裏頭的古董電腦,很多都還是IE7,像這種情況下,用Vue之類的MVVM框架顯然不適合。

ps:你給政府做項目用Vue試試看,絕對被找茬!掙錢纔是重點!技術是爲金錢服務的!

(3)jQuery適合快速入門曾記得我有一個同事,會點jQuery,就在那吹噓自己全棧。對於這類人,我們應該是:"啊,你真棒,可以教教我們嘛!"沒錯,就是要讓他膨脹,然後讓他無心學習!

當然,這反應出一點,其實jQuery很好上手。當然,如果職業是前端,那當然要懂mvvm,但更多公司甚至不請前端,後端處理,那後端處理其實都是jQuery。

總結

任何鼓吹jQuery要退出舞臺的文章,都不能信,絕對是忽悠大家。jQuery目前還是很有必要學習的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章