原文地址：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. sublime Text 3常用Html/Css基础插件安装

    前言 sublime以其简洁明了的外观,干脆利落的编辑方式,再加上丰富的功能插件,深受广大开发者的喜爱.今天,我就来介绍几款基于Html/Css开发的sublime插件. 1.Package Cont ...

  2. Bash 的若干基本问题

    Bash 的若干基本问题   这里介绍一些bash启动前.后的问题,以及一些使用bash需要注意的基本问题.     1.Bash的介绍   Bash是一种Shell程序,它是一般的Linux系统中的 ...

  3. day_1 练习2

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''b. 功能要求: v = 2000 要求用户输入总资产,例如:2000 显示商品列表,让用户根据序号选择商品 ...

  4. Spring Session实现分布式session的简单示例

    前面有用 tomcat-redis-session-manager来实现分布式session管理,但是它有一定的局限性,主要是跟tomcat绑定太紧了,这里改成用Spring Session来管理分布 ...

  5. javascript设计模式详解之命令模式

    每种设计模式的出现都是为了弥补语言在某方面的不足,解决特定环境下的问题.思想是相通的.只不过不同的设计语言有其特定的实现.对javascript这种动态语言来说,弱类型的特性,与生俱来的多态性,导致某 ...

  6. [刷题]Codeforces 786A - Berzerk

    http://codeforces.com/problemset/problem/786/A Description Rick and Morty are playing their own vers ...

  7. Redis学习-发布/订阅

    Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息.Redis 客户端可以订阅任意数量的频道. 常用命令 命令 描述 复杂度 返回 PSUBS ...

  8. FileInputStream和FileOutputStream详解

    一.引子 文件,作为常见的数据源.关于操作文件的字节流就是 FileInputStream & FileOutputStream.它们是Basic IO字节流中重要的实现类.二.FileInp ...

  9. /usr/lib/x86_64-linux-gnu/libopencv_highgui.so.2.4.9: undefined reference toTIFFIsTiled@LIBTIFF_4.0'

    今天编译caffe ,本来编译过无数次caffe了,基本坑都能解决的.但这次惹恼我了.一直搞不定. 错误信息是这样的: /usr/lib/x86_64-linux-gnu/libopencv_high ...

  10. JS高级-数据结构的封装

    最近在看了<数据结构与算法JavaScript描述>这本书,对大学里学的数据结构做了一次复习(其实差不多忘干净了,哈哈).如果能将这些知识捡起来,融入到实际工作当中,估计编码水平将是一次质 ...