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

 更新时间:2018年02月05日 10:09:26   作者:itpinpai  
这篇文章主要介绍了JS设计模式之观察者模式实现实时改变页面中金额数的方法,结合实例形式对比分析了javascript基于观察者模式实时改变页面金额数的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • JavaScript常见手写题超全汇总

    JavaScript常见手写题超全汇总

    作为前端开发,JS是重中之重,下面这篇文章主要给大家介绍了关于JavaScript常见手写题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 详细谈谈JS中的内存与变量存储

    详细谈谈JS中的内存与变量存储

    js中的变量在内存中的具体存储形式是我们学习使用JS必会的,下面这篇文章主要给大家介绍了关于JS中内存与变量存储的相关资料,需要的朋友可以参考下
    2021-08-08
  • JS实现让网页背景图片斜向移动的方法

    JS实现让网页背景图片斜向移动的方法

    这篇文章主要介绍了JS实现让网页背景图片斜向移动的方法,涉及javascript操作背景图片特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 浅谈js对象的创建和对6种继承模式的理解和遐想

    浅谈js对象的创建和对6种继承模式的理解和遐想

    下面小编就为大家带来一篇浅谈js对象的创建和对6种继承模式的理解和遐想。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 使用JS实现一个Sleep函数的示例代码

    使用JS实现一个Sleep函数的示例代码

    这篇文章主要介绍了使用JS实现一个Sleep函数,实现 sleep 函数其实非常简单,主要是理解 JavaScript 中异步执行情况,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • JS实现隔行换色的表格排序

    JS实现隔行换色的表格排序

    本篇文章主要介绍了JS实现隔行换色的表格排序的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 两个table之间相互移动数据

    两个table之间相互移动数据

    两个table之间相互移动数据的实现代码。
    2009-05-05
  • JavaScript实现的商品抢购倒计时功能示例

    JavaScript实现的商品抢购倒计时功能示例

    这篇文章主要介绍了JavaScript实现的商品抢购倒计时功能,可实现分秒级别的实时显示倒计时效果,涉及js日期时间计算与页面元素动态操作相关技巧,需要的朋友可以参考下
    2017-04-04
  • 学习JavaScript中的闭包closure应该注意什么

    学习JavaScript中的闭包closure应该注意什么

    这篇文章主要介绍了学习JavaScript中的闭包closure应该注意什么?在 JavaScript 中, 每当创建一个函数, 闭包就会在函数创建的同时被创建出来,但是学习的时候我们应该注意哪些问题呢,带着疑问一起进入下面文章学习具体内容吧
    2022-06-06
  • Bootstrap每天必学之导航组件

    Bootstrap每天必学之导航组件

    Bootstrap每天必学之导航组件,制作面包屑式导航、导航加下拉菜单效果,感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论