资讯专栏INFORMATION COLUMN

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

立即前往
首页/文章专栏/JavaScript 观察者模式

JavaScript 观察者模式

zhigoo / 2182人阅读

摘要：生活中的观察者模式就如我们在专卖店预定商品如苹果手机，我们会向专卖店提交预定申请，然后店家受申请，正常这样就完事了。中的观察者模式在中观察者模式的实现主要用事件模型。缺点使用全局的观察者模式会明显降低对象之间的联系。

观察者模式又叫做发布-订阅模式。这是一种一对多的对象依赖关系，当被依赖的对象的状态发生改变时，所有依赖于它的对象都将得到通知。

生活中的观察者模式

就如我们在专卖店预定商品（如：苹果手机），我们会向专卖店提交预定申请，然后店家受申请，正常这样就完事了。假如，近段时间苹果手机的需求很大，而商品有限，那么商家就会要这些果粉预留电话等待通知，等到手机一到，商家就会遍历果粉预留信息，然后发通知给这些果粉。生活中商家强调客户在家等通知即可，并且说一有消息就会通知客户，而不会傻到要客户主动打电话询问，这样不仅客户的代价比较大，商家的负荷更大，用户的轮询方式也从打电话变成了查看短信息。

观察者模式的优势

发布和订阅这两个对象是松耦合地联系在一起的，它们不用彼此熟悉内部的实现细节，但这不影响它们之间的通信，它们只要知道彼此需要做什么就行。当有新订阅者增加时，发布者不需要任何更改，同样的当发布者改变时，订阅者也不会受到影响。

就像新闻联播一样里面的央视主持人换了，也不影响我们看央视的新闻联播，同样你看或不看新闻联播，对央视来说也无影响。

在异步通信中观察者模式也是大有好处，发布者只需按顺序的发布事件即可，而订阅者只需在异步运行期间订阅相关事件即可。

JavaScript中的观察者模式

在JavaScript中观察者模式的实现主要用事件模型。

DOM事件 
</>复制代码 
  1. document.body.addEventListener("click", function() {
  2.     console.log("hello world!");
  3. });

相信这样的代码不少的同学都写过，但我要说这其实就是一种观察者模式的实现，可能一些童鞋还不信，那么看一看修改后的代码。

</>复制代码 
  1. // 发布者
  2. var pub = function() {
  3.     console.log("欢迎订阅!")
  4. }
  5. // 订阅者
  6. var sub = document.body;
  7. // 订阅者实现订阅
  8. sub.addEventListener("click", pub, false);

订阅者可以任意的添加，发布者也可以随意的修改。

自定义事件

虽然，使用dom事件可以轻松解决我们开发中的一部分问题；但是还有一些问题需要我们使用自定义事件来完成。
那面就说一说如何用自定义事件实现代理。

我们还以预定手机为例，参考dom事件的原理来实现观察者模式，用用户的电话号码作为类型，用户的定购信息用一个回调函数来表示。

基本概念定义如下：

商家： 发布者

客户： 订阅者

缓存列表：记录客户的电话，方便商家遍历发通知消息给客户

注：缓存列表，我将它定义为一个对象，用户的电话号码作为key，用户的预定信息是个数组作为value。

代码实现如下：

</>复制代码 
  1. // 定义商家
  2. var merchants = {};
  3. // 定义预定列表
  4. merchants.orderList = {};
  5. // 将增加的预订者添加到预定客户列表中
  6. merchants.listen = function(id, info) {
  7.     if(!this.orderList[id]) {
  8.         this.orderList[id] = [];
  9.     }
  10.     this.orderList[id].push(info);
  11.     console.log("预定成功")
  12. };
  13. //发布消息
  14. merchants.publish = function() {
  15.     var id = Array.prototype.shift.call(arguments);
  16.     var infos = this.orderList[id];
  17.     // 判断是否有预订信息
  18.     if(!infos || infos.length === 0) {
  19.         console.log("您还没有预订信息!");
  20.         return false;
  21.     }
  22.     // 如果有预订信息，则循环打印
  23.     for (var i = 0, info; info = infos[i++];) {
  24.         console.log("尊敬的客户：");
  25.         info.apply(this, arguments);
  26.         console.log("已经到货了");
  27.     }
  28. };
  29. // 定义一个预订者customerA，并指定预定信息
  30. var customerA = function() {
  31.     console.log("黑色至尊版一台");
  32. };
  33. // customerA 预定手机，并留下预约电话
  34. merchants.listen("15888888888", customerA); // 预定成功
  35. // 商家发布通知信息
  36. merchants.publish("15888888888");
  37. /**
  38.    尊敬的客户：
  39.    黑色至尊版一台
  40.    已经到货了
  41.  */
取消订阅

当然，现实中我们可以预定，那么也可以取消预定。其实取消预定的方式也比较简单，就是将客户从预定列表中清除出去。代码实现如下：

