我终于懂了系列 | 发布订阅模式

这是我参与更文挑战的第11天，活动详情查看： 更文挑战

发布订阅模式简单版

订阅可以想象成B站的点击关注，你一旦关注了某位Up主，当这位Up主发布了新的视频，你将收到新视频发布的消息推送，前提是你得先关注，这样才能获得后续的消息推送。

首先我们定义一个对象，对象里的list用来装载订阅的频道，emit方法用来发布，on用来订阅，remove用来取消订阅。

let message = {
    list: {},
    //发布
    emit() {
        let key = [].shift.call(arguments),
            fns = this.list[key];
        if (!fns || fns.length === 0) {
            return false;
        }
        fns.forEach(fn => {
            fn.apply(this, arguments);
        });
    },
    //订阅
    on(key, fn) {
        if (!this.list[key]) {
            this.list[key] = [];
        }
        this.list[key].push(fn);
    },
    //取消订阅
    remove(key, fn) {
        let fns = this.list[key];
        if (!fns) return false;
        if (!fn) {
            fns && (fns.length = 0);
        } else {
            fns.forEach((cb, i) => {
                if (cb === fn) {
                    fns.splice(i, 1);
                }
            });
        }
    }
};

//消息模板
let messagefn = (videoName, theme) => {
    console.log(`你订阅的AUp主发布了新视频《${videoName}》，是关于${theme}的，快去看看吧！`);
}

//先订阅，才能收到后续发布的消息
//订阅AUp主
message.on('AUp主', messagefn);
//订阅BUp主
message.on('BUp主', messagefn);

//两个Up主发布了新的视频推送
message.emit('AUp主', 'xxx', '鬼畜');
message.emit('BUp主', 'xxx', '影评');

/*
你收到了订阅Up主的消息推送：
你订阅的AUp主发布了新视频《xxx》，是关于鬼畜的，快去看看吧！
你订阅的AUp主发布了新视频《xxx》，是关于影评的，快去看看吧！
*/


message.remove('BUp主');// 取消 BUp主 的订阅
message.emit('BUp主', 'xxx', '吃播');//当BUp主发布了新的视频，你将不再接收到 BUp主 频道的消息推送
复制代码

发布订阅模式完整版

class EventEmeitter {
  constructor() {
    this._events = this._events || new Map(); // 储存事件/回调键值对
    this._maxListeners = this._maxListeners || 10; // 设立监听上限
  };
  emit(type, ...args) {
      let handler;
      // 从储存事件键值对的this._events中获取对应事件回调函数
      handler = this._events.get(type);
      if (args.length > 0) {
        handler.apply(this, args);
      } else {
        handler.call(this);
      }
      return true;
  };
  addListener(type, fn) {
      // 将type事件以及对应的fn函数放入this._events中储存
      if (!this._events.get(type)) {
        this._events.set(type, fn);
  };
  removeListener(type, fn) {
      const handler = this._events.get(type); // 获取对应事件名称的函数清单
      // 如果是函数,说明只被监听了一次
      if (handler && typeof handler === "function") {
        this._events.delete(type, fn);
      } else {
        let postion;
        // 如果handler是数组,说明被监听多次要找到对应的函数
        for (let i = 0; i < handler.length; i++) {
          if (handler[i] === fn) {
            postion = i;
          } else {
            postion = -1;
          }
        }
        // 如果找到匹配的函数,从数组中清除
        if (postion !== -1) {
          // 找到数组对应的位置,直接清除此回调
          handler.splice(postion, 1);
          // 如果清除后只有一个函数,那么取消数组,以函数形式保存
          if (handler.length === 1) {
            this._events.set(type, handler[0]);
          }
        } else {
          return this;
    }
  }
}
复制代码