观察者模式——JavaScript
观察者模式又被称为发布-订阅模型或消息机制。
基本思想是观察者一个静态(或全局)对象,为大家提供三个方法:发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息,当发布者发布某些消息的时候对应的订阅者就收到消息了。订阅者也可以取消订阅。
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相关推荐
- ajax php 观察者模式,JavaScript观察者模式定义和dom事件实例详解
观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: ...
- 观察者模式——JavaScript实现之购物结账
前言 基于JavaScript语言实现观察者模式.以家庭为应用背景,妈妈Lucy要去逛街,看到心仪的物品就会买下来.付钱???Lucy是不会付钱的,肯定是让爸爸Jack付钱啊.所以Jack要一直跟着L ...
- javascript 的观察者模式的原理和集线器
学习之前先看一张图. 这张图片很形象的说明了观察者模式的工作原理.其中最左边那台电脑是信号发起者,我们叫它广播者,所有电脑都是信息接受者(包括最左边的广播者).我们称之为监听者.唯一的缺憾是这张图片是 ...
- javascript常见的设计模式
为什么80%的码农都做不了架构师?>>> <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了 ...
- javascript的几种设计模式
<Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通 ...
- javascript中的发布者与订阅者
javascript中的发布者与订阅者 介绍发布者与订阅者模式 实现发布-订阅模式功能 代码封装 取消订阅事件 开发中遇到的发布--订阅功能 全局--发布订阅对象代码封装 理解模块间通信 介绍发布者与 ...
- JavaScript设计模式理解
之前没有关注过设计模式,一直处于为完成功能而开发的阶段.找同事review代码时,总能轻而易举的发现代码里的不足之处.很多都是自己开发时根本就没想到的. 其实很想知道为什么同事能想到,自己就想不到.可 ...
- 《JavaScript设计模式与开发实践》读书笔记之观察者模式
1.观察者模式 观察者模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. JavaScript中通常采用事件模型替代传统的观察者模式 1.1 逐步实现观 ...
- JavaScript 设计模式之观察者模式与发布订阅模式
前言 在软体工程中,设计模式(design pattern)是对软体设计中普遍存在(反复出现)的各种问题,所提出的解决方案. 设计模式并不直接用来完成程式码的编写,而是描述在各种不同情况下,要怎么解决 ...
- 《JavaScript设计模式与开发实践》模式篇(5)—— 观察者模式
发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状 态发生改变时,所有依赖于它的对象都将得到通知.在 JavaScript 开发中,我们一般用事件模型 来替代传统的发布- ...
最新文章
- 神州6号发射成功了--庆祝一下
- android apk签名工具_关于keytool和jarsigner工具签名的使用小结
- 3、MySQL优化数据库结构的3种方法
- JAva面试题(微信分享)
- 生态学研究方法(一)
- Equation漏洞混淆利用分析总结(下)
- 初识推荐算法---算法背景、算法概念介绍、推荐信息选取、常用推荐算法简介
- 深入理解 nvidia-docker 2.0
- mysql索引 实验_“索引”实验小例
- Android深入理解Fragment
- d).关于steal lock
- 施耐德EVlink 电动车充电站有新漏洞,可导致电动车遭劫持
- 【算法笔记】马拉车算法:最长回文子串
- could not initialize javavm mysql_Could not initialize JavaVM
- T32用的一个python脚本-替换文件中的文件夹路径字符串
- Android系统屏幕亮度调节Brightness
- 100+个NLP数据集
- 鸿蒙车载系统丰田,华为公布三大鸿蒙车载操作系统
- 异物堆积,导致手机Type-C接口充电不畅、无法充电的问题
- PHP 7.4的新增特性(功能,弃用,速度)
热门文章
- e class connect.php,帝国CMS6.6程序剖析——e/class/connect.php
- ios xib 四等分_iOS xib文件根据屏幕等比例缩放的适配
- 学51单片机需要专门把C语言学透吗
- 从函数式接口到lambda表达式
- 3.2生产者和消费者(Producers and Consumers)
- Hibernate的双向N-N关联(六)
- 【渝粤教育】广东开放大学 人类行为与社会环境 形成性考核 (56)
- 2016北理复试机试题
- Python分布式爬虫打造搜索引擎(四)
- eclipse里启动rabbitmq报错 java.net.SocketException: Connection reset