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 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
简单实现js倒计时功能
Feb 13 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Python:slice与indices的用法
2019/11/25 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
环保标语口号
2014/06/13 职场文书
代办出身证明书
2014/10/21 职场文书
安全生产工作汇报
2014/10/28 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
公司更名通知函
2015/04/24 职场文书
2016春季运动会前导词
2015/11/25 职场文书