原文地址：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]);

         }

     }

 };

测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>EventEmitter Test</title>

    <script src="./EventEmitter.js"></script>

    <script>

        var zObj = function () {

            this._props = {};

            this._emitter = new EventEmitter();

        };

        zObj.prototype.set = function (key, value) {

            var old = this._props[key];

            if (old !== value) {

                this._props[key] = value;

                this.emitChange(key, value, old);

            }

        };

        zObj.prototype.get = function (key) {

            return this._props[key];

        };

        zObj.prototype.onChange = function (handler, context) {

            this._emitter.on("change", handler, context);

        };

        zObj.prototype.offChange = function (handler, context) {

            this._emitter.off("change", handler, context);

        };

        zObj.prototype.emitChange = function (p, nv, ov) {

            this._emitter.emit("change", {

                source: this,

                property: p,

                newValue: nv,

                oldValue: ov

            });

        };

        var obj = new zObj();

        obj.onChange(function (evt) {

            console.log(evt)

        });

        obj.set("id", 1);

        obj.set("id", 2);

    </script>

</head>

<body>

</body>

</html>

函数

主要有以下三个功能函数：

  • on :添加事件监听器
  • off：移除事件监听器
  • emit：派发事件

JS 事件派发器EventDispatcher的更多相关文章

  1. JS事件派发器EventEmitter

    原文地址:http://zhangyiheng.com/blog/articles/js_event_mitter.html 需求 随着Browser客户端JS越来越复杂,MVC(Client端)设计 ...

  2. 使用lua实现一个简单的事件派发器

    设计一个简单的事件派发器,个人觉得最重要的一点就是如何保证事件派发过程中,添加或删除同类事件,不影响事件迭代顺序和结果,只要解决这一点,其它都好办. 为了使用pairs遍历函数,重写了pairs(lu ...

  3. Unity-自定义事件派发器的两次尝试

    一.前言: 在游戏开发的很多时候,需要引用其他类的方法,但是一旦类多起来了,相互引用会导致引用关系混乱,极其难以阅读. 以前初次做抖音小游戏时,和一位经验老道的cocos程序员合作,看到我写的代码他不 ...

  4. 谷歌浏览器插件-html页面js事件查看器

    谷歌浏览器插件-html页面js事件查看器 1.下载 下载地址:http://files.cnblogs.com/files/graceup/VisualEvent.zip 解压得到文件:Visual ...

  5. 48、[源码]-Spring容器创建-初始化事件派发器、监听器等

    48.[源码]-Spring容器创建-初始化事件派发器.监听器等 8.initApplicationEventMulticaster();初始化事件派发器: 获取BeanFactory 从BeanFa ...

  6. pyglet模块的EventDispatcher(事件派发对象）

    事件派发对象用于处理事件的派发与响应,pyglet的window对象正是继承了它才具有处理事件的能力. 步骤: 1.注册事件类型: EventDispatcher.register_event_typ ...

  7. cocos2d JS 自定义事件分发器(接收与传递数据) eventManager

    简而言之,它不是由系统自动触发,而是人为的干涉 较多情况用于传递数据 var _listener1 = cc.EventListener.create({ event: cc.EventListene ...

  8. 项目记录22-- tolua基于lua框架事件派发

     每天晚上抽点时间写一点点就一点点,曾经不写博客可是如今.不为别的仅仅是为了告诉别人我还存在.         这几天在地铁上发现好多人都还在玩消除游戏,今天起码看到5个人,可是玩的版本号都不一样.看 ...

  9. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

随机推荐

  1. mysql数据库面试总结

    数据库优化 建表优化 1)数据库范式 l 第一范式(1NF):强调的是列的原子性,即列不能够再分成其他几列. 如电话列可进行拆分---家庭电话.公司电话 l 第二范式(2NF):首先是 1NF,另外包 ...

  2. 使用Dotfuscator加密混淆程序以及如何脱壳反编译

    混淆演示 首先介绍如何使用Dotfuscator对.net程序加密码混淆/加壳 C#或vb.net编写的应用程序或DLL. 这里随便创建了一个C#的命令行控制台程序.程序很简单,对当前的时间进行了AE ...

  3. Java中处理二进制移位

    我相信,这篇文章读起来会相当有趣. 文章中编程语言是Java,用Java的原因:第一,Java不做数据溢出校验,这样我们可以忽略溢出异常:第二,Java普及率比较高,就像是python或shell,几 ...

  4. 将github上的项目源码导入到eclipse中

    1.注册github帐号 在github上注册一个自己的帐号. 2.安装git插件egit 在eclipse中安装git插件egit,安装方法可以参考这篇文章: http://www.cnblogs. ...

  5. [Angularjs]$http.post与$.post

    摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇到在服务端无法接受到参数的情况,这里有必要与$.post进行比较学习一下. 一个例子 这里模拟登录的一个场 ...

  6. 主机设置ss代理，虚拟机共享代理

    代理的原理: 关于代理的具体的书面定义你百度谷歌可以知道.这里,我想简单通过一个例子,说明代理的原理: 假如,你在北京,但你女朋友在广州,你有东西要给你的女朋友,但是正好你这几天公司有事,所以你不能去 ...

  7. ke

    #include <stdio.h> #include <stdlib.h> // For rand() and srand() #include <time.h> ...

  8. UIWebView 跳过HTTPS证书认证

    UIWebView跳过证书认证 在UIWebView中加入如下代码即可(Error Domain=NSURLErrorDomain Code=-1202) //跳过证书验证 @interface NS ...

  9. 《JAVA与模式》之门面模式

    <JAVA与模式>之门面模式 在阎宏博士的<JAVA与模式>一书中开头是这样描述门面(Facade)模式的: 门面模式是对象的结构模式,外部与一个子系统的通信必须通过一个统一的 ...

  10. 用户输入与while循环

    函数input()的工作原理: 函数input()让程序短暂运行,等待用户输入一些文本,获取用户输入后将其存储在一个变量中 测试input()功能-- #!/usr/bin/env python#fi ...