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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 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
laravel 4安装及入门图文教程
2014/10/29 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
js window.event对象详尽解析
2009/02/17 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中的异常处理简明介绍
2015/04/13 Python
python对html代码进行escape编码的方法
2015/05/04 Python
Python 的类、继承和多态详解
2017/07/16 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python数据归一化及三种方法详解
2019/08/06 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
python实现局域网内实时通信代码
2019/12/22 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
孝老爱亲模范事迹
2014/01/24 职场文书
擅自离岗检讨书
2014/02/11 职场文书
事务机电主管工作职责
2014/02/25 职场文书
党的生日活动方案
2014/08/15 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
办公室禁烟通知
2015/04/23 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
MongoDB数据库之添删改查
2022/04/26 MongoDB