JS事件派发器EventEmitter
原文地址:http://zhangyiheng.com/blog/articles/js_event_mitter.html
需求
随着Browser客户端JS越来越复杂,MVC(Client端)设计模式成为一个很好的开发选择, 而MVC开发模式中,最基础的功能就是把Model和View关联起来, 当Model发生变化的时候,View呈现做出相应的调整。
实现此功能最合适的方式莫过于事件Event了, 对于Event大家应该都很熟悉,比如dom中的button,可以通过addEventListener/attachEvent添加click事件处理。
而一般的object对象是没有事件派发功能的,基于此需求,实现了一个EventEmitter。
/**
* Created by taozh on 2017/6/22.
* taozh1982@gmail.com
*/
var EventEmitter = function () {
this.__z_e_listeners = {};
};
EventEmitter.prototype.on = function (evt, handler, context) {
var handlers = this.__z_e_listeners[evt];
if (handlers === undefined) {
handlers = [];
this.__z_e_listeners[evt] = handlers;
}
var item = {
handler: handler,
context: context
};
handlers.push(item);
return item;
};
EventEmitter.prototype.off = function (evt, handler, context) {
var handlers = this.__z_e_listeners[evt];
if (handlers !== undefined) {
var size = handlers.length;
for (var i = 0; i < size; i++) {
var item = handlers[i];
if (item.handler === handler && item.context === context) {
handlers.splice(i, 1);
return;
}
}
}
};
EventEmitter.prototype.emit = function (type, event) {
var hanlders = this.__z_e_listeners[type];
if (hanlders !== undefined) {
var size = hanlders.length;
for (var i = 0; i < size; i++) {
var ef = hanlders[i];
var handler = ef.handler;
var context = ef.context;
handler.apply(context, [event]);
}
}
};
JS事件派发器EventEmitter的更多相关文章
- JS 事件派发器EventDispatcher
在Java和AS中经常用到EventDispatcher,写了一个JS版本的. addListener :添加事件监听器 removeListener:移除事件监听器 dispatchEvent:派发 ...
- 使用lua实现一个简单的事件派发器
设计一个简单的事件派发器,个人觉得最重要的一点就是如何保证事件派发过程中,添加或删除同类事件,不影响事件迭代顺序和结果,只要解决这一点,其它都好办. 为了使用pairs遍历函数,重写了pairs(lu ...
- 谷歌浏览器插件-html页面js事件查看器
谷歌浏览器插件-html页面js事件查看器 1.下载 下载地址:http://files.cnblogs.com/files/graceup/VisualEvent.zip 解压得到文件:Visual ...
- 48、[源码]-Spring容器创建-初始化事件派发器、监听器等
48.[源码]-Spring容器创建-初始化事件派发器.监听器等 8.initApplicationEventMulticaster();初始化事件派发器: 获取BeanFactory 从BeanFa ...
- Unity-自定义事件派发器的两次尝试
一.前言: 在游戏开发的很多时候,需要引用其他类的方法,但是一旦类多起来了,相互引用会导致引用关系混乱,极其难以阅读. 以前初次做抖音小游戏时,和一位经验老道的cocos程序员合作,看到我写的代码他不 ...
- 【node.js】事件循环、EventEmitter
Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. 事件驱动程序 ...
- cocos2d JS 自定义事件分发器(接收与传递数据) eventManager
简而言之,它不是由系统自动触发,而是人为的干涉 较多情况用于传递数据 var _listener1 = cc.EventListener.create({ event: cc.EventListene ...
- Node.js 事件
Node.js 事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, ...
- Node.js事件循环
Node JS是单线程应用程序,但它通过事件和回调概念,支持并发. 由于Node JS每一个API是异步的,作为一个单独的线程,它使用异步函数调用,以保持并发性.Node JS使用观察者模式.Node ...
随机推荐
- jquery相冊图片来回选择
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script sr ...
- EXCel鼠标右键不能用解决办法
EXCel鼠标右键不能用解决办法 倒腾vba首要是保证安全,各路大神的代码非常神奇,莫名的就让你的excel嘎嘣了,如出现右键无法使用(确定不是您的鼠标问题),那么以下代码可完全修复设置.操作步骤:打 ...
- MySQL之慢查询-删除慢查询日志
一.环境 OS:CentOS release 5.8(64位) DB:MySQL5.5.17 二.操作 直接通过命令 rm -f 删除了慢查询日志 三.出现故障 慢查询日志没有自己主 ...
- SVN 服务端、客户端安装及配置、导入导出项目
http://blog.csdn.net/xcy13638760/article/details/12994923 http://www.cnblogs.com/armyfai/p/3985660.h ...
- java拷贝构造函数
浅拷贝就是指两个对象共同拥有同一个值,一个对象改变了该值,也会影响到另一个对象. 深拷贝就是两个对象的值相等,但是互相独立. 构造函数的参数是该类的一个实例. Operator = 拷贝构造函数 ...
- MySQL的安装过程
近期对MySQL做了一些研究. 曾经主要接触的是SQL SERVER.所以,今天对该安装过程做了一些总结以及使用过程中的一些心得.并分享给大家. 记得前面.分享过一篇关于数据库的几种连接方式.而 ...
- centos 6.9 x86 安装搭建hadoop集群环境
又来折腾hadoop了 文件准备: centos 6.9 x86 minimal版本 163的源 下软件的时候可能会用到 jdk-8u144-linux-i586.tar.gz ftp工具 putty ...
- ms人物上线
在看MS人物上线 else if(gs2ms_add_player == pkt.cmd) { PlayerChannel* pPC = new PlayerChannel(this); //加到地图 ...
- Vue 填坑系列(持续更新...)
1.遇到页面显示不更新,数据已更新情况 vue-cli中: this.$nextTick(function () { this.x=x; }) 以js引入vue的网页中: this.$set( ...
- [转]JS学习之正则表达式
js正则表达式实例 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 •替换文本.可以在文档 ...