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 用到了哪些所谓的设计模式（其实就是编程套路）吧。

一、发布订阅模式

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 的区别，你也是很容易就可以答出来的。

最后就引用我之前的一个回答作为结尾来说明学习 jQuery 意义：

https://www.zhihu.com/question/20521802/answer/290354219

说明你
1 精通正则表达式
2 了解闭包
3 了解原型链
4 精通 DOM API
5 了解各种设计模式（事件、Promise、伪重载、装饰器模式等）
6 精通 DOM 事件
7 了解旧浏览器的各种特性（bug）
8 了解模块化
9 了解浏览器渲染原理
10 精通 AJAX
11 了解 HTTP 请求
可以秒杀中国 80\% 的前端。

饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com

本文作者：饥人谷方应杭老师