前端设计模式之观察者模式

2020-6-24 Jon js+jquery+ajax

观察者模式介绍

前端开发中,观察者模式无处不在,可以说是使用非常频繁的设计模式之一了。基础的浏览器内部实现的事件监听,dom的监听,Promise,三大框架的生命周期函数,甚至三大框架中 angular 的 NgRx、react的 Redux 以及 vue 的 Vuex 数据管理模块都是观察者模式的演变。观察者模式属于行为型模式,1对多,由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体,n个观察者对象同时监听某一个主题对象,当主题对象状态变化时,会通知所有的观察者对象

js 观察者简单举例
  1. 事件绑定
// js就是观察者,DOM就是被观察者。 当DOM被点击,DOM就会通知js触发
document.body.addEventListener("click", function() {
  alert("点击了")
}, false)
  1. Promise
    promise 有三个状态,pending、resolved、rejected 状态。then() 方法监听 resolved 状态,.catch() 监听 rejected 状态。也是一种观察模式。
观察者模式实现
   js    40行
// 主题,接收状态变化,触发每个观察者
class Subject {
  constructor() {
    this.state = 0;
    this.observers = [];
  }
  attach(observer) {
    this.observers.push(observer);
  }
  getState() {
    return this.state
  }
  setState(state) {
    this.state = state;
    this.notifyAllObserver();
  }
  notifyAllObserver() {
    this.observers.forEach(observer=>{
      observer.update()
    })
  }
}
// 观察者,等待被触发
class Observer {
  constructor(name, subject) {
    this.name = name;
    this.subject = subject;
    this.subject.attach(this);
  }
  update() {
    console.log(this.name, 'state为', this.subject.getState());
  }
}
// 测试代码
let s = new Subject();
let o1 = new Observer('o1', s);
let o2 = new Observer('o2', s);
let o3 = new Observer('o3', s);
s.setState(1)
s.setState(2)

标签: 设计模式 观察者模式

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap