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 相关文章推荐
JS 实现Json查询的方法实例
Apr 12 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 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生成静态页面教程
2012/01/10 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Django中Forms的使用代码解析
2018/02/10 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python魔法方法功能与用法简介
2019/04/04 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
思想品德自我评价
2014/02/04 职场文书
教师节商场活动方案
2014/02/13 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
摄影展策划方案
2014/06/02 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
详细介绍python类及类的用法
2021/05/31 Python
如何用python清洗文件中的数据
2021/06/18 Python