理解发布/订阅
我们先来看一段用来模拟异步请求嵌套的代码
let ajax = function (url, cb) {
// 省略逻辑
}
ajax('/queryOne', function (data1) {
console.log(data1)
ajax('/queryTwo' + data1.someProp, function (data2) {
console.log(data2)
ajax('/queryThree' + data2.someProp, function (data3) {
console.log(data3)
})
})
})
以上三次异步请求中：
- 内层依赖于外层，高耦合
- 不符合阅读习惯
- 不利于调试以及排查定位问题
举个例子，现实中大家都会微信关注公众号，会不定期的收到推送。这个就好比我们订阅了某一类主题，产生消息后，统一推送给所有关注了该公众号的人。
发布/订阅模式，属于设计模式中的行为模式
其优点：
- 解耦
- 可伸缩性
- 高可靠性
- 可测试性
缺点：
- 无法确保消息被触发或者触发了几次
是Promise方案之前的主流方案。
实现发布/订阅
有三个要素：
- 事件发布：触发event上绑定的函数
- 事件监听：注册函数到event上
- 事件池，存放 event 以及预定的函数
class EventCenter {
constructor () {
this.events = {}
}
// 发布事件 触发对应消息的处理函数
publish (eventName, data) {
if (this.events[eventName]) {
// 一个消息会有多个订阅者使用数组存放
this.events[eventName].forEach(callback => {
callback.apply(this, data)
})
}
}
// 订阅事件 绑定函数与消息
subscribe (eventName, callback) {
if (this.events[eventName]) {
this.events[eventName].push(callback)
} else {
this.events[eventName] = [callback]
}
}
// 取消订阅
unSubscribe (eventName, callback) {
if (!this.events.hasOwnProperty(eventName)) return false
// 清除该消息的所有订阅者
if (!callback) this.events[eventName] = []
// 清除该消息的特定订阅者
this.events[eventName] = this.events[eventName].filter(
cb => cb !== callback)
}
}
Node.js中的发布/订阅
在Node.js中，方法默认是异步，同步方法一般会以xxxSync进行区别。
const fs = require('fs');
fs.readFile(__diraname,function(err,data) {
if(err) console.log(error);
console.log('end async read');
})
let data=fs.readFileSync(__diraname);
console.log('end sync read')
EventEmitter 核心就是事件触发与事件监听器功能的封装，在Node.js中主要用于处理异步I/O操作，这个类在Node内置模块以及第三方模块中
const { EventEmitter } = require('events')
const event = new EventEmitter()
event.on('some_event', function (data) {
console.log('some_event 被触发',data)
})
setTimeout(function () {
event.emit('some_event','trigger by setTimeout')
}, 3000)
// some_event 被触发 trigger by setTimeout
常用方法：
-
addListener(event, listener)：为指定事件添加一个监听器到监听器数组的尾部。 -
prependListener(event,listener)：为指定事件添加一个监听器到监听器数组头部。 -
on(event, listener)：是addListener的别名。 -
once(event, listener)：为指定事件注册一个单次监听器，即 监听器最多只会触发一次，触发后立刻解除该监听器。 -
removeListener(event, listener)：移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器。 -
off(event,listener):是removeListener的别名。 -
removeAllListeners([event])：移除所有事件的所有监听器， 如果指定事件，则移除指定事件的所有监听器。 -
listeners(event)：返回指定事件的监听器数组。 -
emit(event, [arg1], [arg2], [...])：按监听器的顺序执行执行每个监听器，如果事件有注册监听返回 true，否则返回 false。
当添加新的监听器时，'newListener' 事件会触发，当监听器被移除时，'removeListener' 事件被触发。
关于error事件
EventEmitter 定义了一个特殊的事件 error，它包含了错误的语义，我们在遇到 异常的时候通常会触发 error 事件。
当 error 被触发时，EventEmitter 规定如果没有响 应的监听器，Node.js 会把它当作异常，退出程序并输出错误信息。
我们一般要为会触发 error 事件的对象设置监听器，避免遇到错误后整个程序崩溃。例如：
const {EventEmitter} = require('events');
const emitter = new EventEmitter();
emitter.on('error',function(err) {
console.log("出现异常")
})
emitter.emit('error');
框架中的发布/订阅
jQuery 的 on 和 trigger
/* 事件订阅*/
$('#app').on('myevent', eventHandler)
// 发布
$('#app').trigger('myevent')
/* 取消订阅*/
$('#app').off('myevent')
Vue 的双向数据绑定
Vue 的父子组件通信 emit
观察者模式？
观察者模式
观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。 —— 维基百科
class Subject {
constructor () {
this.subscribes = []
}
on (subscriber) {
this.subscribes.push(subscriber)
}
off (subscriber) {
this.subscribes = this.subscribes.filter(sub => sub !== subscriber)
}
notify(){
this.subscribes.forEach(sub=>{
sub.update()
})
}
}
class Observer {
update(){
console.log('update...')
}
}
let subject=new Subject();
let ob1=new Observer();
let ob2=new Observer();
subject.on(ob1)
subject.on(ob2)
subject.notify()
订阅/发布模式
在软件架构中，发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。—— 维基百科
区别
- 订阅/发布模式，使用event-center这个中介角色来发布消息和订阅消息，而 观察者模式是由观察者直接通知该消息的订阅者（没有中间商赚差价）
- 在发布者/订阅者模式中，组件与观察者模式完全分离。在观察者模式中，主题和观察者松散耦合。
总结
- 一般流程是，先订阅事件，再触发事件（但可自行实现支持先触发 缓存后，再订阅）
- 订阅/发布模式 与 观察者模式的最大区别就是 引入了 event-center
