?2016-2026 Matools All rights reserved,
粵ICP備17059708號
引言
最近擼Vue的項目，感覺的有點心累。恰巧近日，有讀者來信，就是想咨詢一下
煙哥，現(xiàn)在還有必要學習jQuery么？
我明白，現(xiàn)在MVVM框架逐漸占據(jù)了主要市場，很多老項目也逐漸的從jQuery轉向了MVVM架構！
例如，知名網(wǎng)站github在2018-09-06發(fā)了一篇文章叫《Removing jQuery from GitHub.com
frontend》就提到了，已經(jīng)改版并放棄了jQuery。
于是一些讀者就有此疑問啦！
so，針對這個問題，想都不用想！
jQuery必須學！
正文
jQuery的那些事
光陰似箭，歲月如梭...時間回到了2005年8月！
一個帥氣的小伙子John Resig(不用說了，比煙哥帥多了，這是我男神)，如下圖所示
他在自己博客上發(fā)了一個文章，對Prototype的“Behavior”部分的一些語法改進意見。然后呢沒過多久，他就開發(fā)出了jQuery，并迅速的風靡全球！
ps：Prototype也是一個JavaScript基礎類庫。
OK，好，我們先來看看jQuery當時能迅速的風靡全球的原因有哪些！
我想了想，無外乎下面三條
(1)出色的DOM操作封裝
例如原來你要修改樣式，原生JavaScript是這么寫的
var dom = document.getElementById('test'); dom.style.color = 'blue';
用上jQuery后，一行搞定
$('#test').css('color', 'blue');
(2)便捷的Ajax操作
原生的JavaScript在ajax請求上的代碼，嗯，我就不貼代碼了！具體多復雜，懂前端的人都明白。
用上了jQuery后，簡潔了不少！如下所示
$.ajax({url:"/guduyan", success:function(result){ //dosomething }});
(3)出色的動畫效果
例如，我們需要把 一個<div>元素移動到左邊，直到left屬性等于250像素為止。
使用jQuery，我們可以這么寫
$("div").animate({left:'250px'});
總而言之，jQuery作為一個JavaScript庫。這個庫里有很多函數(shù)，可以簡化你的DOM
操作，提供一些特效功能...等等！它的目的就是讓一些你不會寫，不想寫，沒時間寫的代碼，那么庫幫你準備好一些函數(shù)接口，讓你調用直接完成功能。
MVVM的框架
而Vue、React之類，它們是JavaScript框架
，引入了組件化、模塊化的概念，采用虛擬DOM取代原來的DOM操作！在Vue這類MVVM框架中，數(shù)據(jù)和視圖完全分離開來了。對數(shù)據(jù)進行操作不再需要引用相應的DOM對象，達到了解耦的目的！
針對原來的jQuery的幾個優(yōu)點
(1)針對jQuery里便捷的Dom操作
在Vue和React這類MVVM框架中，采用一種綁定元素渲染的概念，基本不用怎么操作Dom，某些特殊操作除外。
ps:Dom操作不可能完全消失，否則Vue沒必要再提供$refs屬性。某些文章中說可以完全替代，我不敢茍同。
(2)針對jQuery里出色的動畫效果
這個有CSS 3可以取代。另外，還有專門的動畫庫Velocity.js可以負責這些動畫效果！
(3)針對jQuery便捷的Ajax操作
這個被Axios等庫完全替代，而且API都差不多，功能也一樣。
除了上面幾點以外。像Vue這類的MVVM框架為了性能，不讓開發(fā)者直接操作DOM樹，引入虛擬DOM的概念。
可能有的讀者不太理解這個虛擬DOM,滿扯一下這個虛擬DOM。
傳統(tǒng)DOM操作有一個問題，假設你一個js方法里涉及到對十個節(jié)點的更新操作，如下所示
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樹上，通知瀏覽器去執(zhí)行繪制工作，這樣可以避免大量的重復工作。畢竟js對象是內存對象，直接操作js對象，比操作真實DOM，快很多。
可能還是比較抽象，我拿vue來說明。
如下圖所示(圖片出自浪里行舟)
如上圖所示，在Vue的底層實現(xiàn)上，Vue將模板編譯成虛擬DOM渲染函數(shù)。結合Vue自帶的響應系統(tǒng)，在狀態(tài)改變時，Vue能夠智能地計算出重新渲染組件的最小代價并應到DOM操作上。
那么，實例圖如下
OK，上面兩張圖看完，應該能明白Vue這類MVVM框架使用虛擬DOM的好處了。我就不繼續(xù)拓展了。因為
再細節(jié)下去，我還可以扯一些怎么寫這種虛擬DOM，如何映射到真實的DOM?？紤]到寫了也沒人看，我還是不寫了。
那個那個那個，插播一下?。。。?br> 講到這里，思考一下
面試官:"可以說說你們項目為什么用Vue這種MVVM框架么？"
現(xiàn)在，會答了么？
接下來我們來談一談，既然MVVM框架這么好，那為什么還要學jQuery呢？
學jQuery的必要性
(1)目前大量網(wǎng)站在用jQuery
雖然目前大量文章鼓吹什么jQuery不行啦，要退出潮流啦！
然而，各位隨便去個網(wǎng)站，按f12輸入一個$，大部分還是會返回一個
"function(a，b){return new r.fn.init(a,b,h)}"
煙哥在寫這段話的時候，特意跑去京東試了一下，返回值如下
至于其他的博客園啊，巴拉巴拉的，自己去試試，看看返回值是啥!
這種時候你應該要問
我勒個去，說好的要退出歷史舞臺呢？怎么這么多網(wǎng)站還在用jQuery!
很簡單，因為jQuery已經(jīng)占領了市場。一個產(chǎn)品如果已經(jīng)趨于穩(wěn)定，再讓他換另一套架構又是一筆成本。
正是因為目前市面上還是大量網(wǎng)站再用jQuery,所以學好jQuery還是很有必要的！
(2)jQuery能支持IE8以下版本
由于Vue之類的框架，只能支持IE8以上的版本。所以老實說，我也不懂現(xiàn)在鼓吹什么，市面上都是什么IE8瀏覽器啊。
實際情況是，現(xiàn)在很多那種事業(yè)單位里頭的古董電腦，很多都還是IE7，像這種情況下，用vue之類的MVVM框架顯然不適合。
ps:你給政府坐項目用Vue試試看，絕對被找茬!掙錢才是重點!技術是為金錢服務的！
(3)jQuery適合快速入門
曾記得我有一個同事，會點jQuery，就在那吹噓自己全棧。對于這類人，我們應該是:"啊，你真棒，可以教教我們嘛！"沒錯，就是要讓他膨脹，然后讓他無心學習!
當然，這反應出一點，其實jQuery很好上手。當然，如果職業(yè)是前端，那當然要懂mvvm，但更多公司甚至不請前端，后端處理，那后端處理其實都是jQuery。
總結
任何鼓吹jQuery要退出舞臺的文章，都不能信，絕對是忽悠大家。jQuery目前還是很有必要學習的。
熱門工具 換一換