js 发布订阅模式
//发布订阅模式
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 发布订阅模式的更多相关文章
- js发布订阅模式实现
//可以用于无相关页面或组件的事件.数据传递,减少在onShow中的业务,降低代码耦合 let events = {} /**订阅**/ function on(name, self, callbac ...
- node.js 发布订阅模式
//导入内置模块 let EventEmitter = require('events'); let util=require('util'); //Man继承EventEmitter util.in ...
- JS的发布订阅模式
JS的发布订阅模式 这里要说明一下什么是发布-订阅模式 发布-订阅模式里面包含了三个模块,发布者,订阅者和处理中心.这里处理中心相当于报刊办事大厅.发布者相当与某个杂志负责人,他来中心这注册一个的杂志 ...
- js设计模式-发布/订阅模式
一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...
- JS中的发布订阅模式
一. 你是如何理解发布订阅模式的 JS中的设计模式: 单例模式:处理业务逻辑 构造原型模式:封装类库,组件,框架,插件等 类库:jQuery 只是提供了一些常用的方法,可以应用到任何的项目中,不具备业 ...
- 从发布订阅模式入手读懂Node.js的EventEmitter源码
前面一篇文章setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop详细讲解了浏览器和Node.js的异步API及其底层原理Event Loop.本文会讲一下不 ...
- js里的发布订阅模式及vue里的事件订阅实现
发布订阅模式(观察者模式) 发布订阅模式的定义:它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布订阅模式在JS中最常见的就是DOM的事件绑定与触发 ...
- 4.js模式-发布-订阅模式
1. 发布-订阅模式 var observe = (function(){ var events = {}, listen, trigger, remmove; listen = function(k ...
- JS设计模式(5)发布订阅模式
什么是发布订阅模式(观察者模式)? 定义:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 主要解决:一个对象状态改变给其他对象通知的问题,而且 ...
随机推荐
- Vigenère密码 2012年NOIP全国联赛提高组(字符串模拟)
P1079 Vigenère 密码 题目描述 16 世纪法国外交家 Blaise de Vigenère 设计了一种多表密码加密算法――Vigenère 密 码.Vigenère 密码的加密解密算法简 ...
- 赋予option元素点击事件后,点击select时却触发了option事件。如何解决?
将select的优先级提到option之前就可以了. 方法:为select元素添加position:relative: <select class="adt" name=&q ...
- ACM_N皇后问题
N皇后问题 Time Limit: 2000/1000ms (Java/Others) Problem Description: 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不 ...
- CentOS6.5磁盘分区和挂载操作记录
CentOS6.5磁盘分区和挂载操作记录. [root@CentOS ~]# fdisk -l Disk /dev/sda: bytes heads, sectors/track, cylinders ...
- encodeURIComponent的用法
实践出真知,项目中遇到坑,填满后总结:编码不一定需要解码 rsa加密字段(base64位后),通过url?filed=value传输后,总是有+等特殊字符,然后到后端时base64解不开,发现很多空格 ...
- [转]iOS WebKit browsers and auto-zooming form controls
问题描述:https://github.com/jquery/jquery-mobile/issues/2581 本文转自:http://www.456bereastreet.com/archive/ ...
- Spring: (一) -- 春雨润物之 核心IOC
作为一个Java人,想必都或多或少的了解过Spring.对于其优势也能道个一二,诸如方便解耦.支持AOP编程.支持声明式事务.方便测试等等.Spring也不仅仅局限于服务器端开发,它可以做非常多的事情 ...
- Android开发笔记(1)——View
笔记链接:http://www.cnblogs.com/igoslly/p/6781592.html 一.View基础知识 IDE——Integrated Developme ...
- Python中的排序方法
1 list.sort list.sort(key=None, reverse=False) 该方法只能用于list.就地排序,原来的list被修改.key的用法见下文.reverse控制降序还是生序 ...
- MFC_2.3 定时器、滑块、进度条控件
定时器.滑块.进度条控件 1.拖控件 2.绑定变量.默认,然后取名字 3.初始化设置定时器 // 设置滑块和进度条的范围 m_TrackBar.SetRange(0, 1000); m_StaticP ...