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 <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- Eclipse中怎么安装TestNG单元测试框架
在进行使用的eclipse的进行开发的代码中,必然就会需要进行单元测试,在单元测试的情况提供较多的框架单元测试,例如使用junit单元测试,而在国外进行开发较好的单元测试,提供了较好的测试的报告,ju ...
- 如何隐藏DOM元素
在CSS中,要隐藏DOM元素常见的方法有: 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为abso ...
- CSS3入门--线条动画特效实例
HTML: <div></div> CSS: div{ width: 200px; height: 200px; margin: 200px auto; background: ...
- Sqrtx
我只能想出二分的方法,而且还不一定能写出最简洁的代码.无论刷多少遍,牛顿迭代法我都想不到,莫名有种悲哀的感觉:智力是硬伤啊.就算如此,却还要一遍遍不厌其烦地刷,这才是最悲剧的.多说无益,上代码. 二分 ...
- No module named * 但是已经安装了找不到解决办法
错误现象,把\Lib\site-packages下的安装包挪动位置到新的位置后(多个Python.exe运行位置)引起这类错误 No module named * 但是已经安装了 解决过程,先试图卸载 ...
- linux命令每日一练习 解压命令
.tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)———————————————.gz解压1:gun ...
- ios中文转码的一个奇葩问题
事情是这样的:我要在一个URL中截取一个名为‘vfname’的参数,因为这个参数的值带有中文(转码之前的形式),所以我必须将其转码. URL是这样的: http://devapi.amibaguanl ...
- Javascript的函数自调
嗯 也不知道怎么翻译self-invoked,就当自调吧. 在看bootstrap的轮播插件源码的时候发现一种新的自调函数的写法(其实应该不新了),开头的一段就卡住了,原谅我是个菜鸟,就顺便记录一下. ...
- 在web中使用windows控件,实现摄像头功能
最近做的一个Web版的视频会议项目,需要在网页中播放来自远程摄像头采集的实时视频,我们已经有了播放远程实时视频的使用C#编写的windows控件,如何将其嵌入到网页中去了?这需要使用一种古老的技术,A ...