JavaScript 的一些常用设计模式(3)

发布时间：2019-08-19 17:07 所属栏目：21 来源：xianshannan

导读：然后加上目标和观察者 classSubject{ constructor(){ this.observers=[] } add(observer){ this.observers.push(observer) } notify(data){ this.observers.forEach((observer)=observer.update(data)) } } classOb

然后加上目标和观察者

class Subject { 
  constructor() { 
    this.observers = [] 
  } 
 
  add(observer) { 
    this.observers.push(observer) 
  } 
 
  notify(data) { 
    this.observers.forEach((observer) => observer.update(data)) 
  } 
} 
 
class Observer { 
  constructor(callback) { 
    this.callback = callback 
  } 
  update(data) { 
    this.callback && this.callback(data) 
  } 
} 
 
// 创建观察者ob1 
let ob1 = new Observer((text) => { 
  document.querySelector('#dom-one').innerHTML(text) 
}) 
// 创建观察者ob2 
let ob2 = new Observer((text) => { 
  document.querySelector('#dom-two').innerHTML(text) 
}) 
// 创建目标sub 
let sub = new Subject() 
// 目标sub添加观察者ob1 （目标和观察者建立了依赖关系） 
sub.add(ob1) 
// 目标sub添加观察者ob2 
sub.add(ob2) 
// 目标sub触发事件（目标主动通知观察者） 
sub.notify('这里改变了')

组合在一起是这样的

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8" /> 
    <meta 
      name="viewport" 
      content="width=device-width,initial-scale=1,maximum-scale=1,viewport-fit=cover" 
    /> 
    <title></title> 
  </head> 
  <body> 
    <div id="app"> 
      <div id="dom-one"> 
        原来的值 
      </div> 
      <br /> 
      <div id="dom-two"> 
        原来的值 
      </div> 
      <br /> 
      <button id="btn">改变</button> 
    </div> 
    <script> 
      class Subject { 
        constructor() { 
          this.observers = [] 
        } 
 
        add(observer) { 
          this.observers.push(observer) 
        } 
 
        notify() { 
          this.observers.forEach((observer) => observer.update()) 
        } 
      } 
 
      class Observer { 
        constructor(callback) { 
          this.callback = callback 
        } 
        update() { 
          this.callback && this.callback() 
        } 
      } 
 
      const obj = { 
        data: { description: '' }, 
      } 
 
      // 创建观察者ob1 
      const ob1 = new Observer(() => { 
        console.log(document.querySelector('#dom-one')) 
        document.querySelector('#dom-one').innerHTML = obj.description 
      }) 
      // 创建观察者ob2 
      const ob2 = new Observer(() => { 
        document.querySelector('#dom-two').innerHTML = obj.description 
      }) 
      // 创建目标sub 
      const sub = new Subject() 
      // 目标sub添加观察者ob1 （目标和观察者建立了依赖关系） 
      sub.add(ob1) 
      // 目标sub添加观察者ob2 
      sub.add(ob2) 
 
      Object.defineProperty(obj, 'description', { 
        get() { 
          return this.data.description 
        }, 
        set(val) { 
          this.data.description = val 
          // 目标sub触发事件（目标主动通知观察者） 
          sub.notify() 
        }, 
      }) 
      btn.onclick = () => { 
        obj.description = '改变了' 
      } 
    </script> 
  </body> 
</html>

装饰者模式

装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能，同时又不改变其结构。

ES6/7 的decorator 语法提案，就是装饰者模式。

（编辑：ASP站长网）