观察者模式

Observer

概述

包括：观察者和观察目标

一个目标可以有很多观察者与之关联

一旦目标状态发生变化，将通知所有观察者，观察者据此做出响应

与订阅-发布模式比较类似

无法细分管控

应用

面包屑导航

参考代码

class Subject {
  constructor() {
    this.observers = []
  }
  add(obj) {
    this.observers.push(obj)
  }
  remove(obj) {
    this.observers = this.observers.filter(item => item != obj)
  }
  notify() {
    this.observers.forEach(item => item.update())
  }
}

class Observer {
  constructor(name) {
    this.name = name
  }
  update() {
    console.log(this.name + ' updated');
  }
}

let ob1 = new Observer('gl')
let ob2 = new Observer('sh')
let sub = new Subject()
sub.add(ob1)
sub.add(ob2)
sub.notify()

面包屑导航

无序列表实现

DOM获取

事件委托

参数传递

DOM更新

class Subject {
  constructor() {
    this.observers = []
  }
  add(obj) {
    this.observers.push(obj)
  }
  remove(obj) {
    this.observers = this.observers.filter(item => item != obj)
  }
  notify(str) {
    this.observers.forEach(item => item.update(str))
  }
}

class Observer {
  constructor(name) {
    this.el = document.querySelector(name)
  }
  update(str) {
    this.el.innerHTML = str
  }
}
let sub = new Subject()
let obj = new Observer('#bread')
sub.add(obj)
news.addEventListener('click', (e) => {
  if (e.target.tagName == 'LI') {
    sub.notify(e.target.innerHTML)
  }
})