观察者模式又被称为发布-订阅模型或消息机制。

基本思想是观察者一个静态(或全局)对象,为大家提供三个方法:发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息,当发布者发布某些消息的时候对应的订阅者就收到消息了。订阅者也可以取消订阅。

 1 var Observer = (function(){
 2     var _messages = {};
 3     return {
 4         regist: function(type,fn) {   //订阅消息
 5             if(typeof _messages[type] === 'undefined'){
 6                 _messages[type] = [fn];
 7             } else {
 8                 _messages[type].push(fn);
 9             }
10         },
11         fire: function(type,args){     //发布消息
12             if(!_messages[type])
13                 return;
14             var events = {
15                 type: type,
16                 args: args;
17             };
18
19             _messages[type].forEach(function(item){
20                 item.call(this,events);  //这里的this不太明
21             });
22
23         },
24         remove: function(type,args){   //取消订阅
25             if(_messages[type] instanceof Array){
26                 _messages[type].lastIndexOf(fn) && _messages[type].splice(i,1);
27                 /*var i = _messages[type].length-1;
28                 for(; i>-1; i--){
29                     _messages[type][i] === fn && _messages[type].splice(i,1);
30                 }*/
31             }
32         }
33     }
34
35 })();

使用场景,用户在留言评论的同时用户消息栏也相应改变。这里订阅者是评论模块和消息模块,发布者是用户操作模块。

 1 //评论模块:
 2 (function(){
 3     Observer.regist('addCommentMessage',addMsg);
 4     Observer.regist('addCommentMessage',removeMsg);
 5     function addMsg(){
 6         //...
 7     }
 8     function removeMsg(){
 9         //...
10     }
11 })();
12
13 //消息模块
14 (function(){
15     Observer.regist('addCommentMessage',changeMsgNum);
16     Observer.regist('removeCommentMessage',changeMsgNum);
17     function changeMsgNum(){
18         //...
19     }
20 })();
21
22 //用户操作模块
23 (function(){
24     $("#submitBtn").onclick = function(){
25         //...
26         Observer.fire('addCommentMessage',{
27             text: text.value,
28             num: 1
29         });
30     };
31     $("#deleteBtn").onclick = function(){
32         //...
33         Observer.fire('removeCommentMessage',{
34             num: -1
35         });
36     };
37 })();

参考:

张容铭《JavaScript设计模式》

转载于:https://www.cnblogs.com/feitan/p/5348406.html

观察者模式——JavaScript相关推荐

  1. ajax php 观察者模式,JavaScript观察者模式定义和dom事件实例详解

    观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: ...

  2. 观察者模式——JavaScript实现之购物结账

    前言 基于JavaScript语言实现观察者模式.以家庭为应用背景,妈妈Lucy要去逛街,看到心仪的物品就会买下来.付钱???Lucy是不会付钱的,肯定是让爸爸Jack付钱啊.所以Jack要一直跟着L ...

  3. javascript 的观察者模式的原理和集线器

    学习之前先看一张图. 这张图片很形象的说明了观察者模式的工作原理.其中最左边那台电脑是信号发起者,我们叫它广播者,所有电脑都是信息接受者(包括最左边的广播者).我们称之为监听者.唯一的缺憾是这张图片是 ...

  4. javascript常见的设计模式

    为什么80%的码农都做不了架构师?>>>    <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了 ...

  5. javascript的几种设计模式

    <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通 ...

  6. javascript中的发布者与订阅者

    javascript中的发布者与订阅者 介绍发布者与订阅者模式 实现发布-订阅模式功能 代码封装 取消订阅事件 开发中遇到的发布--订阅功能 全局--发布订阅对象代码封装 理解模块间通信 介绍发布者与 ...

  7. JavaScript设计模式理解

    之前没有关注过设计模式,一直处于为完成功能而开发的阶段.找同事review代码时,总能轻而易举的发现代码里的不足之处.很多都是自己开发时根本就没想到的. 其实很想知道为什么同事能想到,自己就想不到.可 ...

  8. 《JavaScript设计模式与开发实践》读书笔记之观察者模式

    1.观察者模式 观察者模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. JavaScript中通常采用事件模型替代传统的观察者模式 1.1 逐步实现观 ...

  9. JavaScript 设计模式之观察者模式与发布订阅模式

    前言 在软体工程中,设计模式(design pattern)是对软体设计中普遍存在(反复出现)的各种问题,所提出的解决方案. 设计模式并不直接用来完成程式码的编写,而是描述在各种不同情况下,要怎么解决 ...

  10. 《JavaScript设计模式与开发实践》模式篇(5)—— 观察者模式

    发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状 态发生改变时,所有依赖于它的对象都将得到通知.在 JavaScript 开发中,我们一般用事件模型 来替代传统的发布- ...

最新文章

  1. 神州6号发射成功了--庆祝一下
  2. android apk签名工具_关于keytool和jarsigner工具签名的使用小结
  3. 3、MySQL优化数据库结构的3种方法
  4. JAva面试题(微信分享)
  5. 生态学研究方法(一)
  6. Equation漏洞混淆利用分析总结(下)
  7. 初识推荐算法---算法背景、算法概念介绍、推荐信息选取、常用推荐算法简介
  8. 深入理解 nvidia-docker 2.0
  9. mysql索引 实验_“索引”实验小例
  10. Android深入理解Fragment
  11. d).关于steal lock
  12. 施耐德EVlink 电动车充电站有新漏洞,可导致电动车遭劫持
  13. 【算法笔记】马拉车算法:最长回文子串
  14. could not initialize javavm mysql_Could not initialize JavaVM
  15. T32用的一个python脚本-替换文件中的文件夹路径字符串
  16. Android系统屏幕亮度调节Brightness
  17. 100+个NLP数据集
  18. 鸿蒙车载系统丰田,华为公布三大鸿蒙车载操作系统
  19. 异物堆积,导致手机Type-C接口充电不畅、无法充电的问题
  20. PHP 7.4的新增特性(功能,弃用,速度)

热门文章

  1. e class connect.php,帝国CMS6.6程序剖析——e/class/connect.php
  2. ios xib 四等分_iOS xib文件根据屏幕等比例缩放的适配
  3. 学51单片机需要专门把C语言学透吗
  4. 从函数式接口到lambda表达式
  5. 3.2生产者和消费者(Producers and Consumers)
  6. Hibernate的双向N-N关联(六)
  7. 【渝粤教育】广东开放大学 人类行为与社会环境 形成性考核 (56)
  8. 2016北理复试机试题
  9. Python分布式爬虫打造搜索引擎(四)
  10. eclipse里启动rabbitmq报错 java.net.SocketException: Connection reset