前端的观察者模式

0.219字数 577阅读 799

一年前实习时期的代码,今天拿出来总结梳理一下。
PS:以下代码基于es6实现,感兴趣的同学也可以用es5再重写一遍。

1. 观察者类

观察者模式有很多叫法,也叫发布订阅模式、监听者模式。

// 伪观察者
class Observer {
  constructor() {
    this._events = {}
  }
  on(type, fn) {
    this._events[type] = fn;
    return this;
  }
  trigger(type, ...args) {
    const fn  = this._events[type];
    if (fn) {
      fn.apply(this, args)
    }
    return this;
  }
  off(type) {
    delete this._events[type];
    this._events[type] = null;
    return this;
  }
}

以上所写是一个伪观察者的类(为什么是一个伪观察者呢,因为同名事件会相互覆盖,是观察者模式的一种简化实现方式),这个类有三个方法(on,trigger,off)分别功能是绑定事件,触发事件,和解绑事件的三个方法。每一个函数内都把this对象return是为了方便该对象的链式调用(可参考Jquery实现)。
接下来我们来写一个Btn类。

2. Btn类

// Button 类
class Btn extends Observer {
  constructor() {
    super()
    this.bindEvents();
    this.handleEvents();
  }
  handleEvents() {
    this.trigger('你追我如果你追上我', 'wo');
    return this;
  }
  bindEvents() {
    console.log('你追我如果你追上我');
    this.on('你追我如果你追上我', (who) => {
      console.log(who + '就让你嘿嘿嘿');
    })
    return this;
  }
}

非常简单的一个基于观察者模式的btn组件。

  1. 在构造函数内我们先去调用super函数去继承Observer里面的方法和属性。
  2. 调用bindEvents函数去绑定一个事件(当然最好是英文字符串,这里纯粹为了搞笑:P),这个时候'你追我如果你追上我'这个事件已经在_events对象内注册,只要去触发'你追我如果你追上我'这个事件就可以执行注册的回调函数。
  3. 调用handleEvents函数,这也是一般的用户操作和其他事件的输入,我们可以通过trigger函数将我们需要触发的事件和参数一起传进去,然后Observer监听到事件之后就去执行当前事件下注册的回调函数。

3. 新建Btn对象

const button = new Btn();
button.trigger('你追我如果你追上我', 'ta');
$ node index.js
你追我如果你追上我
wo就让你嘿嘿嘿
ta就让你嘿嘿嘿

通过new的方式新建一个对象,该对象实现了Btn类,可以在Btn内触发trigger,也可以通过对象直接调用原型链上的trigger函数来触发当前事件。

4. 尾声

观察者模式可以说是在前端领域最最重要的一种设计模式,包括Redux,Vuex等数据管理模块,以及更基础的浏览器内部实现的事件监听,都是观察者模式的演变。

推荐阅读更多精彩内容

  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
  • 1.补了3天公文,完成3篇阅读,一起作业完成,抄写了两页单词和句子。 2.写了一幅对联,还练习了一会硬笔书法。 3...