js 发布订阅模式的实例讲解


Posted in Javascript onSeptember 10, 2017

废话不多说,直接上代码

//发布订阅模式
class EventEmiter{
  constructor(){
    //维护一个对象
    this._events={

    }
  }
  on(eventName,callback){
    if( this._events[eventName]){
      //如果有就放一个新的
      this._events[eventName].push(callback);
    }else{
      //如果没有就创建一个数组
      this._events[eventName]=[callback]
    }
  }
  emit(eventName,...rest){
    if(this._events[eventName]){ //循环一次执行
      this._events[eventName].forEach((item)=>{
        item.apply(this,rest)
      });
    }
  }
  removeListener(eventName,callback){
    if(this._events[eventName]){
      //当前数组和传递过来的callback相等则移除掉
      this._events[eventName]=
        this._events[eventName].filter(item=>item!==callback);
    }
  }
  once(eventName,callback){
    function one(){
      //在one函数运行原来的函数,只有将one清空
      callback.apply(this,arguments);
      //先绑定 执行后再删除
      this.removeListener(eventName,one);
    }
    this.on(eventName,one);
      //此时emit触发会执行此函数,会给这个函数传递rest参数
  }
}
class Man extends EventEmiter{}
let man=new Man()
function findGirl() {
  console.log('找新的女朋友')
}
function saveMoney() {
  console.log('省钱')
}
man.once('失恋',findGirl);
//man.on('失恋',findGirl) //失恋 ,绑定一个函数方法
man.on('失恋',saveMoney)//失恋 ,绑定一个函数方法
man.removeListener('失恋',saveMoney); //移除一个函数方法
man.emit('失恋');
//绑定一次,触发多次,也只执行一次。触发后一次将数组中的哪一项删除掉下次触发就不会执行

以上这篇js 发布订阅模式的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
node.js 发布订阅模式的实例
Sep 10 #Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 #Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 #Javascript
基于AngularJS的简单使用详解
Sep 10 #Javascript
JS获取字符对应的ASCII码实例
Sep 10 #Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 #Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 #Javascript
You might like
php 安全过滤函数代码
2011/05/07 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
2015/11/09 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Django中create和save方法的不同
2019/08/13 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
恶意软件的定义
2014/11/12 面试题
质检员岗位职责
2013/12/17 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
爱的承诺书
2015/01/20 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
同意转租证明
2015/06/24 职场文书
中学教师读书笔记
2015/07/01 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书