一、问题描述
实现一个EventEmitter类,这个类包含以下方法:
on(监听事件,该事件可以被触发多次)
once(也是监听事件,但只能被触发一次)
fire(触发指定的事件)
off(移除指定事件的某个回调方法或者所有回调方法)

class EventEmitter {
/**请补充你的代码***/
}
const event = new EventEmitter()
const drink = (person) => {
console.log(person + '喝水')
}
event.on('drink', drink)
event.on('eat', (person) => {
console.log(person + '吃东西')
})
event.once('buy', (person) => {
console.log(person + '买东西')
})
event.fire('drink', '我') // 我喝水
event.fire('drink', '我') // 我喝水
event.fire('eat', '其它人') // 其它人吃东西
event.fire('eat', '其它人') // 其它人吃东西
event.fire('buy', '其它人') //其它人买东西
event.fire('buy', '其它人') //这里不会再次触发buy事件,因为once只能触发一次
event.off('eat') //移除eat事件
event.fire('eat', '其它人') //这里不会触发eat事件,因为已经移除了

二、问题分析
这题其实就是实现发布-订阅模式了,难点在于怎样实现once事件,即只触发一次。其实也就是要实现两种类型的事件,我们可以用不同的对象去保存这两种类型的事件,然后在fire的时候,这两种事件都要被处理即可。

三、参考链接

https://github.com/Olical/EventEmitter

四、解决方案

class EventEmitter {
constructor() {
this.queue = {} //可触发多次的事件
this.onceQueue = {} //只能触发一次的事件
}
on(event, fn) { //监听事件,可以触发多次
if (!this.queue[event]) this.queue[event] = []
this.queue[event].push(fn)
}
once(event, fn) { //监听事件,只能触发一次
if (!this.onceQueue[event]) {
this.onceQueue[event] = {
fns: [],
hasFired: false
}
}
this.onceQueue[event].fns.push(fn)
}
fire() { //触发指定的事件
const event = [].shift.call(arguments), //取得事件名称
fns = this.queue[event], //取得该事件里所有的回调函数(可以触发多次的事件)
onceFns = this.onceQueue[event] //取得该事件里所有的回调函数(只能触发一次的事件)
if (fns && fns.length != 0) {
for (let item of fns) {
item.apply(this, arguments)
}
}
if (onceFns && !onceFns.hasFired) {
for (let item of onceFns.fns) {
item.apply(this, arguments)
}
this.onceQueue[event].hasFired = true
}
}
off(event, fn = null) { //可移除特定事件里的某个回调函数或者所有回调函数
const fns = this.queue[event]
if (!fns || fns.length == 0) return
if (fn) { //移除该事件特定的回调
this.queue[event] = fns.filter(item => {
return item !== fn
})
} else { //移除该事件所有的回调
this.queue[event] = []
}
}
}

观察者模式之ES6实现(二)的更多相关文章

  1. React和ES6(二)ES6的类和ES7的property initializer

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  2. ES6入门(二)

    目录 ES6入门(二) es6之解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 ES6入门(二) es6之解构赋值 数组的解构赋值 ...

  3. 用vue.js学习es6(二):let和const使用

    一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...

  4. 委托、事件、Observer观察者模式的使用解析二

    一.设计模式-Observer观察者模式 Observer设计模式是为了定义对象间的一种一对多的依赖关系,以便于当一个对象的状态改变时,其他依赖于它的对象会被自动告知并更新.Observer模式是一种 ...

  5. 深入浅出ES6(二):迭代器和for-of循环

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 我们如何遍历数组中的元素?20年前JavaScript刚萌生时,你可能这样实现数 ...

  6. JavaScript学习笔记 -- ES6学习(二) let 和const

    ES6 中新增了两个命令: let 和const. let命令: let 用于声明变量,和var 类似,但是所声明的变量只在代码块中有效,不存在变量提升,有暂时性死区. 1.只在代码块中有效 和var ...

  7. ES6核心内容精讲--快速实践ES6(二)

    Iterator和for...of 是什么: Iterator(遍历器)是专门用来控制如何遍历的对象,具有特殊的接口. 怎么用: Iterator(遍历器)对象带有next方法,每一次调用next方法 ...

  8. es6(二)

    三 . 正则扩展: 1.构造函数的扩展 let regex = new Regex('xyz','i'); let regex2 = new Regex(/xyz/i);//test() 方法用于检测 ...

  9. 从零开始学 Web 之 ES6(二)ES5的一些扩展

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 【黑客免杀攻防】读书笔记8 - 软件逆向工程基础2(if-else,三目运算符)

    0x1 if-else分支 if-else分支4种状态 1.1 以常量为判断条件的简单if-else分支 C源代码: 单层if-else判断,常量为判断条件 int _tmain(int argc, ...

  2. 【逆向工具】逆向工具101editor使用-游戏快速通关

    [渡者游戏简介] 船夫小江将运送客人的,羊.狐狸.草等物品过河,如果留下动物被其它种类吃掉任务就失败了.你需要帮助他做出正确的顺序选择.Ferryman是一款根据经典谜题改编的解谜游戏. 一.查看文件 ...

  3. 查看Windows版本号

    1.Win+R,在运行中输入:msinfo32 2.在cmd中输入:ver 3.注册表(regedit)中:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows ...

  4. zabbix系列(五)zabbix3.0.4 探索主机Discovery自动发现主机详细图文教程

    Zabbix 自动发现(Discovery)功能使用 随着监控主机不断增多,有的时候需要添加一批机器,特别是刚用zabbix的运维人员需要将公司的所有服务器添加到zabbix,如果使用传统办法去单个添 ...

  5. Java验证码

    下面这段代码可用于Jsp+Servle+JavaBean中做验证码: <%@ page contentType="image/jpeg" import="java. ...

  6. HTTP2.0 简明笔记

    前言 RFC2616发布以来,一直是互联网发展的基石.HTTP协议也成为了可以在任何领域使用的核心协议,基于这个协议人们设计和部署了越来越多的应用.HTTP的简单本质是其快速发展的关键,但随着越来越多 ...

  7. java 扫描输入

    到目前为止,从文件或标准输入读取数据还是一件相当痛苦第事情,一般第解决之道就是读入一行文本,对其进行分词,然后使用Integer Double 等类第各种解析方法来解析数据: //: strings/ ...

  8. PHP数学常用函数

    PHP数学常用函数 函数名 描述 实例 abs() 求绝对值 $abs = abs(-4.2); //4.2 fmod() 浮点数取余 $x = 5.7;$y = 1.3;$r = fmod($x, ...

  9. python 全栈开发,Day22(封装,property,classmethod,staticmethod)

    一.封装 封装 : 广义上的 :把一堆东西装在一个容器里 狭义上的 :会对一种现象起一个专门属于它的名字 函数和属性装到了一个非全局的命名空间 —— 封装 隐藏对象的属性和实现细节,仅对外提供公共访问 ...

  10. <转>用 Java 技术创建 RESTful Web 服务

    转自:https://www.ibm.com/developerworks/cn/web/wa-jaxrs/#N1017E JAX-RS:一种更为简单.可移植性更好的替代方式 Dustin Amrhe ...