发布者与订阅者模式、观察者模式

最新推荐文章于 2025-08-02 14:20:54 发布

原创最新推荐文章于 2025-08-02 14:20:54 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

js学习专栏收录该内容

3 篇文章

订阅专栏

本文探讨了JavaScript中的发布订阅者模式和观察者模式。通过一个例子展示了如何使用这两种模式来处理文件读取操作的回调，当文件读取完成后通知订阅者。文章还介绍了观察者模式的基本原理，即被观察者状态改变时通知观察者。最后，通过一个具体的场景展示了如何创建和使用观察者对象来监听和响应被观察者（如小宝宝）的状态变化。

//发布订阅者模式 on emit
//on 就是把一些函数维护到一个数组中 发布者
//emit 就是让数组中的方法依次执行 订阅者
let fs = require('fs')
let event={
  arr:[],
  on(fn){
    this.arr.push(fn)
  },
  emit(){
    this.arr.forEach(fn=>fn())
  }
}
event.on(function(){
console.log('读取完毕')
})

let school={}
fs.readFile('./name.txt','utf8',function(err,data){
  school.name=data;
  event.emit();
})
fs.readFile('./age.txt','utf8',function(err,data){
  school.age=data;
  event.emit();
})

//观察者模式 有观察者 有被观察者 被观察者的状态发生变化需要通知观察者，我变化了
//内部也是基于发布订阅模式 收集观察者 状态变化后要通知观察者

class Subject{
  //被观察者
  constructor(name){
    this.name=name
    this.state=''
    this.observers=[]
  }
  attach(o){
    this.observers.push(o)
  }
  setState(newState){
    this.state=newState
    this.observers.forEach(o=>o.update(this))
  }
}
class Observer{
  //观察者
  constructor(name){
   this.name=name
  }
  update(baby){
    console.log('被通知'+this.name+'状态'+baby.state)
  }
}

let baby=new Subject('小宝宝')
let dad=new Observer('爸爸')
let mother =new Observer('妈妈')
baby.attach(dad)
baby.attach(mother)
baby.setState('哭了')