文档章节

JS发布订阅模式

boogoogle
 boogoogle
发布于 2016/06/26 14:45
字数 451
阅读 30
收藏 4
点赞 0
评论 0
// 先来一个构造函数
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
博文 98
码字总数 26075
作品 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
JavaScript设计模式之观察者模式

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

Srtian
05/22
0
0
webqq更新——采用反向AJAX实现在线人员上下线模拟

原文: http://www.abigdreamer.com/mywork/webqq-update-online-reverse-ajax-implementation-off-the-assembly-line-simulation.html 本blog已转移到造梦师http://www.abigdreamer.com,欢......

暗之幻影
2015/09/23
0
0
redis主动向页面push数据

对于页面上定时刷新显示的数据,之前一直都是比较“传统”的思想——那就是“页面通过ajax请求后台,后台响应后把数据返回给前台展示,如此反复……”,而自己也从来没有过“服务端主动向页面...

引鸩怼孑
2015/07/05
0
0
谈谈angularjs中的异步问题(一)

因为上次遇到的那个问题,所以这里我就把angularjs的异步问题刨根问底的查一查 再说angularjs的异步之前,我们先说说关于JavaScript中的异步的问题吧。 我们都知道JavaScript是一个单线程的玩...

邪气小生
2015/11/20
0
0
JavaScript 学习资源推荐

最近 reddit 有讨论:References for JavaScript Mastery. 去年 Rey Bango 博客上也有一篇文章:What to Read to Get Up to Speed in JavaScript. 下面是我的整理,希望能对你有所帮助。 登堂...

deeper099
2011/09/29
0
1
Mobile First! Wijmo 5 之 架构

CSDN移动开发频道率先报道的《Mobile First!jQuery UI组件集Wijmo五年最大更新》引起开发者极大关注。 本文就开发者关心的话题之一架构,展开叙述。 Wijmo 5是一组JavaScript控件,但是不要...

葡萄城控件技术团队
2014/10/22
0
1
从零开始学 Web 之 JavaScript(一)JavaScript概述

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间...

fengdaoting
06/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
4
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
1
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
163
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部