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% 的前端。
复制代码