請問現在我還需要學習 jQuery 嗎?聽你在知乎說 jQuery 已經過時了，是不是就不用學了?

短答案：

jQuery 還是可以學一學的，學了之后對寫代碼和封裝庫很有幫助。

現在的「新人」依然可以學習 jQuery 的思想，因為以「新人」的水平，直接理解 Vue / React 的思想難度較大，jQuery 是一個很不錯的中間過渡，因為 jQuery 也蘊含了非常多的編程套路。

但是如果你不想學，就不學吧。直接去學 Vue / React 會難一點，但也能學會。

長答案：

jQuery 當然過時了

當年我在大學的技術小組里做 C# 網站開發，需要用到 jQuery 特效，組里的一名小伙伴會用一點 jQuery，很快就用 .animate 做出了讓我嘖嘖稱奇的特效。我覺得 jQuery 好神奇啊，雖然我當時連 JS 都不會。

于是我立馬買了一本《鋒利的 jQuery》，硬看。

什么叫「硬看」呢?因為我不會 JS，而且我并沒有照著書上敲代碼，僅僅使用眼睛「看 jQuery 代碼」。神奇的是——我居然很快看懂了幾乎整本書。以至于那位會用 jQuery 的小伙伴遇到 bug 問我時我能直接給出解答，看起來他并沒有看《鋒利的 jQuery》這本書(笑)。

到了 2018 年，幾乎已經沒有新項目會使用 jQuery 來開發了；即使有，也是一件不值得拿出來炫耀的事情。那為什么我還是建議學習 jQuery 呢?

原因如下。

jQuery 教你如何設計 API

上文說到我一個不會 JS 的人居然能看懂 jQuery 的書，其實這不是因為我厲害，而是因為 jQuery 的 API 設計得太人性化了!

舉幾個例子給大家看看：

***個是 jQuery 對事件監聽的簡化

// 那時，如果不用 jQuery，監聽事件（兼容 IE 6）你要這么寫 
if (button.addEventListener)  
 button.addEventListener('click',fn); 
else if (button.attachEvent) {  
 button.attachEvent('onclick', fn); 
}else { 
 button.onclick = fn; 
} 
// 但是如果你用 jQuery，你只需要這么寫 
$(button).on('click', fn) 

第二個是 jQuery 對元素選擇的簡化

// 如果你想獲取 .nav > .navItem 對應的所有元素，用 jQuery 是這樣寫的 
$('.nav > .navItem') 
// 在 IE 6 上，你得這么寫 
var navItems = document.getElementsByClassName('navItem') 
var result = [] 
for(var i = 0; i < navItems.length; i++){ 
 if(navItems[i].parentNode.className.match(/nav/){ 
 result.push(navItems[i]) 
 } 
} 

有沒有發現 jQuery 的代碼一讀就讀懂了?可讀性非常強!

當時我作為一個新人，每每看到 jQuery 那優雅的 API，都禁不住去思考 jQuery 到底是怎么實現的，我自己能不能實現出來(但我并不推薦看 jQuery 源碼)。本著這樣的想法，我學會了很多編程技巧。

為什么有些人代碼水平老是提不高了，就是因為不會造輪子，不會設計優雅的 API，更不會實現優雅的 API，只會調用其他庫或框架提供的功能(中槍的舉手)。

而 jQuery 則提供了一個簡單而又經典的范例供大家學習。

不信的話我們就來看看 jQuery 用到了哪些所謂的設計模式(其實就是編程套路)吧。

一、發布訂閱模式

var eventHub = $({}) 
eventHub.on('xxx', function(){ console.log('收到') }) 
eventHub.trigger('xxx') 

二、用原型繼承實現插件系統

$.fn.modal = function(){ ... } 
$('#div1').modal() 

Vue 2 的插件也是類似的思路哦

三、事件委托

$('div').on('click', 'span', function(){...}) 

說實話，你在 2018 年找前端讓他寫一個事件委托，我保證 90% 寫出來的代碼都是有「明顯」bug 的。

四、鏈式調用

$('div').text('hi').addClass('red').animate({left: 100}) 

五、函數重載(偽)

$(fn) 
$('div') 
$(div) 
$($(div)) 
$('span', '#scope1') 

你會發現 $ 這個函數的參數可以是函數、字符串、元素和 jQuery 對象，甚至還能接受多個參數，這種重載是怎么做到的?

六、命名空間

// 你的插件在一個 button 上綁定了很多事件 
$button.on('click.plugin', function(){...}) 
$button.on('mouseenter.plugin', function(){...}) 
// 然后你想在某個時刻移除以上所有事件 
$button.off('.plugin') 

如果你不用 jQuery 就很麻煩了。

七、高階函數

var fn2 = $.proxy(fn1, asThis, param1) 

$.proxy 接受一個函數，返回一個新的函數。

其他就不一一列舉了。

jQuery 的 API 風格依然在流行

我們把 jQuery 和 Axios 做一下對比：

$.ajax({url:'/api', method:'get'}) 
$.get('/api').then(fn1,fn2) 
axios({ url: '/api', method: 'get'}) 
axios.get('/api').then(fn1, fn2) 

為什么 2018 年流行的 axios 跟 jQuery.ajax 這么相像呢?

因為 jQuery 的 API 實在太好用了!搞得新庫根本沒法超越它，沒有辦法設計出更簡潔的 API 了。畢竟 jQuery 也是在前端界流行近十年。

所以你學了 jQuery 很容易過渡其他類似的新庫。

jQuery 也能做 MVC

很多人以為前端框架是從 Vue、React 和 Angular 才開始的，其實 jQuery 時代早就有基于 jQuery 的 MV* 庫了，比如著名的 Backbone.js 和 Marionette.js。

看看下面的 Backbone 應用代碼

var TodoView = Backbone.View.extend({ 
    tagName: 'div', 
    template: _.template($('#item-template').html()), 
    events: { 
        'click .toggle': 'xxx', 
    }, 
    initialize: function () { 
        this.listenTo(this.model, 'change', this.render); 
    }, 
    render: function () { 
        if (this.model.changed.id !== undefined) {return; } 
        this.$el.html(this.template(this.model.toJSON())); 
        return this; 
    } 
}); 

AngularJS、Vue 1.x、Vue 2.x 其實都是順著 Backbone MVC 的思路慢慢優化、改造得來的，如果你提前了解 Backbone 作為知識鋪墊，那么理解 Vue 是非常容易的。如果面試官問你 MVC 和 MVVM 的區別，你也是很容易就可以答出來的。