资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/javascript - 发布-观察者模式的小案例

javascript - 发布-观察者模式的小案例

xuxueli / 1918人阅读

摘要：今天我们讨论的是发布观察者模式，也叫订阅模式，在里，该模式要如何实现呢，首先我们先看一个现实生活中的例子小明在工作几年后，准备买房结婚，于是他到售楼处，找售楼人员询问当前的价格，得知售楼价每平是小明好几个月工资的时候，小明犹豫了，于是他回

今天我们讨论的是发布-观察者模式，也叫订阅模式，在javascript里，该模式要如何实现呢，首先我们先看一个现实生活中的例子

小明在工作几年后，准备买房结婚，于是他到售楼处，找售楼人员询问当前的价格，得知售楼价每平是小明好几个月工资的时候，小明犹豫了，于是他回去后，每天都给售楼处打电话，询问售楼人员的价格，售楼人员也会耐心解答，但是第二天又来了一个小芳，于是小芳每天也在打电话，时间久了，人越来越多，售楼人员每天接这么多电话，肯定吃不消要跳槽，当然我们只是举例子，现实情况是，售楼人员会留下小明，小芳等等人的电话存在花名册里，这就是订阅，然后等房价降下来的时候，售楼人员一个个打电话通知他们，这样双方都省了力气，订阅消息的人也拿到了应得的消息。现在假设花名册是 clientList , 售楼处是salePart，以此我们写一个简单发布-观察者模式的代码

</>复制代码 
  1. var salePart = {}  // 售楼处
  2.   var clientList = []  // 花名册
  3.   var xiaoming = {
  4.     name: "小明",
  5.     fn: function () {
  6.       var args = [].slice.call(arguments)
  7.       args.unshift(this.name)
  8.       console.log(args.join(","))
  9.     }
  10.   }
  11.   salePart.listen = function (person) {  // 售楼处登记来访者的信息
  12.     clientList.push(person)
  13.   }
  14.   salePart.trigger = function (type, price) {  // 售楼处通知来访者信息，type为售房面积，price为售房价格
  15.     if (clientList.length > 0) {
  16.       for (var i = 0, person; person = clientList[i++];) {
  17.         if (typeof person.fn === "function") {
  18.           person.fn(type, price)
  19.         }
  20.       }
  21.     }
  22.   }
  23.   salePart.listen(xiaoming)
  24.   salePart.trigger("square80", 60000)  // 打印出来  小明,square80,60000

下面小芳也要来看房，可是小芳比小明有钱的多，她要看的是200平米的房子，这样把小芳在添加进去的时候，售楼处就不能按照分类来进行通知他们的，200平米的房子的通知小明也能看到，这样小明会更扎心，万一不开心，就会损失一个潜在客户，所以我们还要完善一下上述代码，让售楼处可以按照房屋面积分别通知对应的买房者

</>复制代码 
  1.  var salePart = {}  // 售楼处
  2.   var clientList = {}  // 花名册
  3.   var xiaoming = {
  4.     name: "小明",
  5.     type: "s80",
  6.     fn: function () {
  7.       var args = [].slice.call(arguments)
  8.       args.unshift(this.name)
  9.       console.log(args.join(","))
  10.     }
  11.   }
  12.   var xiaofang = {
  13.     name: "小芳",
  14.     type: "s200",
  15.     fn: function () {
  16.       var args = [].slice.call(arguments)
  17.       args.unshift(this.name)
  18.       console.log(args.join(","))
  19.     }
  20.   }
  21.   salePart.listen = function (person) {  // 售楼处登记来访者的信息
  22.     var type = person.type
  23.     if (!clientList[type] || clientList[type].length < 0) {  // 原来的花名册先分类，然后再存入每个人的信息
  24.       clientList[type] = []
  25.     }
  26.     clientList[type].push(person)
  27.   }
  28.   salePart.trigger = function (type, price) {  // 售楼处通知来访者信息，type为售房类型，price为售房价格
  29.     if (clientList[type] && clientList[type].length > 0) {
  30.       for (var i = 0, person; person = clientList[type][i++];) {
  31.         if (typeof person.fn === "function") {
  32.           person.fn(type, price)
  33.         }
  34.       }
  35.     }
  36.   }
  37.   salePart.listen(xiaoming)
  38.   salePart.listen(xiaofang)
  39.   salePart.trigger("s80", 60000)  // 打印出来  小明,square80,60000
  40.   salePart.trigger("s200", 200000)  // 打印出来  小芳,square200,200000

