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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
JavaScript 布尔操作符解析  && || !
Aug 10 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
详解jQuery选择器
Dec 21 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
手把手教你从零开始react+antd搭建项目
Jun 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 事件机制(2)
2011/03/23 PHP
file_get_contents("php://input", "r")实例介绍
2013/07/01 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
浅说js变量
2011/05/25 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
用python与文件进行交互的方法
2018/03/01 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python学生管理系统学习笔记
2019/03/19 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
网游商务专员求职信
2013/10/15 职场文书
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
法定授权委托证明书
2014/09/27 职场文书
抗洪救灾标语
2014/10/08 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python