jQuery 都過期了，那我還學它幹嗎？

今天飢人谷的新生問我：請問如今我還須要學習 jQuery 嗎？聽你在知乎說 jQuery 已通過時了，是否是就不用學了？

短答案：

jQuery 仍是能夠學一學的，學了以後對寫代碼和封裝庫頗有幫助。

如今的「新人」依然能夠學習 jQuery 的思想，由於以「新人」的水平，直接理解 Vue / React 的思想難度較大，jQuery 是一個很不錯的中間過渡，由於 jQuery 也蘊含了很是多的編程套路。

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

長答案：

---

jQuery 固然過期了

距離我上次在項目中使用 jQuery，可能已經快兩年時間了（除去上課時演示功能時用 jQuery）。回想我學習 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(/\bnav\b/){
    result.push(navItems[i])
  }
}
複製代碼

有沒有發現 jQuery 的代碼一讀就讀懂了？可讀性很是強！

當時我做爲一個新人，往往看到 jQuery 那優雅的 API，都禁不住去思考 jQuery 究竟是怎麼實現的，我本身能不能實現出來（但我並不推薦看 jQuery 源碼）。本着這樣的想法，我學會了不少編程技巧。

爲何有些人代碼水平總是提不高了，就是由於不會造輪子，不會設計優雅的 API，更不會實現優雅的 API，只會調用其餘庫或框架提供的功能（中槍的舉手）。

而 jQuery 則提供了一個簡單而又經典的範例供你們學習。

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

1、發佈訂閱模式

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

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

$.fn.modal = function(){ ... }
$('#div1').modal()
Vue 2 的插件也是相似的思路哦
複製代碼

3、事件委託

$('div').on('click', 'span', function(){...})
複製代碼

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

4、鏈式調用

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

5、函數重載（僞）

$(fn)
$('div')
$(div)
$($(div))
$('span', '#scope1')
複製代碼

你會發現 $ 這個函數的參數能夠是函數、字符串、元素和 jQuery 對象，甚至還能接受多個參數，這種重載是怎麼作到的？

6、命名空間

// 你的插件在一個 button 上綁定了不少事件
$button.on('click.plugin', function(){...})
$button.on('mouseenter.plugin', function(){...})
// 而後你想在某個時刻移除以上全部事件
$button.off('.plugin')
複製代碼

若是你不用 jQuery 就很麻煩了。

7、高階函數

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 的區別，你也是很容易就能夠答出來的。

最後就引用我以前的一個回答做爲結尾來講明學習 jQuery 意義：

徹底理解jQuery源代碼，在前端行業算什麼水平？

說明你

1 精通正則表達式
2 瞭解閉包
3 瞭解原型鏈
4 精通 DOM API
5 瞭解各類設計模式（事件、Promise、僞重載、裝飾器模式等）
6 精通 DOM 事件
7 瞭解舊瀏覽器的各類特性（bug）
8 瞭解模塊化
9 瞭解瀏覽器渲染原理
10 精通 AJAX
11 瞭解 HTTP 請求

能夠秒殺中國 80% 的前端。
複製代碼