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

以上三次异步请求中:

  • 内层依赖于外层,高耦合
  • 不符合阅读习惯
  • 不利于调试以及排查定位问题
举个例子,现实中大家都会微信关注公众号,会不定期的收到推送。这个就好比我们订阅了某一类主题,产生消息后,统一推送给所有关注了该公众号的人。

发布/订阅模式,属于设计模式中的行为模式
image_11.png

其优点:

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

订阅/发布模式

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

区别

image_13.png

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

总结

  1. 一般流程是,先订阅事件,再触发事件(但可自行实现支持先触发 缓存后,再订阅)
  2. 订阅/发布模式 与 观察者模式的最大区别就是 引入了 event-center
阅读 829
25 声望
1 粉丝
0 条评论
你知道吗?

25 声望
1 粉丝
文章目录
宣传栏