文档章节

JS发布订阅模式

boogoogle
 boogoogle
发布于 2016/06/26 14:45
字数 451
阅读 30
收藏 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
博文 99
码字总数 26193
作品 0
昌平
前端工程师
JavaScript 观察者 (发布/订阅) 模式

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

缪宇
06/29
0
0
面向UI编程:ui.js 1.1 使用观察者模式完成组件之间数据流转,彻底分离组件之间的耦合,完成组件的高内聚

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

仲强
2017/02/16
0
0
前端高频面试题 JavaScript篇

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

大雄的学习人生
06/25
0
0
基于JS的event-manage事件管理库(一步一步实现)

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

刘成英
07/26
0
0
JavaScript设计模式之观察者模式

前言 准备研究一下MVVM的一些东西,由于MVVM运用了观察者模式的思想,因此翻开了《JavaScript设计模式与开发实践》一书,将观察者模式学习了一遍,顺便有对一些常用的设计模式进行一些了解,...

Srtian
05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面向对象设计原则(OOP)

单一职责原则(Single responsibility principle)又称单一功能原则。它规定一个类应该只有一个发生变化的原因。 核心原则:低耦合,高内聚。 一个类,应该只有一个引起它变化的原因,也就是...

gackey
40分钟前
2
0
C++ 锁

C++提供了两种常用的锁,std::lock_guard<Lockable &T>和std::unique_lock<Lockable &T>。通常使用场景下,这两个锁用法一致。即,在构造锁对象时上锁,在析构锁对象时解锁。使用户从上锁/解...

yepanl
44分钟前
2
0
Kali Linux Docker 練習

docker pull kalilinux/kali-linux-docker docker run -t -i kalilinux/kali-linux-docker /bin/bash apt-get update apt-get install htop apt-get install nmap apt-get install wpscan ap......

BaiyuanLab
今天
2
0
通俗大白话来理解TCP协议的三次握手和四次分手

最近在恶补计算机网络方面的知识,之前对于TCP的三次握手和四次分手也是模模糊糊,对于其中的细节更是浑然不知,最近看了很多这方面的知识,也在系统的学习计算机网络,加深自己的CS功底,就...

onedotdot
今天
2
0
TiDB 在爱奇艺的应用及实践

爱奇艺,中国高品质视频娱乐服务提供者,2010 年 4 月 22 日正式上线,推崇品质、青春、时尚的品牌内涵如今已深入人心,网罗了全球广大的年轻用户群体,积极推动产品、技术、内容、营销等全方...

TiDB
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部