什么事观察者模式:

  这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情,观察者知道主体并能注册事件的回调函数。

代码:

function EventT(){

  this.handlers = {};

}

EventT.prototype = {

  custructor : EventT,

  addHanler : function(type,handler){

    if(typeof this.handlers[type] == 'undefined'){

      this.handlers[type] = [];

    }

    this.handlers[type].push(handler);

  },

  fire:function(event){

    if(!event.target){

      event.target = this;

    }

    if(this.handlers[event.type] instanceof Array){

      var handlers = this.handlers[event.type];

      for(var i=0,len = handlers.length;i<len;i++){

        handlers[i](event)

      }

    }

  },

  removeHandler:function(type,handler){

    if(this.handlers[type] instanceof Array){

      var handlers = this.handlers[type];

      for(var i=0,len=handlers.length;i<len;i++){

        if(handlers[i] === handler){

          break;

        }

      }

      handlers.splice(i,1)

    }

  }

}

大概意思就是,创建一个事件管理器。handles是一个存储事件处理函数的对象。

addHandle:是添加事件的方法,该方法接收两个参数,一个是要添加的事件的类型,一个是这个事件的回调函数名。调用的时候会首先遍历handles这个对象,看看这个类型的方法是否已经存在,如果已经存在则添加到该数组,如果不存在则先创建一个数组然后添加。

fire方法:是执行handles这个对象里面的某个类型的每一个方法。

removeHandle:是相应的删除函数的方法。

新建两个对象:

var person1 = {};

var person2 ={};

Object.assign(person1,Event);

Object.assign(person2,Event);

person1.on('call1', function () {
console.log('person1');
});
person2.on('call2', function () {
console.log('person2');
});
person1.emit('call1'); // 输出 'person1'
person1.emit('call2'); // 没有输出
person2.emit('call1'); // 没有输出
person2.emit('call2'); // 输出 'person2'
原网址:https://www.cnblogs.com/LuckyWinty/p/5796190.html

js中的观察者模式的更多相关文章

  1. js中的观察者模式与发布者/订阅者模式的区别?

  2. JS设计模式之观察者模式

    观察者模式,即发布与订阅模式,实现一对多的一种关系模式,当一种对象接受信号时其他所有依赖均有行为.我们在写code的时候总是会去自定义一些事件,这就是观察者常常使用的地方: JS中的观察者模式应用: ...

  3. 简单谈谈js中的MVC

    MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): ...

  4. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

  5. 深入理解 Node.js 中 EventEmitter源码分析(3.0.0版本)

    events模块对外提供了一个 EventEmitter 对象,即:events.EventEmitter. EventEmitter 是NodeJS的核心模块events中的类,用于对NodeJS中 ...

  6. jQuery中的观察者模式(Observer Pattern)

    在jQuery中,on方法可以为元素绑定事件,trigger方法可以手动触发事件,围绕这2个方法,我们来体验jQuery中的观察者模式(Observer Pattern). ■ on方法绑定内置事件, ...

  7. 30 行代码实现 JS 中的 MVC

    一连串的名字走马观花式的出现和更迭,它们中一些已经渐渐淡出了大家的视野,一些还在迅速茁壮成长,一些则已经在特定的生态环境中独当一面舍我其谁.但不论如何,MVC已经并将持续深刻地影响前端工程师们的思维方 ...

  8. 浅谈js中的MVC

    MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器) 本文将用一个经典的例子todoList来展开 一个事件发生的过程(通信单向流动): 1.用户在视图V ...

  9. JS中的柯里化(currying) 转载自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

    JS中的柯里化(currying) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpr ...

随机推荐

  1. (原创)lua日期、时间、时间戳的计算和转换

    ----------------------------------------------日期与时间 print("当前时间戳:") local nowTime = os.tim ...

  2. 【转】iPython入门技巧

    [转]http://www.cnblogs.com/cuiyubo/p/6823478.html 学习<利用python进行数据分析> 第三章 IPython:一种交互式计算和开发环境的笔 ...

  3. vscode中vue代码颜色插件

    vue提示插件[Vscode]       编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整 ...

  4. maven pom.xml 里scope的作用

    <dependency>中<scope>,它主要管理依赖的部署.目前<scope>可以使用5个值:     * compile,缺省值,适用于所有阶段,会随着项目一 ...

  5. CSS 屏幕大小自适应

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法:  @medi ...

  6. spring security 学习一

    1.配置基本的springboot web项目,加入security5依赖,启动项目 浏览器访问,即可出现一个默认的登录页面 2.什么都没有配置 登录页面哪里来的 一般不知从何入手,就看官方文档里是如 ...

  7. kettle的job定时任务的一个小问题

    思考,启动此job,做一个最简单,job实现表输入和表输出,但是实现表输入和表输出要花2个小时.那么这个job定时是如何执行的呢???第一种情况.job定时60分钟即1个小时.当job执行结束(即用了 ...

  8. ansible字符串处理(一)

    [root@node-1 test]# ansible-playbook hba_card_check.yml PLAY [compute[0]] ************************** ...

  9. Cross-Origin Resource Sharing(CORS)详解,CORS详解,CORS原理分析

    Keywords CORS, 跨域,JS跨域调用,Ajax CORS 跨域,跨域详解,CORS跨域原理 Cross-Origin Resource Sharing详解 Cross-Origin Res ...

  10. Moq 在.net Core 单元测试中的使用

    Moq,主要用来伪造接口的实现类,实现方法,属性 moq The most popular and friendly mocking framework for .NET What? Moq (pro ...