观察者模式又称发布/订阅模式   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设计模式之观察者模式的更多相关文章

  1. JavaScript设计模式之观察者模式(学习笔记)

    设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...

  2. 再起航,我的学习笔记之JavaScript设计模式18(观察者模式)

    观察者模式 观察者模式(Observer): 又被称为发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合. 创建一个观察者对象 首先我们创建一个闭包对象,让其在页面加 ...

  3. JavaScript设计模式-22.观察者模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. javascript 设计模式之观察者模式

    观察者模式又叫发布——订阅模式,顾名思义pub——sub就是被动触发的,:不要给我......,我会给你.......就是一个发布订阅的解释,实质就是对程序中的某个对象状态进行监听观察,并且在该对象发 ...

  5. JavaScript设计模式(10)-观察者模式

    观察者模式 1. 介绍 发布者与订阅者是多对多的方式 通过推与拉获取数据:发布者推送到订阅者或订阅者到发布者那边拉 使并行开发的多个实现能彼此独立地进行修改 其实我们在前端开发中使用到的时间监听就是浏 ...

  6. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  7. javaScript 设计模式系列之一:观察者模式

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),一个目标对象管理所有相依于它的观察者对象.该模式中存在两个角色:观察者和被观察者.目标对象与观察者之间的抽象耦合关系能够单独扩展 ...

  8. Javascript设计模式之我见:观察者模式

    大家好!本文介绍观察者模式及其在Javascript中的应用. 模式介绍 定义 定义对象间一种一对多的依赖关系,使得每当一个对象改变状态,则所有依赖于它的对象都会得到通知并被自动更新. 类图及说明 S ...

  9. [转] JavaScript设计模式之发布-订阅模式(观察者模式)-Part1

    <JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...

随机推荐

  1. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  2. python学习09——字典(3)

    今天写了一道python字典题目,用了上次字典(2)中的方法,代码如下: json = {', 'IP':'10.0.0.1'} def find_value(themap, word): if wo ...

  3. jsp学习之基于mvc学生管理系统的编写

    mvc开发模式:分别是 model层 view层 Control层 在学生管理系统中,model层有学生实体类,数据访问的dao层,view层主要是用于显示信息的界面,Control层主要是servl ...

  4. html xml

    XML被设计用来携带数据. XML不是用来替代HTML的.XML和HTML为不同的目的而设计: XML被设计用来描述数据,其焦点是数据的内容. HTML被设计用来显示数据,其焦点是数据的外观. HTM ...

  5. eclipse下的反编译

    Eclipse 安装反编译插件jadclipse(经验总结) 根据网上搜集的材料以及亲身安装测试,总结经验如下,希望能够帮助有需要的朋友们,本总结有助于朋友们少走弯路哦!jadclipse可以帮助查看 ...

  6. dwg格式用什么打开

    dwg文件怎么打开?dwg格式用什么打开?如何打开dwg文件?今天小编在这里推荐几款控件可以实现打开预览编辑DWG格式文件的目的. CADViewX是一款强大的CAD文件以及图片浏览库,在不需要其他三 ...

  7. 010 winform

    2016-01-23 1.winform应用程序是一种智能客户端技术,我们可以使用winform应用程序帮助我们获得信息或者传输信息等. 2.属性Name:在后台要获得前台的控件对象,需要使用Name ...

  8. JAVA多线程超时加载当网页图片

    先上图: 这一次没有采取正则匹配,而采取了最简单的java分割和替代方法进行筛选图片 它能够筛选如下的图片并保存到指定的文件夹 如: “http://xxxx/xxxx/xxx.jpg” 'http: ...

  9. js之事件冒泡和事件捕获详细介绍

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  10. C#生成图片缩略图(2种思路)

    前言:在日常图片浏览中,如果图片过多,只有一张张的打开图片才能知道图片的内容,显然这样浏览起来非常不便.Windows系统在浏览图片时提供了缩略图的功能,这样大大的方便了浏览者了解每张图片的内容,本实 ...