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

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

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

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

思路
1. 给定一个发布者
2. 面试者将联系方式给发布者
3. 发布者的一个列表有各种职位(web端的，java 的)，里面记载回调函数以便通知这些面试者
4. 最后发布消息的时候，会遍历这个列表的职位的回调函数，告诉面试者面试这个职位是通过还是不通过
5. 如果面试者取消了订阅，那么将回调函数和之前的回调函数作对比，如果相等，就将这个面试者的上班通知去掉

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设计模式笔记 - 观察者模式