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 相关文章推荐
javascript实现画不相交的圆
Apr 07 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
Vue中props的使用详解
Jun 15 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python 加密的实例详解
2017/10/09 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
mac系统安装Python3初体验
2018/01/02 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
opencv3/C++ 平面对象识别&透视变换方式
2019/12/11 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
自动化毕业生专业自荐书范文
2014/02/04 职场文书
上班看电影检讨书
2014/02/12 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
汽车转让协议书范本
2014/12/07 职场文书
营销计划书范文
2015/01/17 职场文书
工程部岗位职责
2015/02/10 职场文书
赢在中国观后感
2015/06/02 职场文书
2016年元旦致辞
2015/08/01 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
浅析Python实现DFA算法
2021/06/26 Python
进行数据处理的6个 Python 代码块分享
2022/04/06 Python