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程序设计有所帮助。

相关文章

  • JS实现加载和读取XML文件的方法详解

    JS实现加载和读取XML文件的方法详解

    这篇文章主要介绍了JS实现加载和读取XML文件的方法,结合实例形式分析了javascript针对xml文件的加载与读取相关实现步骤与操作技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript中call,apply,bind的区别与实现

    JavaScript中call,apply,bind的区别与实现

    这篇文章主要介绍了JavaScript中call,apply,bind的区别与实现,文章通过围绕主题思想展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • JS多个表单数据提交下的serialize()应用实例分析

    JS多个表单数据提交下的serialize()应用实例分析

    这篇文章主要介绍了JS多个表单数据提交下的serialize()应用,接合实例形式分析了原生javascript实现多个表单提交时serialize操作相关使用技巧与操作注意事项,需要的朋友可以参考下
    2019-08-08
  • JS鼠标3次点击事件实现代码及扩展思路

    JS鼠标3次点击事件实现代码及扩展思路

    这篇文章主要介绍了JS鼠标3次点击事件实现及扩展思路,需要的朋友可以参考下
    2017-09-09
  • 详解JavaScript错误捕获

    详解JavaScript错误捕获

    这篇文章主要介绍了JavaScript错误捕获的相关资料,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下
    2021-04-04
  • 浅谈JavaScript 覆盖原型以及更改原型

    浅谈JavaScript 覆盖原型以及更改原型

    下面小编就为大家带来一篇浅谈JavaScript 覆盖原型以及更改原型。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随过来看看吧
    2016-08-08
  • 来自腾讯的一个不固定高度得消息的滚动特效

    来自腾讯的一个不固定高度得消息的滚动特效

    8月最后1天,赶紧补篇博客。贴个最近看到的腾讯的特效,写的还可以。先看效果。
    2010-09-09
  • JS实现移动端按首字母检索城市列表附源码下载

    JS实现移动端按首字母检索城市列表附源码下载

    我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人。下面通过本文给大家分享JS实现移动端按首字母检索城市列表功能,需要的的朋友参考下吧
    2017-07-07
  • Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    这篇文章主要介绍了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,涉及鼠标事件及页面元素结点的遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 使弱类型的语言JavaScript变强势

    使弱类型的语言JavaScript变强势

    Javascript (ECMA Script)是一种弱类型的语言.这并不意味着它没有数据类型,只是变量或者Javascript对象属性不需要一个特定类型的值分配给它或者它始终使用相同的值.Javascript中的变量同样支持自由类型转换成为适用(或者要求)的内容以便于使用.
    2009-06-06

最新评论