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

本文实例讲述了JS设计模式之观察者模式实现实时改变页面中金额数的方法。分享给大家供大家参考,具体如下:

观察者设计模式概念:

有时被称作发布/订阅模式,观察者模式定义了一种一对多的依赖关系,让多个观察者(每个处的主账号金额函数)对象同时监听某一个主题对象(修改子账号金额后调用的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、每一个订阅者可以根据自己的需求来调用,而不影响其它订阅者
3、与第一种方式相比,第二种方式的代码可读性、可维护性强;

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

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

您可能感兴趣的文章:

  • JavaScript设计模式经典之命令模式
  • 深入理解JavaScript系列(34):设计模式之命令模式详解
  • JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
  • JS设计模式之状态模式概念与用法分析
  • JS设计模式之策略模式概念与用法分析
  • JS设计模式之访问者模式定义与用法分析
  • JavaScript设计模式之调停者模式实例详解
  • JS设计模式之责任链模式实例详解
  • JavaScript编程设计模式之构造器模式实例分析
  • JavaScript 设计模式 安全沙箱模式
  • JS设计模式之命令模式概念与用法分析
时间: 2018-02-02

JavaScript设计模式经典之命令模式

一.命令模式概念 命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行.也就是说该模式旨在将函数的调用.请求和操作封装成一个单一的对象,然后对这个对象进行一些列的处理.他也可以用来消除调用操作的对象和实现操作的对象之间的耦合.这为各种具体的类的更换带来了极大的灵活性. 二.命令模式的作用和注意事项 模式作用: 1.将函数的封装.请求.调用结合为一体 2.调用具体的函数解耦命令对象与接收对象 3.提高程序模块化的灵活性 注意事项:

JavaScript编程设计模式之构造器模式实例分析

本文实例讲述了JavaScript编程设计模式之构造器模式.分享给大家供大家参考,具体如下: 经典的OOP语言中,构造器(也叫构造函数)是一个用于初始化对象的特殊方法.在JS中,因为一切皆对象,对象构造器经常被提起. 对象构造器用于建立制定类型(Class)的对象,可以接受参数用于初始化对象的属性和方法. 对象建立 在JS中,有三个常用的方法用于建立对象: //1, 推荐使用 var newObject = {}; //2, var newObject = Object.create( null

JavaScript设计模式之调停者模式实例详解

本文实例讲述了JavaScript设计模式之调停者模式.分享给大家供大家参考,具体如下: 1.定义 调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显作用.从而使他们可以松散偶合.当某些对象之间的作用发生改变时,不会立即影响其他的一些对象之间的作用.保证这些作用可以彼此独立的变化.调停者模式将多对多的相互作用转化为一对多的相互作用.调停者模式将对象的行为和协作抽象化,把对象在小尺度的行为上与其他对象的相互作用分开处理. 2.使用的原因 当对象之间的交互操作很多,且每个对象的行为操

深入理解JavaScript系列(34):设计模式之命令模式详解

介绍 命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及执行可撤销的操作.也就是说改模式旨在将函数的调用.请求和操作封装成一个单一的对象,然后对这个对象进行一系列的处理.此外,可以通过调用实现具体函数的对象来解耦命令对象与接收对象. 正文 我们来通过车辆购买程序来展示这个模式,首先定义车辆购买的具体操作类: 复制代码 代码如下: $(function () { var CarManager = { // 请求

JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能

本文实例讲述了JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能.分享给大家供大家参考,具体如下: 单例模式 单例模式的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例 单例模式最初的定义出现于<设计模式>(艾迪生维斯理, 1994):"保证一个类仅有一个实例,并提供一个访问它的全局访问点." 单例模式定义:"一个类有且仅有一个实例,并且自行实例化向整个系统提供." var Singleton

JS设计模式之访问者模式定义与用法分析

本文实例讲述了JS设计模式之访问者模式定义与用法.分享给大家供大家参考,具体如下: 在访问者模式中,主要包括下面几个角色 1.抽象访问者:抽象类或者接口,声明访问者可以访问哪些元素,具体到程序中就是visit方法中的参数定义哪些对象是可以被访问的. 2.访问者:实现抽象访问者所声明的方法,它影响到访问者访问到一个类后该干什么,要做什么事情. 3.抽象元素类:接口或者抽象类,声明接受哪一类访问者访问,程序上是通过accept方法中的参数来定义的.抽象元素一般有两类方法,一部分是本身的业务逻辑,另外

JS设计模式之命令模式概念与用法分析

本文实例讲述了JS设计模式之命令模式概念与用法.分享给大家供大家参考,具体如下: 客户创建命令:调用者执行该命令:接收者在命令执行时执行相应操作 简单命令对象一般用来消除二个对象(调用者和接收者)之间的耦合,而复杂的命令对象则一般用来封装不可分的或事务性的指令. 命令模式的主要用途是把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.凡是两个对象间互动方式需要有更高的模块化程度时都可以用到这种模式. 命令的意思是用一个简单方法或函数去执行和这个命令相关的实际操作.就如同用遥控器打开电视

JavaScript 设计模式 安全沙箱模式

命名空间 JavaScript本身中没有提供命名空间机制,所以为了避免不同函数.对象以及变量名对全局空间的污染,通常的做法是为你的应用程序或者库创建一个唯一的全局对象,然后将所有方法与属性添加到这个对象上. 复制代码 代码如下: /* BEFORE: 5 globals */ // constructors function Parent() {} function Child() {} // a variable var some_var = 1; // some objects var mo

JS设计模式之责任链模式实例详解

本文实例讲述了JS设计模式之责任链模式.分享给大家供大家参考,具体如下: 责任链设计模式: 在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知道链上的哪一个对象最终处理这个请求,这使得系统可以在不影响客户端的情况下动态地重新组织和分配责任. 责任链模式涉及到的角色如下所示: ● 抽象处理者(Handler)角色:定义出一个处理请求的接口.如果需要,接口可以定义 出一个方法以设定和返回对下家的引

JS设计模式之策略模式概念与用法分析

本文实例讲述了JS设计模式之策略模式概念与用法.分享给大家供大家参考,具体如下: 策略模式的概念引用: 在软件开发中也常常遇到类似的情况,实现某一个功能有多种算法或者策略,我们可以根据环境或者条件的不同选择不同的算法或者策略来完成该功能. 如查找.排序等,一种常用的方法是硬编码(Hard Coding)在一个类中,如需要提供多种查找算法,可以将这些算法写到一个类中,在该类中提供多个方法,每一个方法对应一个具体的查找算法:当然也可以将这些查找算法封装在一个统一的方法中,通过if-else-或者ca

JS设计模式之状态模式概念与用法分析

本文实例讲述了JS设计模式之状态模式概念与用法.分享给大家供大家参考,具体如下: 1. 概述 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 2. 解决的问题 主要解决的是当控制一个对象状态转换的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同的一系列类当中,可以把复杂的逻辑判断简单化. function Context( _state ) { this.state = _state; this.request = function() { this.stat

PHP设计模式之适配器模式原理与用法分析

本文实例讲述了PHP设计模式之适配器模式原理与用法.分享给大家供大家参考,具体如下: 一.什么是适配器模式 适配器模式有两种:类适配器模式和对象适配器模式.其中类适配器模式使用继承方式,而对象适配器模式使用组合方式.由于类适配器模式包含双重继承,而PHP并不支持双重继承,所以一般都采取结合继承和实现的方式来模拟双重继承,即继承一个类,同时实现一个接口.类适配器模式很简单,但是与对象适配器模式相比,类适配器模式的灵活性稍弱.采用类适配器模式时,适配器继承被适配者并实现一个接口:采用对象适配器模式时

js设计模式之单例模式原理与用法详解

本文实例讲述了js设计模式之单例模式原理与用.分享给大家供大家参考,具体如下: 关于设计模式,我的理解是它是业务代码的提前解决方案.意思就是说在没有真正的业务之前,设计模式就存在了,这个是显然的.设计模式是人长期从事业务总结的具有普通适用性的解决方案. 就个人来讲,写了太多的命令式编程代码,所谓命令式代码就是业务需要怎样就写怎么样的功能,比如添加一个点击事件,比如进行一个验证等扥.写就写了很少站在设计模式的角度或者前人的角度去改善代码. 不给自己找客观原因,最近开始关注设计模式,尝试从设计模式的

PHP设计模式之观察者模式定义与用法分析

本文实例讲述了PHP设计模式之观察者模式定义与用法.分享给大家供大家参考,具体如下: 观察者模式 当一个对象的状态发生改变时,依赖他的对象会全部收到通知,并自动更新 场景:当一个事件发生后,要执行一连串更新操作,传统的编程方式,就是在事件的代码之后直接加入处理逻辑,当更新逻辑增多之后,代码变得难以维护,这种方式是耦合式的,侵入式的,增加新的逻辑需要改变事件主题的代码 观察者模式实现了低耦合,非侵入式的通知与更新 abstract class EventGenerator { private $O

JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】

本文实例讲述了JS图片延迟加载插件LazyImgv1.0用法.分享给大家供大家参考,具体如下: 注:LazyImg 必须定义lazy-data属性,属性值是src的图片路径 引入JS文件: <script type="text/javascript" src="js/lazyImg.v1.0.js"></script> 默认情况下: 在IMG中满足以任何一个条件,都会加载图片: 1.没有class属性 2.如果有class属性并且属性中不包含

JS正则表达式修饰符global(/g)用法分析

本文实例讲述了JS正则表达式修饰符global(/g)用法.分享给大家供大家参考,具体如下: /g修饰符代表全局匹配,查找所有匹配而非在找到第一个匹配后停止.先看一段经典代码: var str = "123#abc"; var noglobal = /abc/i;//非全局匹配模式 console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出

JS立即执行函数功能与用法分析

本文实例讲述了JS立即执行函数功能与用法.分享给大家供大家参考,具体如下: 相信大家经常会遇到下面这两种写法: (function(){ ... })() 和 (function(){ ... }()) 关于这样写是什么意思呢?有什么区别呢? 在此之前,我们需要了解几个概念: 函数声明.函数表达式.匿名函数 函数声明: function fnName() {...} ; 使用 function 关键字声明一个函数,再执行一个函数名,叫函数声明. 函数表达式: var fnName = funct

js类的继承定义与用法分析

本文实例讲述了js类的继承定义与用法.分享给大家供大家参考,具体如下: 如何实现类的继承呢? 有如下2个构造函数: function PeopleClass(){ this.type = "人"; }; PeopleClass.ptototype = { getType:function(){ alert("这是一个人"); } }; function StudentClass(name,sex){ this.name = name; this.sex = sex;