前端学习笔记之观察者模式

tommego 发布于2019-08-21 16:52 / 1694人阅读

摘要：观察者模式也称发布订阅模式它的作用就是当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，自动刷新对象状态举个生活比较常见常见的例子比如你去面试之后，面试官看你表现不错，最后会跟你要联系方式，以便之后可以联系你。

观察者模式也称"发布-订阅"模式,它的作用就是当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，自动刷新对象状态

举个生活比较常见常见的例子,比如你去面试之后，面试官看你表现不错，最后会跟你要联系方式，以便之后可以联系你。在这角色扮演当中，你就是“订阅者”，面试官就是“发布者”。

那么发布订阅模式是咋实现的呢？

思路

给定一个发布者

面试者将联系方式给发布者

发布者的一个列表有各种职位(web端的，java 的)，里面记载回调函数以便通知这些面试者

最后发布消息的时候，会遍历这个列表的职位的回调函数，告诉面试者面试这个职位是通过还是不通过

如果面试者取消了订阅，那么将回调函数和之前的回调函数作对比，如果相等，就将这个面试者的上班通知去掉

var Event = (function() {
  var events = {}; //发布者

  //subscribe也就是订阅，post 代表面试者要面的职位，callback表示为回调函数
  function subscribe(post, callback) {
    events[post] = events[post] || []; //发布者的列表里有没有这个面试职位，如果没有就创建一个空数组
    events[post].push(callback);
  }

  //publish 表示发布
  function publish() {
    var post = Array.prototype.shift.call(arguments); //第一个参数指定“键”
    var fns = events[post]; //设置缓存，提高性能
    if (!fns) { //如果发布者的列表里没有这个职位，那肯定是不能发布
      return;
    }
    for (var i = 0; i < fns.length; i++) { //遍历当前的职位的数组里有几个面试者
      fns[i].apply(this, arguments);
    }
  }

  //unsubscribe 表示取消订阅
  function unsubscribe(post, fn) {
    var fns = events[post];
    if (fns) {
      if (fn) {
        for (var i = fns.length; i >= 0; i--) {
          if (fns[i] === fn) fns.splice(i, 1);
        }
      } else {//如果没有传入fn回调函数，直接取消post对应消息的所有订阅
        fns = [];
      }
    } else {//如果发布者的列表没有这个职位，直接 return
      return;
    }
  }
  
  return {
    subscribe: subscribe,
    publish: publish,
    unsubscribe: unsubscribe
  };
})();

测试：

var fn1 = function(time) {
  console.log("小明你通过了面试，上班时间：" + time);
};
var fn2 = function(time) {
  console.log("小强你通过了面试，上班时间：" + time);
};
//小明将联系方式给了发布者，发布者（hr）觉得小明不错，可以通过，于是在列表(java)里写下了一些回调函数，到时候发布的时候将上班时间告诉小明
Event.subscribe("java", fn1);
//小强也订阅了
Event.subscribe("java", fn2);

Event.publish("java", "2017-10-01");


/*输出:
小明你通过了面试，上班时间：2017-10-01
小强你通过了面试，上班时间：2017-10-01
*/

Event.unsubscribe("java", fn1);//删除小明的上班通知
Event.publish("java", "2017-10-01");

/*输出：
小强你通过了面试，上班时间：2017-10-01
*/

参考

Javascript异步编程的4种方法
js设计模式笔记 - 观察者模式

GPU云服务器云服务器设计模式学习笔记设计模式观察者模式观察者模式 php观察者模式

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

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

每周分享第 1 期

摘要：由于微信不能访问外链，需要点击页尾左下角的阅读原文，才能访问本文中的链接。接下来让我带你走进高级前端的世界，在进阶的路上，共勉如果你想加群讨论每期面试知识点，公众号回复加群即可（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）showImg(https://segmentfault.com/img/remote/1460000...

Carbs 2019-08-23 12:41 评论0 收藏0
javascript设计模式学习笔记之发布-订阅模式

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

klivitamJ 2019-08-23 18:01 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
Backbone.js学习笔记（一）

摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

FrancisSoung 2019-08-21 10:21 评论0 收藏0