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


Posted in Javascript onFebruary 05, 2018

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

观察者设计模式概念:

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

在一个会员管理系统中,主账号给子账号充值金额的功能。

场景:主账号有10000元,如果给子账号充值增加1000元,那么主账号的金额应该相对应报减少1000元显示9000元;

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

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

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

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

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

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 相关文章推荐
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
详解原生js实现offset方法
Jun 15 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
JS中Map和ForEach的区别
Feb 05 #Javascript
完美解决axios跨域请求出错的问题
Feb 05 #Javascript
vue 页面加载进度条组件实例
Feb 05 #Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 #Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 #Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 #Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 #Javascript
You might like
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python类的用法实例浅析
2015/05/27 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
业务主管岗位职责范本
2013/12/25 职场文书
店面销售职位的职责
2014/03/09 职场文书
家长通知书教师评语
2014/04/17 职场文书
排查整治工作方案
2014/06/09 职场文书
爱护花草树木的标语
2014/06/11 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
2014年档案室工作总结
2014/12/01 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
话题作文之自信作文
2019/11/15 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Python读写yaml文件
2022/03/20 Python
再谈python_tkinter弹出对话框创建
2022/03/20 Python