写在前面
最近在读《JavaScript设计模式与开发实践》，恰逢手头上的工作任务是项目重构。本系列文章就是对本次学习实战的记录和总结。
概念
发布-订阅模式又叫观察者模式。它定义对象间的一种一对多关系，当一个对象的状态发生变化时，所有依赖于它的对象都将得到通知。
举个现实生活里的例子，比如说你非常喜欢一个博客，但不知道它什么时候会更新，所以你就每天甚至每隔几小时去看一下是否有更新。如果用上发布-订阅模式，就相当于你关注了该博客的公众号，它有更新的话，你会立马收到一个推送消息。
基于此，我们应该很容易联想到dom事件、双向绑定、vuex。确实，在JavaScript语言中，DOM事件、Event对象、Proxy对象等都是发布-订阅模式的典型应用。它们都提供有订阅、发布的能力。
应用场景
除了对原生已有实现的使用，书中讲到的“网站登录”和“模块间通信”，都是该模式极佳的应用场景。这些例子很能说明该模式的特点和优势，这里贴一下代码。
当ajax登录成功，需要更新页面数据，我们通常的做法是这样。
login.succ(function(data){
header.setAvatar( data.avatar); // 设置header 模块的头像
nav.setAvatar( data.avatar ); // 设置导航模块的头像
message.refresh(); // 刷新消息列表
cart.refresh(); // 刷新购物车列表});复制代码很明显，它产生了一个耦合。比如我们现在新增了一个收货地址的模块，也依赖用户信息。不可避免的登录模块就得被迫营业，增加一个调用。当模块较多，且是由不同人编写的时候，登录模块被迫营业的次数会越来越多以至于疲于应付。
我们完全可以用发布-订阅模式彻底解决这个问题。
login.succ(function (data) {
login.trigger('loginSucc', data) // 发布登录成功的消息})var header = (function () { // header 模块
login.listen('loginSucc', function (data) {
header.setAvatar(data.avatar);
}); return {setAvatar: function (data) { console.log('设置header 模块的头像');
}
}
})();var nav = (function () { // nav 模块
login.listen('loginSucc', function (data) {
nav.setAvatar(data.avatar);
}); return {setAvatar: function (avatar) { console.log('设置nav 模块的头像');
}
}
})();var address = (function () { // nav 模块
login.listen('loginSucc', function (obj) {
address.refresh(obj);
}); return {refresh: function (avatar) { console.log('刷新收货地址列表');
}
}
})();复制代码实践
DOM事件相信大家都已经很熟悉了，这里就练一下Vue3.0响应式原理的基石：ES6的Proxy对象。
VUE官方在介绍什么是响应性的时候举了一个例子：
let obj = { val1: 2, val2: 3}let sum = obj.val1 + obj.val2console.log(sum) // 5// 改变值obj.val1 = 3// sum是不变的console.log(sum) // 5复制代码当我们更新第一个值，sum并不会被修改。这……天经地义，理所当然，因为JavaScript通常是”非响应的“。
下面咱们就用Proxy+发布-订阅模式，让它变成响应式的。
- 首先基于Proxy，封装一个监听值变化的方法
// 通过Proxy监听对象变化function addObjectListener(data, callback) { return new Proxy(data, {set(target, prop, value) {
data[prop] = value
callback() return value
}
})
}复制代码- 给obj添加监听
let obj = { val1: 2, val2: 3}let sum = obj.val1 + obj.val2console.log(sum) // 5// 改变值obj.val1 = 3// sum结果是不变的console.log(sum) // 5// 添加监听（订阅）obj = addObjectListener(obj, () => {
sum = obj.val1 + obj.val2
})// 改变值obj.val1 = 3// 可以看到结果变化了console.log(sum) // 6obj.val2 = 8console.log(sum) //11复制代码可以看到在添加监听后，我们再次改变值，sum是有跟着改变的。
说回设计模式，这中间addObjectListener就是实例化发布者并添加订阅的过程，set函数触发callback则对应了发布/通知的这么一个动作。
