订阅

订阅，又名观察者(你说观察者，我还真就知道了) 。 名义上是一种模式。

前言

今儿面试。。。面试体验很差。。。不过提到了一个概念“订阅”。
原话：
面试官：你知道订阅么？
我：订阅？
面试官：你干了两年，订阅你都不知道？
我：？？？？ 我说说事件侦听吧？
面试官：那行，你说说吧。
我：....

为期两年的开发中。。真的没有遇到过订阅，从字面理解，就是说：一个东西改变后，要告诉别人我改变了。从这个理解出发，我想到的就是事件侦听，准确的说，是自定义事件的事件侦听。

下面以侦听localStorage改变为例，写一下自定义事件侦听

js 创建侦听函数

const listenStorageKeys= ["shop_id"];  // 需要侦听的localstorage
// 添加js 侦听localstorage
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
  if(listenStorageKeys.includes(key)){
    var setItemEvent = new Event("setItemEvent."+key);
    // 自定义字段
    setItemEvent.set_key = key;  
    setItemEvent.set_value = newValue;
    window.dispatchEvent(setItemEvent);
  }
  orignalSetItem.apply(this,arguments);
};

// 使用
window.addEventListener("setItemEvent.shop_id", function (e) {
 console.log(e.set_key ,e.set_value,"cccccccccccc")
});

然而在回来的过程中。我记住了这个名词：“订阅”，所以现在搜一下，看看订阅是什么

参考文章：

1. Javascript设计模式之发布-订阅模式
2. js中的一对多 - 订阅发布模式
3. 深入理解JavaScript系列（32）：设计模式之观察者模式

第二篇，更倾向于Event.listen的使用 ，但也进一步说明，订阅实际上就是总结的这几点

从第一篇文章中，我总结了以下几点：

• 订阅实际上是一个。。。类
• 这个类，包含以下属性
  1. peopleList : 订阅内容 ，包含着订阅后需要执行的操作和订阅内容
  2. listen ： 增加订阅后需要执行的操作
  3. trigger：执行订阅操作

var event = {
    peopleList:[], // 这里应该用对象比较好
    listen:function (key,fn) {
        if (!this.peopleList[key]) { //如果没有订阅过此类消息，创建一个缓存列表
        this.peopleList[key] = [];
        }
        this.peopleList[key].push(fn)
    },
    trigger:function () {
         let key = Array.prototype.shift.call(arguments);
        let fns = this.peopleList[key];
        if (!fns || fns.length == 0) {//没有订阅 则返回
            return false;
        }
        for(var i=0,fn;fn=fns[i++];){
            fn.apply(this,arguments);
        }
    }
}

var installEvent  = function (obj) {
    for(var i in event){
        obj[i] = event[i];
    }
}

let yourMsg = {};
installEvent(yourMsg);
yourMsg.listen('marrgie',function (name) {
    console.log(`${name}想知道你结婚`);
})
yourMsg.listen('unemployment',function (name) {
    console.log(`${name}想知道你失业`);
})

yourMsg.trigger('marrgie','张三');
yourMsg.trigger('unemployment','李四');
/*
张三想知道你结婚
李四想知道你失业
*/