js中的观察者模式
什么事观察者模式:
这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情,观察者知道主体并能注册事件的回调函数。
代码:
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中的观察者模式的更多相关文章
- js中的观察者模式与发布者/订阅者模式的区别?
- JS设计模式之观察者模式
观察者模式,即发布与订阅模式,实现一对多的一种关系模式,当一种对象接受信号时其他所有依赖均有行为.我们在写code的时候总是会去自定义一些事件,这就是观察者常常使用的地方: JS中的观察者模式应用: ...
- 简单谈谈js中的MVC
MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- 深入理解 Node.js 中 EventEmitter源码分析(3.0.0版本)
events模块对外提供了一个 EventEmitter 对象,即:events.EventEmitter. EventEmitter 是NodeJS的核心模块events中的类,用于对NodeJS中 ...
- jQuery中的观察者模式(Observer Pattern)
在jQuery中,on方法可以为元素绑定事件,trigger方法可以手动触发事件,围绕这2个方法,我们来体验jQuery中的观察者模式(Observer Pattern). ■ on方法绑定内置事件, ...
- 30 行代码实现 JS 中的 MVC
一连串的名字走马观花式的出现和更迭,它们中一些已经渐渐淡出了大家的视野,一些还在迅速茁壮成长,一些则已经在特定的生态环境中独当一面舍我其谁.但不论如何,MVC已经并将持续深刻地影响前端工程师们的思维方 ...
- 浅谈js中的MVC
MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器) 本文将用一个经典的例子todoList来展开 一个事件发生的过程(通信单向流动): 1.用户在视图V ...
- JS中的柯里化(currying) 转载自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
JS中的柯里化(currying) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpr ...
随机推荐
- [Linux]标准IO全缓冲和行缓冲
概述 标准IO中,标准错误是不带缓冲的.若是指向终端设备的流才是行缓冲的,否则是全缓冲的. 行缓冲也可以分配缓冲区,当遇到超大行(超过缓冲区的行),缓冲区内容也会优先刷出. 示例 #include & ...
- django会话
django会话 可以把会话理解为客户端与服务器之间的一次会晤,在一次会话过程中有多次请求和响应,但是由于HTTP协议的特性-->无状态,每次浏览器的请求都是无状态的,无法保存状态信息,也就是说 ...
- 【转载】django 过滤器 、日期格式化参数
过滤器相关: 一.形式:小写{{ name | lower }} 二.串联:先转义文本到HTML,再转换每行到 标签{{ my_text|escape|linebreaks }} 三.过滤器的参数显示 ...
- UVA1449 Dominating Patterns
UVA1449 Dominating Patterns 题目描述 有N个由小写字母组成的模式串以及一个文本串T.每个模式串可能会在文本串中出现多次.你需要找出哪些模式串在文本串T中出现的次数最多. 输 ...
- spring-cloud-hystrix服务熔断与降级
Hystrix是一个用于处理分布式系统的延迟和容错的开源库,在分布式系统里,许多依赖不可避免的会调用失败,比如超时,异常等,Hystrix能保证在一个依赖出问题的情况下,不会导致整体服务失败,避免级联 ...
- xpath定位动态iframe
使用xpath定位 driver.switch_to.frame(driver.find_element_by_xpath("//iframe[starts-with(@id, 'x-URS ...
- 完美解决cannot resolve symbol servlet 的报错
1.右键点击项目,打开open module settings 2.选择Libraries 3.选择中间+号,点击java,然后选择tomcat/lib/servlet-api.jar 4.点击app ...
- 两条命令,实现ssh免密登陆
ssh-keygenssh-copy-id -i 目标服务器ip
- 论文阅读笔记五十一:CenterNet: Keypoint Triplets for Object Detection(CVPR2019)
论文链接:https://arxiv.org/abs/1904.08189 github:https://github.com/Duankaiwen/CenterNet 摘要 目标检测中,基于关键点的 ...
- 解决Windows服务无法访问网络映射盘的问题
下载工具psexec 下载地址:https://docs.microsoft.com/zh-cn/sysinternals/downloads/psexec 百度地址:https://pan.baid ...