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

赞 (0)

相关推荐

  • JavaScript设计模式之观察者模式（发布者-订阅者模式）

    观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 复制代码 代码如下: div.onclick  =  function click (){ alert ( "click' ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发. 那么到底什么是观察者模式呢. 先看看生活中的观察者模式. 好莱坞有句名言. "不要给我

  • javascript设计模式 – 策略模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 策略模式原理与用法.分享给大家供大家参考,具体如下: 介绍:策略模式中可以定义一些独立的类来封装不同的算法,每一个类封装一种具体的算法.在这里,每一种算法的封装都可以称之为一种策略.策略模式的主要目的是将算法的定义与使用分开. 定义:定义一系列算法类,将每一个算法封装起来,并让它们可以相互替换.策略模式让算法独立与使用它的客户而变化,也称为政策模式.策略模式是一种对象行为型模式. 场景:使用策略模式实现一个加减乘除的工具类,将四个算法进行封装. 示

  • NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】

    本文实例讲述了NodeJS设计模式.分享给大家供大家参考,具体如下: 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这个对象实例,这就确保了一个类只有一个实例对象.举个例子吧~一间学校刚刚起建还没有图书馆,有的同学就向领导提意见:"hey! 哥们,能不能帮我们建一个图书馆? "(想要一个图书馆实例),然后领导说:"no pro

  • 学习JavaScript设计模式之观察者模式

    一.定义 观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案. (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口.两对象轻松解耦. 二.DOM事件–观察者模式典例 需要监控用户点击document.body的动作,但是我们没有办法预知用户将在什么时间点击

  • Javascript设计模式之观察者模式的多个实现版本实例

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. 使用观察者模式的好处: 1.支持简单的广播通信,自动通知所有已经订阅过的对象. 2.页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性. 3.目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用. 正文(版本一) JS里对观察者模式的实现是通过回调来实现的,我们来先

  • Javascript设计模式之观察者模式(推荐)

    推荐阅读: JavaScript观察者模式(经典) 1.什么是观察者模式 观察者模式有时也称为发布--订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知.(其实sql server中的发布订阅也是这个道理) 2.通俗解释 假如以前村里的广播是一个观察者,那么每个村民就是被观察对象,如果村子里有通知,政策发生改变的时候,就需要通过广播把这个消息发布出去,而不用直接一家家的跑去发通知. 3.代码 <!DOCTYPE html> <html lang=&

  • javascript设计模式 – 状态模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 状态模式原理与用法.分享给大家供大家参考,具体如下: 介绍:状态模式用于解决系统中复杂对象的状态转换以及不同状态下行为的封装问题.状态模式将一个对象的状态从该对象中分离出来,使得对象状态可以灵活变化. 定义:允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类,其别名为状态对象,状态模式是一种对象行为型模式. 场景:在很多情况下我们的页面需要做一些状态判断,是否注册,是否登录,剩余金额是否大于500等等,我们通常是在组件中通过if

  • JavaScript设计模式之观察者模式实例详解

    JavaScript设计模式之观察者模式实例详解

    本文实例讲述了JavaScript设计模式之观察者模式.分享给大家供大家参考,具体如下: 观察者模式 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. * 它分为2个角色:(1)观察者  (2)被观察者 * 观察者模式的目的:对程序的内在变化进行观察,当其有变化的时候,你可以得知,并且可以做出相应的反应. 现在我们通过一个需求来学习该

  • JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

    本文实例讲述了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法.分享给大家供大家参考,具体如下: 观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己的状态. 在观察者模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知.订阅者也称为观察者,而被观察的对象称为发布者或主题.当发生了一个重要的事件时,发布

  • JS设计模式之观察者模式实现实时改变页面中金额数的方法

    JS设计模式之观察者模式实现实时改变页面中金额数的方法

    本文实例讲述了JS设计模式之观察者模式实现实时改变页面中金额数的方法.分享给大家供大家参考,具体如下: 观察者设计模式概念: 有时被称作发布/订阅模式,观察者模式定义了一种一对多的依赖关系,让多个观察者(每个处的主账号金额函数)对象同时监听某一个主题对象(修改子账号金额后调用的deliver的对象Publisher).这个主题对象在状态(调用deliver方法)发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 在一个会员管理系统中,主账号给子账号充值金额的功能. 场景:主账号有1000

  • JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解

    本文实例讲述了JavaScript编程设计模式之观察者模式.分享给大家供大家参考,具体如下: 简介 简单的解释观察者模式,就是一个对象(subject)维护一个依赖他的对象(observers)列表,当自身状态发生变化时,自动通知所有观察者对象.当某个对象不需要获得通知时,可以从对象列表中删除掉. 从上面的解释中我们可以提炼出三个componet: Subject, ObserverList和Observer,用JS实现很简单: function ObserverList(){ this.obs

随机推荐