浅谈js观察者模式
观察者模式又叫发布订阅模式,它可以让多个观察者对象同时监听某一个主题对象,即在一个事件发生时,不同的对象迅速对其进行相应。就比如当又人闯红灯,不同的人对这件事迅速发起响应,当然这个比喻不太恰当,不过在团队开发中,每个人做自己不同的模块,那你在通过不去动其它人的代码或者说在不去看其他人的代码时怎么去将它们所要的事情做出来呢,这个时候就可以用da到观察者模式了。前面我们说过了单例对象,这里的观察者其实我们也可以只用一个对象,并且这个对象的功能不需要更改。
首先我们定义一个对象,这个对象包括3个方法,注册,发布,还有解除,注册就是把触发我事件的信号加载到数据对象中去,发布就是去触发这个信号,解除就是把某个事件从我的事件库中删除。
var mapleTao={
message:{},
//注册
register:function(type,fn){
if(this.message[type]){
this.message[type].push(fn);
}else{
this.message[type]=[fn];
}
},
//发布
fire:function(type,opt){
if(!this.message[type]) return false;
this.message[type].forEach(function(item){
item(opt);
});
},
//取消
remove:function(type,fn){
var i=this.message[type].indexOf(fn);
if(!this.message[type]||i==-1) return false;
this.message[type].splice(i,1);
}
};
上述就是创建了一个观察者对象,接下来就是对其简单调用了。
(function(){
var maple=function(){
console.log("i am maple");
}
//注册事件introduce
mapleTao.register("introduce",maple);
})();
(function(){
var tao=function(){
console.log("i am tao");
}
//注册事件introduce
mapleTao.register("introduce",tao);
setTimeout(function(){
mapleTao.remove("introduce",tao); //introduce在事件库中去除tao
mapleTao.fire("introduce"); //触发introduce信号 结果为i am maple
},0)
})();
mapleTao.fire("introduce"); //触发introduce信号 结果为i am maple,i am tao
(function(){
var maple=function(obj){ //对参数处理
console.log("i am maple,i am "+obj.status);
}
//注册事件status
mapleTao.register("status",maple);
})();
(function(){
var tao=function(obj){
console.log("i am tao,i am "+obj.name);
}
//注册事件status
mapleTao.register("status",tao);
})();
mapleTao.fire("status",{status:"working",name:"studying"}); //结果 i am maple,i am working i am tao,i am studying

总的来说,观察者模式可以在一个对象发生变化时,其它对象自动更新。
浅谈js观察者模式的更多相关文章
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- 浅谈 js 正则字面量 与 new RegExp 执行效率
原文:浅谈 js 正则字面量 与 new RegExp 执行效率 前几天谈了正则匹配 js 字符串的问题:<js 正则学习小记之匹配字符串> 和 <js 正则学习小记之匹配字符串优化 ...
- 浅谈 js 字符串之神奇的转义
原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...
- 浅谈 js 正则之 test 方法
原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...
- 浅谈 js 数字格式类型
原文:浅谈 js 数字格式类型 很多人也许只知道 ,123.456,0xff 之类的数字格式.其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的. 可能有人说这是 ...
- 浅谈 js 语句块与标签
原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...
- 浅谈 js 字符串 trim 方法之正则篇
原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格 等 ...
- 浅谈 js 字符串 search 方法
原文:浅谈 js 字符串 search 方法 这是一个很久以前的事情了,好像是安心兄弟在学习js的时候做的练习.具体记不清了,今天就来简单分析下 search 究竟是什么用的. 从字面意思理解,一个是 ...
随机推荐
- MongoDB 权限认证
MongoDB已经使用很长一段时间了,基于MongoDB的数据存储也一直没有使用到权限访问(MongoDB默认设置为无权限访问限制),因为考虑到数据安全的原因特地花了一点时间研究了一下,网上搜出来的解 ...
- Error format not a string literal and no format arguments解决方案
原地址: http://blog.csdn.net/joeblackzqq/article/details/25985299 cData.cpp:355:30:error:format not a s ...
- HDU4524+水题
简单. #include<stdio.h> #include<string.h> ; int a[ maxn ]; int main(){ int ca; scanf(&quo ...
- linux hosts一个诡异问题
最近部署环境时遇到一个古怪问题. 背景环境: tomcat服务器 : 192.168.13.78 简称t 依赖服务器 : 192.168.12.159 简称s 二者关系 :t服务器的tomcat应 ...
- 面向XX编程
[一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/5033186.html ] 基于面向XX编程的个人理解 面向过程编程 Procedure Or ...
- asp.net网站后台退出后,点后退按钮仍能进,如何安全退出
用户登录成功后,将用户名保存Session Session["usrename"]=username; 退出后Sessssion["username"]=str ...
- 关于HSL和HSV颜色空间的详细论述
目前在计算机视觉领域存在着较多类型的颜色空间(color space).HSL和HSV是两种最常见的圆柱坐标表示的颜色模型,它重新影射了RGB模型,从而能够视觉上比RGB模型更具有视觉直观性. HSV ...
- EFI脚本
https://software.intel.com/en-us/articles/efi-shells-and-scripting
- Dell笔记本禁用触摸板的方法
一·找到触摸板驱动所在的文件夹(其他型号 的本本,请自己探索一下,找到驱动在哪就行),一般 在 C:\program files\delltpad 中(若没有请下载安 装 ),如图: 二·双击 Del ...
- [NOIP1998]最大数
1998年NOIP全国联赛提高组 题目描述 设有n个正整数 (n<=20), 将它们连接成一排, 组成一个最大的多位整数.例如: n=3时, 3个整数13, 312, 343连接成的最大整数为 ...