可以看到，小明只能接收到80平米的房价信息，小芳呢，也只能看到200平米的房价信息，这样售楼处又回到了一片欣欣向荣的社会主义和谐景象，但是在实际开发中，上面的代码并不利于维护，因为很松散，我们可以用对象的方式来把代码重构一下

</>复制代码 
  1. var SalePart = function () {
  2.     this.clientList = {}
  3.   }
  4.   SalePart.prototype.listen = function () {  // 现在我们把该函数处理为可以一次接收多个来访者
  5.     var persons = [].slice.call(arguments)
  6.     for (var i = 0, p; p = persons[i++];) {
  7.       var type = p.type
  8.       if (!this.clientList[type] || this.clientList[type].length < 0) {
  9.         this.clientList[type] = []
  10.       }
  11.       this.clientList[type].push(p)
  12.     }
  13.   }
  14.   SalePart.prototype.trigger = function (type, price) {
  15.     if (this.clientList[type] && this.clientList[type].length > 0) {
  16.       for (var i = 0, p; p = this.clientList[type][i++];) {
  17.         if (typeof p.fn === "function") {
  18.           p.fn(type, price)
  19.         }
  20.       }
  21.     }
  22.   }
  23.   var salePart = new SalePart()
  24.   salePart.listen(xiaoming, xiaofang)
  25.   salePart.trigger("s80", 50000)  // 小明,s80,50000 感谢党和国家房价终于降了！
  26.   salePart.trigger("s200", 100000)  // 小芳,s200,100000  这么便宜，买买买！！！

以上就是本章的内容，结合实际案例希望大家看起来更好理解一些，如有疑问，可以在下方留言，看到后我会尽快回复。

云服务器 GPU云服务器 设计模式 观察者模式 观察者模式 php观察者模式 ios观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93586.html

相关文章

  • 观察者模式的使用介绍

    摘要：观察者模式介绍观察者模式又称发布订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象发生改变的时候，所依赖它的对象都能得到通知。关于内部的观察者模式可以参数这篇文档。总结总之，观察者模式在中的使用是非常广泛的。 javascript观察者模式 介绍 观察者模式又称发布-订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象发生改变的时候，所依赖它的对象都能得到通知。例如：我们订阅...

    ityouknow 评论0 收藏0

  • 前端知识点

    摘要：原理对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。在目标发出内容改变的事件后，直接接收事件并作出响应。首先是目标的构造函数，他有个数组，用于添加观察者。 关于排序 js中sort函数的底层实现机制？ js中sort内置多种排序算法，是根据要排序数的乱序程度来决定使用哪一种排序方法。V8 引擎 sort 函数只给出了两种排序 Inse...

    wums 评论0 收藏0

  • 《JavaScript 模式》知识点小抄本（下）

    摘要：缺点不符合开闭原则，如果要改东西很麻烦，继承重写都不合适。预防低水平人员带来的风险。开闭原则，高拓展性。这里的订阅者称为观察者，而被观察者称为发布者，当一个事件发生，发布者会发布通知所有订阅者，并常常以事件对象形式传递消息。 介绍 最近开始给自己每周订个学习任务，学习结果反馈为一篇文章的输出，做好学习记录。 这一周(02.25-03.03)我定的目标是《JavaScript 模式》...

    xiguadada 评论0 收藏0

  • JavaScript 中常见设计模式整理

    摘要：开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点，从而对它们有比较清晰的认知。 showImg(https://segmentfault.com/img/remote/1460000014919705?w=640&h=280); 开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设...

    Nosee 评论0 收藏0

  • javascript设计模式学习笔记之发布-订阅模式

    摘要：发布订阅模式定义对象间的一种一对多的依赖关系当一个对象的状态发生改变时所有依赖于它的对象都将得到通知简单实现定义发布者缓存列表存放订阅者的回调函数定义订阅者发布消息测试订阅者价格订阅者价格发布消息上面的实现方式导致了每个订阅者都会收到发布 发布-订阅模式 定义对象间的一种 一对多 的依赖关系, 当一个对象的状态发生改变时, 所有依赖于它的对象都将得到通知 简单实现 // 定...

    klivitamJ 评论0 收藏0

发表评论

登陆后可评论

0条评论

xuxueli

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2023 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<