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 相关文章推荐
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
Dec 23 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php模拟post提交数据的方法
2015/02/12 PHP
两款万能的php分页类
2015/11/12 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python实现购物车功能的方法分析
2017/11/10 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
乡下人家教学反思
2014/02/01 职场文书
1亿有多大教学反思
2014/05/01 职场文书
2014年项目工作总结
2014/11/24 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
python处理json数据文件
2022/04/11 Python