您好,欢迎访问一九零五行业门户网

观察者模式改变页面金额数的

这次给大家带来观察者模式改变页面金额数的,观察者模式改变页面金额数的的注意事项有哪些,下面就是实战案例,一起来看一下。
本文实例讲述了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、与第一种方式相比,第二种方式的代码可读性、可维护性强;
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
js自动计算酒店住宿费用
图片加载完毕前显示加载圈的效果
js如何做出公共子序列
以上就是观察者模式改变页面金额数的的详细内容。
其它类似信息

推荐信息