Javascript 异步编程（四）发布-订阅

理解发布/订阅

我们先来看一段用来模拟异步请求嵌套的代码

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)
    })
  })
})

以上三次异步请求中：

• 内层依赖于外层，高耦合
• 不符合阅读习惯
• 不利于调试以及排查定位问题

举个例子，现实中大家都会微信关注公众号，会不定期的收到推送。这个就好比我们订阅了某一类主题，产生消息后，统一推送给所有关注了该公众号的人。

发布/订阅模式，属于设计模式中的行为模式

其优点：

1. 解耦
2. 可伸缩性
3. 高可靠性
4. 可测试性

缺点：

• 无法确保消息被触发或者触发了几次

是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 的父子组件通信 $on/$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()

订阅/发布模式

在软件架构中，发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。—— 维基百科

区别

1. 订阅/发布模式，使用event-center这个中介角色来发布消息和订阅消息，而 观察者模式是由观察者直接通知该消息的订阅者（没有中间商赚差价）
2. 在发布者/订阅者模式中，组件与观察者模式完全分离。在观察者模式中，主题和观察者松散耦合。

总结

1. 一般流程是，先订阅事件，再触发事件（但可自行实现支持先触发 缓存后，再订阅）
2. 订阅/发布模式 与 观察者模式的最大区别就是 引入了 event-center