简单实现 手写 观察者模式

观察者(Observer)模式的定义:指多个对象间存在一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式,它是对象行为型模式。

观察者模式是一种对象行为型模式,其主要优点如下。

  1. 降低了目标与观察者之间的耦合关系,两者之间是抽象耦合关系。符合依赖倒置原则。
  2. 目标与观察者之间建立了一套触发机制。

它的主要缺点如下。

  1. 目标与观察者之间的依赖关系并没有完全解除,而且有可能出现循环引用。
  2. 当观察者对象很多时,通知的发布会花费很多时间,影响程序的效率。

实现思路:
观察者: 1. 定义改变事件
被观察者: 1.存储观察者 2.修改观察者状态事件并触发观察者的改变事件

class Observer{  //观察者
  constructor(name){
    this.name = name
  }
	//每次改变的时候  打印 name newState
  update(newState){
    console.log(`${this.name}say:${newState}`)
  }
}
class Subject{  //被观察者
  constructor(name){
    this.name = name
    this.observers = []
    this.state = 'XXXX'
  }
  // 被观察者要提供一个接受观察者的方法  收集观察者
  attach(observer){
    this.observers.push(observer)
  }
  // 改变被观察着的状态
  setState(newState){
    this.state = newState
    this.observers.forEach(o=>{
      o.update(newState)  //通知所有的观察者
    })
  }
}
let sub = new Subject('灯')    // 被观察者 灯
let mm = new Observer('小明')  //观察者 小明
let jj = new Observer('小健')  //观察者 小健

// 订阅 观察者
sub.attach(mm)
sub.attach(jj)

//发布通知
sub.setState('灯亮了来电了')

观察者模式 2.0

class Observer{  //观察者
  constructor(name){
    this.name = name
  }
}
// 观察者工具类
class ConcreteObserver extends Observer {
	//每次改变的时候  打印 name newState
  update(newState){
    console.log(`${this.name}say:${newState}`)
  }
}
class Subject{  //被观察者
  constructor(name){
    this.name = name
    this.observers = []
    this.state = 'XXXX'
  }
  // 被观察者要提供一个接受观察者的方法  收集观察者
  attach(observer){
    this.observers.push(observer)
  }
  //提供删除 观察者的方法
  remove(observer){
	 //删除观察者的逻辑
  }
}
//通知观察者工具函数
class ConcreteSubject extends Subject {
  notifyObserver(newState){
    this.state = newState
    this.observers.forEach(o=>{
      o.update(newState)  //通知所有的观察者
    })
  }
}

let sub = new ConcreteSubject('灯')    // 被观察者 灯
let sub1 = new ConcreteSubject('张三')    // 被观察者 张三

let mm = new ConcreteObserver('小明')  //观察者 小明
let jj = new ConcreteObserver('小健')  //观察者 小健

// 订阅 观察者
sub.attach(mm)
sub.attach(jj)

sub1.attach(mm)
sub1.attach(jj)
//发布通知
sub.notifyObserver('灯亮了来电了')
sub1.notifyObserver('发工资了')
posted @ 2021-11-30 11:26  xiao旭  阅读(177)  评论(0编辑  收藏  举报