观察者模式又称发布/订阅模式   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. 浅谈对ionic项目的理解

    在思考怎么将客户端app连接到服务器的时候,就在想ionic项目的本质是什么,一开始因为ionic serve这一命令,我以为它自己就是个服务器,但是后来一细想又感觉不是这样,不然客户端又该怎么和服务 ...

  2. linux系统中查看系统位数(转载)

    查看系统多少位网上很多种说话   ### getconf WORD_BIT 错误的 这3个是对的        getconf LONG_BIT    echo $HOSTTYPE uname -a  ...

  3. Html标签第一课

    <p>段落标签</p> <h1>字体标签,1到6,越来越小</h1>.....<h6></h6><h>标签自动换行 ...

  4. Windows 8.1 with Update MSDN 简体/英文/繁体

    PS:请不要使用离线下载,以免镜像损坏! 1.CN: 文件名:cn_windows_8.1_enterprise_with_update_x64_dvd_4048578.isoSHA1:2D9BFE9 ...

  5. 当C#中带有return的TryCatch代码遇到Finally时代码执行顺序

    编写的代码最怕出现的情况是运行中有错误出现,但是无法定位错误代码位置.综合<C#4.0图解教程>,总结如下: TryCatchFinally用到的最多的是TryCatch,Catch可以把 ...

  6. kendo ui之grid列表

    1.test_grid.jsp <html><head> <%@ include file="/WEB-INF/jsp/common/top.jsp" ...

  7. 百度地图结合echarts并添加行政区块

    作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...

  8. css3 文字轮番滚动效果2——改进版

    1.优化了之前的代码: 2.修正了先前按照文字的条目的数量计算速度的问题,现在改为按照字符的个数计算动画执行一次需要的时间,更为精确: 3.增添了每一行JS代码的注释. 4.这个案例的用途一般为告警信 ...

  9. Python学习路程day18

    Python之路,Day18 - Django适当进阶篇 本节内容 学员管理系统练习 Django ORM操作进阶 用户认证 Django练习小项目:学员管理系统设计开发 带着项目需求学习是最有趣和效 ...

  10. C#方法参数传递机制

    1:value(值传递).ref(引用传递).out(输出传递) ref和out使用效果上面是等效的,它们的区别在于:参数标记为ref,那么必须在调用函数之前初始化参数的值:参数标记为out,调用函数 ...