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

前端之家收集整理的这篇文章主要介绍了JS设计模式之观察者模式实现实时改变页面中金额数的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

观察者设计模式概念:

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

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

场景:

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

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

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

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

第一种方式:

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

第二种方式:

用观察者设计模式,如果状态改变了和它相关的依赖也会随之变化;

订阅者 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; } }

客户端调用

第二种有什么优点?

1、每一个订阅者都是相互独立的只和发布者有关系,与发布者是一对多的关系,也可以是一对一的关系。 2、每一个订阅者可以根据自己的需求来调用,而不影响其它订阅者 3、与第一种方式相比,第二种方式的代码可读性、可维护性强;

更多关于JavaScript相关内容可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

猜你在找的JavaScript相关文章