javascript设计模式 ? 观察者模式原理与用法实例分析


Posted in Javascript onApril 22, 2020

本文实例讲述了javascript设计模式 ? 观察者模式原理与用法。分享给大家供大家参考,具体如下:

介绍:前面我们针对系统内一对多,多对多的情况做了解决方案,是使用中介者模式,将所有关联关系交由中介者处理。这一节我们介绍另外一种解决一对多问题的设计模式:观察者模式
观察者模式是使用频率最高的设计模式之一,用于建立一种对象与对象之间的依赖关系。

定义:定义对象之间的之间的一种一对多依赖关系,使得每当一个对象状态发生改变时,其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅模式,模型-视图模式,监听模式或从属模式。观察者模式是一种对象行为型模式。

场景:我们使用观察者模式做一个进制转换的小demo

示例:

var Subject = function(){
  var obServer = [];
  var _state;
 
  this.getState = function(){
    return _state;
  }
  this.setState = function(state){
    _state = state;
    this.notifyAllObservers();
  }
  this.attach = function(ob){
    obServer.push(ob);
  }
  this.notifyAllObservers = function(){
    obServer.map(function(item){
      item.update();
    });
  }
}
 
var BinaryObserver = function(subject){
  var _subject = subject;
  _subject.attach(this);
 
  this.update = function(){
    console.log('Binary String:' + _subject.getState().toString(2));
  }
}
 
var OctalObserver = function(subject){
  var _subject = subject;
  _subject.attach(this);
 
  this.update = function(){
    console.log('Octal String:' + _subject.getState().toString(8));
  }
}
 
var HexaObserver = function(subject){
  var _subject = subject;
  _subject.attach(this);
 
  this.update = function(){
    console.log('Hex String:' + _subject.getState().toString(16));
  }
}
 
var subject = new Subject();
 
new HexaObserver(subject);
new OctalObserver(subject);
new BinaryObserver(subject);
 
subject.setState(15);
// Hex String:f
// Octal String:17
// Binary String:1111

在这个例子里面Subject称为目标,它是被观察的对象,一个目标允许被多个观察者观察,这些观察者存放于obServer的数组中,当目标发生change时通知所有观察者。
BinaryObserver,OctalObserver,HexaObserver这三个类称为观察者,观察者将对目标的改变作出反应。在观察者中需要维护一个指向目标对象的引用。

观察者模式总结:

优点:
* 观察者模式可以实现表示层和数据逻辑层的分离,定义了稳定的消息更新传递机制。
* 观察者模式在观察目标和观察者者之间建立一个抽象的耦合。观察目标只需要维持一个抽象观察者的集合,无需了解其具体观察者。
* 观察者模式支持广播通信,观察目标会向所有已注册的观察者发送通知,简化了一对多系统的设计难度

缺点:
* 在存在大量观察者时,对所有观察者的通知会花大量时间
* 如果观察者和目标之间存在循环依赖,将会导致系统崩溃

适用场景:
* 系统中存在一个对象的改变将导致一个或多个其他对象也发生改变。
* 系统中存在大量依赖链,A影响B,B影响C,C影响D

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
flash遮住div问题的正确解决方法
Feb 27 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
js图片轮播插件的封装
Jul 21 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
Vue组件基础用法详解
Feb 05 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 #Javascript
Vue computed 计算属性代码实例
Apr 22 #Javascript
js 解析 JSON 数据简单示例
Apr 21 #Javascript
react 原生实现头像滚动播放的示例
Apr 21 #Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 #Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 #Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 #Javascript
You might like
php防注
2007/01/15 PHP
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
javascript的函数作用域
2014/11/12 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python中的变量和作用域详解
2016/07/13 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
python将回车作为输入内容的实例
2018/06/23 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python小白学习包管理器pip安装
2020/06/09 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
怎样创建、运行java程序
2014/08/01 面试题
工程监理应届生求职信
2013/11/09 职场文书
公路绿化方案
2014/05/12 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
Python 语言实现六大查找算法
2021/06/30 Python