简单实现 手写 观察者模式

观察者（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('发工资了')

标签：sub,newState,观察者,模式,attach,new,手写,name
来源： https://www.cnblogs.com/zjxlicheng/p/15623461.html