javascript设计模式之观察者模式
观察者模式又称发布/订阅模式 publish/subscribe
它是一种一对多的关系,让多个观察者对象同时监听某一主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得他们能够自动更新自己。
function msgBus(){
var msgMap = {}; // internal message bus
var instance = {};
/**
* @function subscribe
* @description subscribe message listener.
* @param msgType {string} - message type to be listen.
* @param handler {function} - handler function when the message sent.
* @instance
*/
instance.subscribe = function(msgType,handler){
if(msgType == null){
console.error("Message type is null");
return instance;
}
if(handler == null){
console.error("handler is null");
return instance;
}
var subscribeArray = msgMap[msgType];
if(subscribeArray == null){
subscribeArray = new Array();
msgMap[msgType] = subscribeArray;
}
if(subscribeArray.indexOf(handler) < 0){
subscribeArray.push(handler);
}
return instance;
}
/**
* @function unsubscribe
* @description unsubscribe message listener.
* @param msgType {string} - message type to be unsubscribe.
* @param handler {function} - handler function to be removed.
* @instance
*/
instance.unsubscribe = function(msgType,handler){
var subscribeArray = msgMap[msgType];
if(subscribeArray != null){
var index = subscribeArray.indexOf(handler);
if(index > 0){
subscribeArray.splice(index,1);
}
}
return instance;
}
/**
* @function publish
* @description publish message.
* @param msgType {string} - message type to be published.
* @param data {object} - message data.
* @instance
*/
instance.publish = function(msgType,data){
var subscribeArray = msgMap[msgType];
if(subscribeArray == null){
return;
}
for(var i=0;i<subscribeArray.length;i++){
try{
subscribeArray[i](data);
}catch(e){
console.error("Error when sending Message: "+msgType);
}
}
return instance;
}
return instance;
}
测试一下:
var instance = msgBus();
instance.subscribe("subscribe",function(data){console.log("this is "+data)}); instance.publish("subscribe","cangjingkong"); // this is cangjingkong
javascript设计模式之观察者模式的更多相关文章
- JavaScript设计模式之观察者模式(学习笔记)
设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...
- 再起航,我的学习笔记之JavaScript设计模式18(观察者模式)
观察者模式 观察者模式(Observer): 又被称为发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合. 创建一个观察者对象 首先我们创建一个闭包对象,让其在页面加 ...
- JavaScript设计模式-22.观察者模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- javascript 设计模式之观察者模式
观察者模式又叫发布——订阅模式,顾名思义pub——sub就是被动触发的,:不要给我......,我会给你.......就是一个发布订阅的解释,实质就是对程序中的某个对象状态进行监听观察,并且在该对象发 ...
- JavaScript设计模式(10)-观察者模式
观察者模式 1. 介绍 发布者与订阅者是多对多的方式 通过推与拉获取数据:发布者推送到订阅者或订阅者到发布者那边拉 使并行开发的多个实现能彼此独立地进行修改 其实我们在前端开发中使用到的时间监听就是浏 ...
- JavaScript设计模式与开发实践 - 观察者模式
概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...
- javaScript 设计模式系列之一:观察者模式
介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),一个目标对象管理所有相依于它的观察者对象.该模式中存在两个角色:观察者和被观察者.目标对象与观察者之间的抽象耦合关系能够单独扩展 ...
- Javascript设计模式之我见:观察者模式
大家好!本文介绍观察者模式及其在Javascript中的应用. 模式介绍 定义 定义对象间一种一对多的依赖关系,使得每当一个对象改变状态,则所有依赖于它的对象都会得到通知并被自动更新. 类图及说明 S ...
- [转] JavaScript设计模式之发布-订阅模式(观察者模式)-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
随机推荐
- Bootstrap <基础二十五>警告(Alerts)
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- ASP通过ADODB读取Access数据库
<% On Error Resume Next set conn=server.createobject("adodb.connection") mypath=server. ...
- 白皮 Chapter 1
6.29 今天主要做了一些1.5中的小结和练习,果然换语言思路也要跟着变么…各种不爽啊不爽… scanf各种忘记&,还有各种忘记return 0… average temperature su ...
- window下在同一台机器上安装多个版本jdk,修改环境变量不生效问题处理办法
window下在同一台机器上安装多个版本jdk,修改环境变量不生效问题处理办法 本机已经安装了jdk1.7,而比较早期的项目需要依赖jdk1.6,于是同时在本机安装了jdk1.6和jdk1.7. 安装 ...
- PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)
PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...
- 如何让UIView中的Button点击之后跳转到另一个ViewController上去,ViewController上也有一个按钮 可以返回
第一种方法:如果使用导航第一个按钮方法:[self.navigationController pushViewController:secondVC animated:YES];第二个按钮方法:[se ...
- Dapper学习笔记(2)-链接引用
在研究Dapper源码时发现Dapper NET45类库中的SqlMapper.cs文件前面有个蓝色的箭头图标,发现在Dapper NET45文件夹下根本不存在SqlMapper.cs文件,其文件属性 ...
- (转)整体把握jQuery -jQuery 的原型关系图
整体把握jQuery -jQuery 的原型关系图 (原)http://www.html5cn.org/article-6529-1.html 2014-7-2 17:12| 发布者: html5cn ...
- 2016 - 1 - 25 CSS初步 (二)
1.The customising link We can change the link's style when we move our pointer on the link like that ...
- java开发模式学习
1.瀑布模式 这种模式适合小项目,一层层进行编码,没有规模的设计, 2.原型模式 先做模板给客户在做实体 3.面向对象模式 用面向对象的思想进行开发 4.螺旋模式 从内到外一层层开,