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

 更新时间:2020年04月22日 09:10:46   作者:李小强  
这篇文章主要介绍了javascript设计模式 – 观察者模式,结合实例形式分析了javascript观察者模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • JavaScript引用类型RegExp基本用法详解

    JavaScript引用类型RegExp基本用法详解

    这篇文章主要介绍了JavaScript引用类型RegExp基本用法,结合实例形式较为详细的分析了引用类型RegExp正则表达式相关函数使用技巧与操作注意事项,需要的朋友可以参考下
    2018-08-08
  • 利用Echarts如何实现多段圆环图

    利用Echarts如何实现多段圆环图

    这篇文章主要给大家介绍了关于利用Echarts如何实现多段圆环图的相关资料,文中通过实例代码代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • firefox下frameset取不到值的解决方法

    firefox下frameset取不到值的解决方法

    IE FF都可以直接通过Frame的Name来访问,但是FrameSet不支持name属性
    2010-09-09
  • webpack项目轻松混用css module的方法

    webpack项目轻松混用css module的方法

    这篇文章主要介绍了webpack项目轻松混用css module的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • JavaScript获得表单target属性的方法

    JavaScript获得表单target属性的方法

    这篇文章主要介绍了JavaScript获得表单target属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JS字符串拼接的几种常见方式总结

    JS字符串拼接的几种常见方式总结

    最近有经常用到连接字符串的方法,但是对整体的方法比较模糊,这里记录一下,下面这篇文章主要给大家介绍了关于JS字符串拼接的几种常见方式,需要的朋友可以参考下
    2022-11-11
  • 微信小程序授权登录实现方案wx.getUserProfile(2022年最新版)

    微信小程序授权登录实现方案wx.getUserProfile(2022年最新版)

    微信在最近开始要求使用wx.getUserProfile()来获取用户的昵称,头像等信息,所以下面这篇文章主要给大家介绍了关于2022年最新版微信小程序授权登录实现方案wx.getUserProfile的相关资料,需要的朋友可以参考下
    2022-11-11
  • JavaScript中的null和undefined用法解析

    JavaScript中的null和undefined用法解析

    这篇文章主要介绍了JavaScript中的null和undefined用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 借用Google的Javascript API Loader来加速你的网站

    借用Google的Javascript API Loader来加速你的网站

    加速页面加载速度有一个方法就是把CSS和JS文件放到另外一个单独的服务器上,这样在访问量比较大的情况下可以分担主服务器的压力
    2009-01-01
  • bootstrap模态框弹出和隐藏,动态改变中间内容的实例

    bootstrap模态框弹出和隐藏,动态改变中间内容的实例

    今天小编就为大家分享一篇bootstrap模态框弹出和隐藏,动态改变中间内容的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论