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()
复制代码

3.事件委托

$('div').on('click', 'span', function(){...})
复制代码

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')
复制代码

7.高阶函数

 var fn2 = $.proxy(fn1, asThis, param1)
复制代码

$.proxy 接受一个函数，返回一个新的函数。

其他就不一一列举了。

jQuery 的 API 风格依然在流行

我们把 jQuery.ajax 和 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 很容易过渡其他类似的新库。

AngularJS、Vue 1.x、Vue 2.x 其实都是顺着 Backbone MVC 的思路慢慢优化、改造得来的，如果你提前了解 Backbone 作为知识铺垫，那么理解 Vue 是非常容易的。如果面试官问你 MVC 和 MVVM 的区别，你也是很容易就可以答出来的。