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
28 声望
2 粉丝
0 条评论
推荐阅读
Javascript 异步编程(五)Promise
new Promise(..) 构造器 {代码...} resolve(..) 既可能完成 promise,也可能拒绝,要根据传入参数而定。 如果传给 resolve(..) 的是一个非 Promise、非 thenable 的立即值,这个 promise 就会用这个值完成。

王大山阅读 1.7k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.4k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs40阅读 6.4k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.5k评论 6

28 声望
2 粉丝
宣传栏