什么事观察者模式:

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

代码:

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. margin:auto你真的理解么?

    含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto ...

  2. Win10 中将网页转换成pdf的简便方法

    注意:该方法不是将网页完整地保存下来,而是选取其中主要的文字信息. (1)打开要保存的网页 (2)按快捷键 Ctrl+P 打开打印界面 (3)选择打印机为 “Microsoft Print to PD ...

  3. insert into

    1. INSERT INTO t1(field1,field2) VALUE(v001,v002);            // 明确只插入一条Value 2. INSERT INTO t1(fiel ...

  4. 用html给div加类似a标签的超链接(转)

    今天项目中遇到用html给div加类似a标签的超链接,回想半天,万幸还是想出来了. 分享一下啊: 1.通过window.open函数 <div onclick="window.open ...

  5. C# 防止程序多开的两种方法

    互斥对象防止程序多开 private void Form1_Load(object sender, EventArgs e) { bool Exist;//定义一个bool变量,用来表示是否已经运行 ...

  6. RabbitMQ教程

    1.引言 RabbitMQ——Rabbit Message Queue的简写,但不能仅仅理解其为消息队列,消息代理更合适.RabbitMQ 是一个由 Erlang 语言开发的AMQP(高级消息队列协议 ...

  7. RabbitMQ 保证消息不丢失

    参考:https://www.imooc.com/article/49814 发送消息的时候,加上messageId字段,数据库记录消息日志表 ,插入的时候为发送中 当收到消息的时候,更改为已发送 , ...

  8. Oracle数据库体系结构之进程结构(4)

    Oracle进程结构包括用户进程,服务进程,后台进程. 1. 用户进程 用户进程在数据库用户要求连接到Oracle服务器时开始启动. 用户进程是要求Oracle服务器交互的一种进程 它必须首先建立一个 ...

  9. James Munkres Topology: Lemma 21.2 The sequence lemma

    Lemma 21.2 (The sequence lemma) Let \(X\) be a topological space; let \(A \subset X\). If there is a ...

  10. 异步简析之BlockingCollection实现生产消费模式

    目前市面上有诸多的产品实现队列功能,比如Redis.MemCache等... 其实c#中也有一个基础的集合类专门用来实现生产/消费模式 (生产模式还是建议使用Redis等产品) 下面是官方的一些资料和 ...