关闭

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

3502人阅读 评论(0) 收藏 举报
分类:

观察者设计模式概念:

有时被称作发布/订阅模式,观察者模式定义了一种一对多的依赖关系,让多个观察者(每个处的主账号金额函数)对象同时监听某一个主题对象(修改子账号金额后调用的deliver的对象Publisher)。这个主题对象在状态(调用deliver方法)发生变化时,会通知所有观察者对象,使它们能够自动更新自己。


在一个会员管理系统中,主账号给子账号充值金额的功能。
场景:主账号有10000元,如果给子账号充值增加1000元,那么主账号的金额应该相对应报减少1000元显示9000元;

页面上有多种处需要实时改变的位置,怎么办?


在上图中有三处总余额要显示;

通过子加减按钮来调整账号余额的话,这三处的总余额也需要相对改变;


第一种方式:在一个函数中加添加多个元素对象,这样可以是一个门面模式,来简化调用重复的代码;

function modifyPrice(price) {
  $("#a1").html(price);
  $("#a2").html(price);
  $("#a3").html(price);
  $("#a4").html(price);
}


第二种方式:用观察者设计模式,如果状态改变了和它相关的依赖也会随之变化;
// 订阅者
function a1( price ) {
  console.log( price );
  $("#a1").html(price);
}
// 订阅者
function a2( price ) {
  console.log( price );
  $("#a2").html(price);
}
// 订阅者
function a3( price ) {
  console.log( price );
  $("#a3").html(price);
}
// 订阅者
function a4( price ) {
  console.log( price );
  $("#a4").html(price);
}


// 发布者
function PublisherPrice() {
  this.subscribers = [];
  this.addSubscriber = function( subscriber) {
    // some  如果返回true说明this.subscriber数姐中已经有了相同的订阅者了,当遇到第一个比较值是true就返回true,如果没有遇到true最后返回一个false;
    var isExsit = this.subscribers.some(function( el ){
      return el == subscriber
    });


    if ( !isExsit ) {
      this.subscribers.push( subscriber );
    }
    return this;
  }
  this.deliver = function( 
    // forEach 相当于是for循环
    this.subscribers.forEach(function( fn ) {
      fn(price);
    });


    return this;
  }
}


客户端调用

var publisherPrice = new PublisherPrice();
publisherPrice.addSubscriber(a1);
publisherPrice.addSubscriber(a2);
publisherPrice.addSubscriber(a3);
publisherPrice.addSubscriber(a4);
publisherPrice.deliver("¥200.00");


第二种有什么优点?
1、每一个订阅者都是相互独立的只和发布者有关系,与发布者是一对多的关系,也可以是一对一的关系。
2、每一个订阅者可以根据自己的需求来调用,而不影响其它订阅者
2、与第一种方式相比,第二种方式的代码可读性、可维护性强;


1
0
查看评论

JavaScript设计模式--观察者模式

一、定义观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 在JavaScript中,一般使用事件模型来替代传统的观察者模式。 好处: (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案。 (2)可取代对象之间...
  • ligang2585116
  • ligang2585116
  • 2015-12-20 19:22
  • 5091

设计模式之观察者模式与事件委托

观察者模式:定义了一种一对多的依赖关系,让多个观察者对象同时监听某个主题对象。这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自己更新自己。         观察者结构模式图:         &...
  • wangdan199112
  • wangdan199112
  • 2014-02-16 21:36
  • 2285

《设计模式之禅》学习小结之观察者模式,门面模式和备忘录模式

一。观察者模式
  • aid414944
  • aid414944
  • 2014-04-15 08:59
  • 666

大话西游之设计模式_起手篇

介绍了设计模式是什么。能干什么、及怎么运用? 通过西游记中故事的分析,将常用设计模式融合在故事的实现中,帮助大家理解&记住各种设计模式的概念及使用方法。 达到活学活用的情况~
  • myhc2014
  • myhc2014
  • 2015-10-15 10:52
  • 747

浅谈JAVA设计模式之——观察者模式(Observer)

一、概述 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 二、适用性 1.当一个抽象模型有两个方面,其中一个方面依赖于另一方面。 将这二者封装在独立的对象中以使它们可以各自独立地改变和复用。 2.当对一个对象的改变需要同时改变其它对象,而...
  • l1028386804
  • l1028386804
  • 2015-05-09 13:22
  • 1109

设计模式(五)观察者模式

观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听莫一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。
  • itachi85
  • itachi85
  • 2016-03-02 17:41
  • 40387

设计模式——观察者模式(Observer)

要想正确理解设计模式,首先必须明确它是为了解决什么问题而提出来的。 设计模式学习笔记,欢迎交流。 ——Shulin 转载请注明出处:http://blog.csdn.net/zhshulin 1、概念          ...
  • u012909091
  • u012909091
  • 2014-08-20 16:52
  • 2947

使用javascript模拟观察者模式和事件监听广播机制

感谢一直支持和关注我的同学和朋友,希望能给大家带来一点帮助.以下是完整源码.谢谢!使用javascript模拟观察者模式和事件监听广播机制 - 作者:张波 zhangbo99@gmail.com         ...
  • topzhangbo
  • topzhangbo
  • 2010-07-27 02:20
  • 1764

SQL金额加密

select dbo.retNumber(salary,'YR'),salary from pay_specify where em_no='1188'  11.67 67629.91
  • jmlei
  • jmlei
  • 2015-07-17 13:29
  • 512

java事件监听机制(观察者设计模式的实际运用)

package cn.yang.test.controller;/**java的事件监听机制和观察者设计模式 * Created by Dev_yang on 2016/3/1. */ public class Demo { public static void main(String[...
  • u014284252
  • u014284252
  • 2016-03-01 10:21
  • 541
    个人资料
    • 访问:984214次
    • 积分:11752
    • 等级:
    • 排名:第1526名
    • 原创:287篇
    • 转载:75篇
    • 译文:2篇
    • 评论:168条
    博客专栏
    最新评论