文档章节

JS发布订阅模式

boogoogle
 boogoogle
发布于 2016/06/26 14:45
字数 451
阅读 31
收藏 4
// 先来一个构造函数
function Events() {
    this._events = {};// 定义一个事件池,保存绑定的所有事件
    this.name = "小明";
}

/**
 * [on 订阅事件]
 * @param  {String}   eventName [事件名称]
 * @param  {Function} fn        [给事件添加的回调函数]
 * @return {null}               [没有返回值]
 */
Events.prototype.on = function(eventName,fn){
	var cur = this._events[eventName];//从事件池中查找eventName
	if(cur){//事件池中已存在此事件,直接绑定
		this._events[eventName].push(fn);
	}else{// 事件池中没有注册(订阅)该事件,先创建事件,再绑定回调函数
		this._events[eventName] = [fn];
	}
}

/**
 * [emit 触发事件,]
 * @param  {String} eventName
 * @return {null}          
 */
Events.prototype.emit = function(eventName){
	// 因为考虑到 有可能给绑定的事件传参,所以这里先取出所有的"传参"
	var args = Array.prototype.slice.call(arguments,1);
	var cur = this._events[eventName];
	var _self = this; // 保存这里的this

	if(cur){ // 如果eventName事件存在
		cur.forEach(function(item){// 遍历该事件绑定的回调函数
			item.apply(_self,args)
		})
	}
}


Events.prototype.removeListener = function(eName,fn){
	// 移除 eName事件绑定的fn方法
	var cur = this._events[eName];
	if(cur){
		this._events[eName] = this._events[eName].filter(function(item){
			return item != fn;// 把fn过滤掉,其他的回调函数保存
		})
	}
}


// once 事件只绑定一次, 如果多次(emit)的时候 -> 让其只触发一次
Events.prototype.once = function(eName,fn){
	var _self = this;
	function _fn(){// 这里用到了JS中的"预处理"思想,也叫柯里化思想
		fn.apply(_self,arguments);
		_self.removeListener(eName,_fn);
	}
	this.on(eName,_fn);
}
/*
	用once绑定的事件,即使你多次emit,也只能触发一次

 */

var e = new Events();
function cry(){
	console.log('哭哭哭');
}

function eat(){
	console.log('吃吃吃');
}

function say(){
	console.log('说说说');
}

e.on('do',cry);
e.on('do',eat);

e.emit('do');  // -> 哭哭哭  吃吃吃



e.removeListener('do',cry);
e.emit('do') // -> 吃吃吃
e.emit('do') // -> 吃吃吃  这里emit了两次,也就执行了两次


e.once('say',say)

e.emit('say')
e.emit('say')
e.emit('say')
e.emit('say') // 只输出一次 "说说说"

© 著作权归作者所有

共有 人打赏支持
boogoogle
粉丝 10
博文 100
码字总数 26332
作品 0
昌平
前端工程师
私信 提问
JavaScript 观察者 (发布/订阅) 模式

定义 观察者模式定义了对象之间一对对多的依赖关系,当一个对象改变了状态,它的所有依赖会被通知,然后自动更新。 和其他模式相比,这种模式又增加了一个原则: 在相互作用的对象之间进行松散...

缪宇
2018/06/29
0
0
前端高频面试题 JavaScript篇

以下问题都来自于互联网前端面经分享,回答为笔者通过查阅资料加上自身理解总结,不保证解答的准确性,有兴趣讨论的同学可以留言或者私信讨论。 1.JS的异步机制? 2.闭包如何实现? 3.原型链、...

大雄的学习人生
2018/06/25
0
0
面向UI编程:ui.js 1.1 使用观察者模式完成组件之间数据流转,彻底分离组件之间的耦合,完成组件的高内聚

开头想明确一些概念,因为有些概念不明确会导致很多问题,比如你写这个框架为什么不去解决啥啥啥的问题,哎,心累。 什么是框架?   百度的解释:框架(Framework)是整个或部分系统的可重...

仲强
2017/02/16
0
0
基于JS的event-manage事件管理库(一步一步实现)

关于文章 最近在提升个人技能的同时,决定把自己为数不多的沉淀记录下来,让自己理解的更加深刻,同时也欢迎各位看官指出不足之处。 随着node.js的盛行,引领着Javascript上天下地无所不能啊...

刘成英
2018/07/26
0
0
JavaScript 实现简单的双向数据绑定

双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个user对象和一个name属性,一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了...

aiasfina
2013/07/08
24.2K
5

没有更多内容

加载失败,请刷新页面

加载更多

Linux 权限

权限 0 000 --- 无权限 1 001 --x 执行权限 2 010 -w- 写权限 3 011 -wx 写和执行 4 100 r-- 读权限 5 101 r-x 读和执行 6 110 rw- 读和写 7 111 rwx 读写执行 755 : rwxr-xr-x 660 : rw-r...

忙碌的小蜜蜂
12分钟前
0
0
21分钟教会你分析MaxCompute账单

21分钟教会你分析MaxCompute账单 背景 阿里云大计算服务MaxCompute是一款商业化的大数据分析平台,其计算资源有预付费和后付费两种计费方式。并且产品每天按照project为维度进行计量计费(账...

阿里云云栖社区
16分钟前
0
0
Docker使用 linuxserver/letsencrypt 生成SSL证书最全解析及实践

本文使用 HTTP 和 DNS 两种校验方式对 Docker 下 linuxserver/letsencrypt 项目进行了实践。生成SpringBoot可用证书,使用 Nginx 的 htpasswd 来对网站进行密码保护,并测试使用 fail2ban 防...

java菜分享
16分钟前
0
0
代码吃鸡:Python-Robocode

最近看到一个很有“未来感”的新闻: 一辆特斯拉在拉斯维加斯出了车祸,撞“死”了一个……emmmm……机器人。不知道是意外还是炒作,又或者是这位机器人故意碰瓷,反正人们也无法从受害者口中...

crossin
20分钟前
0
0
什么是公网IP、内网IP和NAT转换?

搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地址)和内网IP(即局域网IP地址),但他们的区别是什么? 1、引言 搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网I...

Linux就该这么学
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部