請問現(xiàn)在我還需要學(xué)習(xí) jQuery 嗎?聽你在知乎說 jQuery 已經(jīng)過時了，是不是就不用學(xué)了?

短答案：

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

現(xiàn)在的「新人」依然可以學(xué)習(xí) jQuery 的思想，因?yàn)橐浴感氯恕沟乃?，直接理?Vue / React 的思想難度較大，jQuery 是一個很不錯的中間過渡，因?yàn)?jQuery 也蘊(yùn)含了非常多的編程套路。

但是如果你不想學(xué)，就不學(xué)吧。直接去學(xué) Vue / React 會難一點(diǎn)，但也能學(xué)會。

長答案：

jQuery 當(dāng)然過時了

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

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

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

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

原因如下。

jQuery 教你如何設(shè)計 API

上文說到我一個不會 JS 的人居然能看懂 jQuery 的書，其實(shí)這不是因?yàn)槲覅柡Γ且驗(yàn)?jQuery 的 API 設(shè)計得太人性化了!

舉幾個例子給大家看看：

***個是 jQuery 對事件監(jiān)聽的簡化

// 那時，如果不用 jQuery，監(jiān)聽事件（兼容 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 對應(yīng)的所有元素，用 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]) 
 } 
} 

有沒有發(fā)現(xiàn) jQuery 的代碼一讀就讀懂了?可讀性非常強(qiáng)!

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

為什么有些人代碼水平老是提不高了，就是因?yàn)椴粫燧喿?，不會設(shè)計優(yōu)雅的 API，更不會實(shí)現(xiàn)優(yōu)雅的 API，只會調(diào)用其他庫或框架提供的功能(中槍的舉手)。

而 jQuery 則提供了一個簡單而又經(jīng)典的范例供大家學(xué)習(xí)。

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

一、發(fā)布訂閱模式

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

二、用原型繼承實(shí)現(xiàn)插件系統(tǒng)

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

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

三、事件委托

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

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

四、鏈?zhǔn)秸{(diào)用

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

五、函數(shù)重載(偽)

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

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

六、命名空間

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

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

七、高階函數(shù)

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

$.proxy 接受一個函數(shù)，返回一個新的函數(shù)。

其他就不一一列舉了。

jQuery 的 API 風(fēng)格依然在流行

我們把 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 這么相像呢?

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

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

jQuery 也能做 MVC

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

看看下面的 Backbone 應(yīng)用代碼

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 其實(shí)都是順著 Backbone MVC 的思路慢慢優(yōu)化、改造得來的，如果你提前了解 Backbone 作為知識鋪墊，那么理解 Vue 是非常容易的。如果面試官問你 MVC 和 MVVM 的區(qū)別，你也是很容易就可以答出來的。