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的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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批量删除操作(数据访问)
2017/05/23 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
php实现的顺序线性表示例
2019/05/04 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python 关于反射和类的特殊成员方法
2017/09/14 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python中web框架的自定义创建
2019/09/08 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
如何利用cmp命令比较文件
2016/04/11 面试题
劳动实践课感言
2014/02/01 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
宣传口号大全
2014/06/16 职场文书
社区清明节活动总结
2014/07/04 职场文书
芙蓉镇观后感
2015/06/10 职场文书
教师听课学习心得体会
2016/01/15 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书