jQuery都過時了？對寫代碼和封裝庫還是很有幫助的

請問現(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)沒有新項(xià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)聽事件(兼容IE6)你要這么寫if(button.addEventListener)button.addEventListener('click',fn);elseif(button.attachEvent){button.attachEvent('onclick',fn);}else{button.onclick=fn;}//但是如果你用jQuery，你只需要這么寫$(button).on('click',fn)第二個是 jQuery 對元素選擇的簡化

//如果你想獲取.nav>.navItem對應(yīng)的所有元素，用jQuery是這樣寫的$('.nav>.navItem')//在IE6上，你得這么寫varnavItems=document.getElementsByClassName('navItem')varresult=[]for(vari=0;i 當(dāng)時我作為一個新人，每每看到 jQuery 那優(yōu)雅的 API，都禁不住去思考 jQuery 到底是怎么實(shí)現(xiàn)的，我自己能不能實(shí)現(xiàn)出來(但我并不推薦看 jQuery 源碼)。本著這樣的想法，我學(xué)會了很多編程技巧。

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

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

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

一、發(fā)布訂閱模式vareventHub=$({})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ù)varfn2=$.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)用代碼

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