</>复制代码 
  1. merchants.remove = function(id, fn) {
  2.     var infos = this.orderList[id];
  3.     if(!infos) return false;
  4.     if(!fn) {
  5.         infos && (infos.length = 0);
  6.     } else {
  7.         for(var i = 0, len = infos.length; i < len; i++) {
  8.             if(infos[i] === fn) {
  9.                 infos.splice(i, 1);
  10.             }
  11.         }
  12.     }
  13. };
  14. merchants.remove("15888888888", customerA);
  15. merchants.publish("15888888888"); // 您还没有预订信息!
全局的观察者模式

实现的代码结构如下：

</>复制代码 
  1. var observer = (function() {
  2.     var orderList = {},
  3.         listen,
  4.         publish,
  5.         remove;
  6.     listen = function(id, fn) {
  7.         ...
  8.     };
  9.     publish = function() {
  10.         ...
  11.     };
  12.     remove = function(id, fn) {
  13.         ...
  14.     };
  15.     return {
  16.         listen: listen,
  17.         publish: publish,
  18.         remove: remove
  19.     }
  20. })();

优点：

使用了全局的观察者模式后，我们不用管商家是谁，只要他能提供我们所需要的东西即可；而且我们也避免了为不同的商家都创建listen，publish，remove方法，这样可以减少资源的浪费。

缺点：

使用全局的观察者模式会明显降低对象之间的联系。一些方法将会被隐藏，而有时我们恰恰需要这些方法的暴露。

是先订阅，还是先发布

在我被问到这个问题时，我也是一愣，当时脑袋里就冒出了‘你怎么不问是先有鸡，还是先有蛋’这样的想法。

按照我的理解我们实现观察者模式，都是订阅者先订阅，然后接收发布者的通知消息。没有反过来想，发布者先发布一条消息，然后等订阅者接收，因为在我的想象中，如果没有订阅者，这消息怎么成功发布。

后来有人跟我说有这样的业务实现，当时我就不假思索的问什么业务，他说QQ的离线模式。这种先发布后订阅的形式是将信息先存储起来，等到订阅者订阅，就立即将信息发送给订阅者。如：当我们将QQ调到离线模式，我们就无法接收信息；当我们将QQ调到登录模式，就马上收在离线模式期间接收到的信息。

这样的例子在生活中也有很多，还拿天气预报，它也可以理解为是先发布，我们后订阅的模式。天预报信息会发布在网上，存储在各个服务器上，我们需要时打开手机就可以得到。

注：提到观察者模式我们就不得不说一下推模型和拉模型。推模型在事件发生时，发布者会将变化状态和数据都推送给订阅者；拉模型在事件发生时，发布者只会给订阅者一个状态改变通知，订阅者会根据发布者提供的接口主动拉取数据。

设计模式周周讲

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

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

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

相关文章

  • JavaScript 发布-订阅模式

    摘要：发布订阅模式订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。 发布-订阅模式，看似陌生，其实不然。工作中经常会用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他们都使用了发布-订阅模式，让开发变得更加高效方便。 一...

    13651657101 评论0 收藏0

  • JavaScript常用设计模式

    摘要：原文链接常用设计模式设计模式设计模式是一种在长时间的经验与错误中总结出来可服用的解决方案。用来模拟接口的相关操作我很帅通过适配器函数来调用目的我很帅学习资料听飞狐聊设计模式系列设计模式汤姆大叔 原文链接： JavaScript常用设计模式 设计模式 设计模式是一种在长时间的经验与错误中总结出来可服用的解决方案。 设计模式主要分为3类： 创建型设计模式：专注于处理对象的创建 Const...

    RyanHoo 评论0 收藏0

  • JavaScript 设计模式（六）：观察者模式与发布订阅模式

    摘要：观察者模式维护单一事件对应多个依赖该事件的对象关系发布订阅维护多个事件主题及依赖各事件主题的对象之间的关系观察者模式是目标对象直接触发通知全部通知，观察对象被迫接收通知。 观察者模式（Observer） 观察者模式：定义了对象间一种一对多的依赖关系，当目标对象 Subject 的状态发生改变时，所有依赖它的对象 Observer 都会得到通知。 简单点：女神有男朋友了，朋友圈晒个图，甜...

    bingo 评论0 收藏0

  • Backbone精髓，观察者模式和事件

    摘要：原文精髓，观察者模式和事件交互逻辑更需要设计模式设计模式将人们在以往的开发过程中的经验加以总结，以指导后人。的事件根据上面讨论，要实现观察者模式，事件是非常重要的机制。总结虽然是模式的框架，但是其核心却是界面的观察者模式和事件机制。 前言 本人并非专业的前端，只是由于需要被迫转做一段时间的前端，一段时间以来开始探索javascript上的MVC模式，最终打算从Backbone下手。在...

    Snailclimb 评论0 收藏0

  • JavaScript设计模式之发布-订阅模式（观察者模式）-Part1

    摘要：设计模式与开发实践读书笔记。发布订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。附设计模式之发布订阅模式观察者模式数据结构和算法系列栈队列优先队列循环队列设计模式系列设计模式之策略模式 《JavaScript设计模式与开发实践》读书笔记。 发布-订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。 例...

    muzhuyu 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhigoo

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<