之前写过一篇分析发布订阅模式的文章，文章中代码比较多，看起来比较费劲不好理解。决定用看得见且体验的到的方式重新表达其中发布、订阅、取消订阅等操作和关系，如有不足请大家指出，互相学习。
本文案例访问地址：https://jiunacaikang.github.io/subpub/ ，首先来波动图演示：
创建发布者和订阅者
点击创建，输入名字，点确定，分别创建发布者和订阅者，鼠标hover到订阅者时展示订阅和解订的功能按钮。
订阅者订阅消息
点击订阅者的订阅按钮，选择要订阅的对象，然后选择或者输入要订阅的消息，就可以完成订阅操作。
发布者发布消息
点击发布者的发布消息按钮，选择要发布的消息，并输入发布的内容，点确定。灰色的消息按钮变绿表示发布的是这个消息，此消息下面的订阅者列表闪动，表示此消息下的订阅者收到发布者发布的消息。打开控制台可以看到收到消息的具体信息。
订阅者解除订阅消息
点击订阅者的解订按钮，选择要取消的对象，并选择要取消订阅的消息，点确定，则移除此订阅者对发布者某个消息的订阅关系。如果这个消息下没有订阅者了，就删除这个消息列表。
订阅者重新订阅消息
如果一个订阅者重新订阅了某个发布者的某条消息，则抖动这条消息列表中的此订阅者，表示重新订阅。之后发布消息在开控制台可以看到订阅的时间（_timeListen）已经变更。
订阅空消息转为观察者模式
如果订阅时的消息为空，则转为观察者模式，进入观察者列表，只要发布者发布消息，都会触发观察者列表，如果此订阅者之前已经订阅了其他消息，则取消对此消息订阅，因为单独的消息订阅已经没有意义了。
观察者和发布订阅模式同时存在时
如果观察者列表有观察者，边框会变绿，此时发布任何消息观察者列表都会闪动，表示触发了观察者列表回调，之后会判断这次发布的消息下面是否有订阅者，有的话就触发订阅者列表回调。
解除所有订阅
取消订阅时消息传空，就解除此订阅者对发布者的所有订阅关系，包括观察者模式。
总结：订阅者、发布者结构以及问题分析
分析图例：
由上面的演示动图和分析图例可以得出以下几个简单的结论：
1、订阅者拥有订阅和取消订阅的能力
2、发布者有消息订阅者列表和观察者列表
3、发布者具有发布消息的能力
（1）订阅/解订分别取名叫listen和unlisten，则构造器基本关系如下：
class Subscribe {
constructor(name = 'subscriber') {
this.name = name
}
/**
* 订阅
* @param {Object}
*/
listen({
publisher,//订阅的是哪个发布者
message,//订阅的消息
handler//收到消息后的处理方法
}) {
//添加到publisher的察者列表或者观消息订阅者列表
//*************************************************
//************问题1:应该怎么添加呢？****************
//*************************************************
}
/**
* 取消订阅
* @param {Publisher} publisher 发布者
* @param {String} message 消息
*/
unlisten(publisher, message) {
//取消对publisher消息订阅
//*************************************************
//************问题2:应该怎么取消呢？****************
//*************************************************
}
}
（2）发布者有消息订阅者列表和观察者列表，因为被订阅事件可以有多个，所以放在messageMap中作为key来存储消息的订阅者列表。
class Publish {
constructor(name = 'publisher') {
this.messageMap = {} //消息事件订阅者集合对象
this.watcherList = [] //观察者列表
this.name = name
}
}
（3）发布者有发布消息的能力
class Publish {
/**
* 发布消息通知
* @param {String} message 消息
* @param {Object} info 内容
*/
publish(message, info) {
//1、通知观察者列表
//2、通知对应消息下的订阅者列表
}
}
（4）上面留下了两个问题，怎么订阅和怎么取消订阅？订阅实际上就是让发布者把订阅者加入消息订阅者列表或者观察者列表，取消订阅则是移除，由此可知这是发布者的能力，如下：
class Publish {
/**
* 添加消息订阅者
* @param {Subscribe} subscriber 订阅者
* @param {String} message 消息
*/
addListener(subscriber, message) {
//一通操作，把subscriber添加到对应列表
}
/**
* 删除消息订阅者
* @param {Subscribe} subscriber
* @param {String} message
*/
removeListener(subscriber, message) {
//一通操作，再把subscriber从对应列表移除
}
}
发布者具体是怎么添加和移除订阅者的逻辑细节可以在演示用例中的源码(subpub.js)中查看。至此，对发布订阅（观察者：一种特殊的发布订阅）设计模式的分析就结束了，我们只要能透彻的理解订阅和取消订阅以及发布消息的过程，就很容易理解这种设计模式的逻辑，希望本篇内容能对大家理解这种设计模式有所帮助。
网友评论