【原創】咱們還須要學jQuery嗎?

引言

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

煙哥，如今還有必要學習jQuery麼？

我明白，如今MVVM框架逐漸佔據了主要市場，不少老項目也逐漸的從jQuery轉向了MVVM架構！
例如，知名網站github在2018-09-06發了一篇文章叫《Removing jQuery from GitHub.com frontend》就提到了，已經改版並放棄了jQuery。

因而一些讀者就有此疑問啦！
so，針對這個問題，想都不用想！
jQuery必須學！

正文

jQuery的那些事

光陰似箭，歲月如梭...時間回到了2005年8月！
一個帥氣的小夥子John Resig(不用說了，比煙哥帥多了，這是我男神)，以下圖所示

他在本身博客上發了一個文章，對Prototype的「Behavior」部分的一些語法改進意見。而後呢沒過多久，他就開發出了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庫。這個庫裏有不少函數，能夠簡化你的DOM
操做，提供一些特效功能...等等！它的目的就是讓一些你不會寫，不想寫，沒時間寫的代碼，那麼庫幫你準備好一些函數接口，讓你調用直接完成功能。

MVVM的框架

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

針對原來的jQuery的幾個優勢
(1)針對jQuery裏便捷的Dom操做
在Vue和React這類MVVM框架中，採用一種綁定元素渲染的概念，基本不用怎麼操做Dom，某些特殊操做除外。

ps:Dom操做不可能徹底消失，不然Vue不必再提供$refs屬性。某些文章中說能夠徹底替代，我不敢苟同。

(2)針對jQuery裏出色的動畫效果
這個有CSS 3能夠取代。另外，還有專門的動畫庫Velocity.js能夠負責這些動畫效果！

(3)針對jQuery便捷的Ajax操做
這個被Axios等庫徹底替代，並且API都差很少，功能也同樣。

除了上面幾點之外。像Vue這類的MVVM框架爲了性能，不讓開發者直接操做DOM樹，引入虛擬DOM的概念。
可能有的讀者不太理解這個虛擬DOM,滿扯一下這個虛擬DOM。
傳統DOM操做有一個問題，假設你一個js方法裏涉及到對十個節點的更新操做，以下所示

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來講明。
以下圖所示(圖片出自浪裏行舟)

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

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)}"
煙哥在寫這段話的時候，特地跑去京東試了一下，返回值以下

至於其餘的博客園啊，巴拉巴拉的，本身去試試，看看返回值是啥!
這種時候你應該要問

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

很簡單，由於jQuery已經佔領了市場。一個產品若是已經趨於穩定，再讓他換另外一套架構又是一筆成本。
正是由於目前市面上仍是大量網站再用jQuery,因此學好jQuery仍是頗有必要的！

(2)jQuery能支持IE8如下版本
因爲Vue之類的框架，只能支持IE8以上的版本。因此老實說，我也不懂如今鼓吹什麼，市面上都是什麼IE8瀏覽器啊。
實際狀況是，如今不少那種事業單位裏頭的古董電腦，不少都仍是IE7，像這種狀況下，用vue之類的MVVM框架顯然不適合。

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

(3)jQuery適合快速入門
曾記得我有一個同事，會點jQuery，就在那吹噓本身全棧。對於這類人，咱們應該是:"啊，你真棒，能夠教教咱們嘛！"沒錯，就是要讓他膨脹，而後讓他無意學習!

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

總結

任何鼓吹jQuery要退出舞臺的文章，都不能信，絕對是忽悠你們。jQuery目前仍是頗有必要學習的。