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

网络编程 2024/9/1 佚名

3 2 1

本文实例讲述了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、与第一种方式相比，第二种方式的代码可读性、可维护性强；

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

JS,设计模式,观察者模式,实时改变,页面,金额数

标签：

JS,设计模式,观察者模式,实时改变,页面,金额数

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

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

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

暂无“JS设计模式之观察者模式实现实时改变页面中金额数的方法”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

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

JS,设计模式,观察者模式,实时改变,页面,金额数

基于axios封装fetch方法及调用实例

JS中Map和ForEach的区别

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接