JS设计模式大合集

仓库地址：JS设计模式大合集
欢迎大家 Star ，一起交流学习！

JS设计模式-发布订阅者模式

如果你用过VUE、React，你应该对这个发布者订阅者模式不陌生，明天让我们来一起来探讨一下发布订阅者模式。

什么是发布订阅者模式

在我们日常生活中，其实有很多发布订阅者模式案例。

我们在微信里面订阅了一个公众号，这个公众号在某一个时间阶段会给我发推文。
在电商平台预约一个商品，等商品有货时，平台会给我们发短信通知。
点一个外卖。
……

等等数不胜数。

不过从上面的例子，我们可以提取出三样东西，一个是订阅者，一个是平台，一个是发布者。

订阅者会向平台订阅属于自己的个性需求，平台则会收集这个需求，发布者就会根据这个需求发布对应的内容，在此之后，平台会把发布者发布的内容推送到订阅者。

好了，有了这三个基本接下来我们可以开始创造属于我们自己的发布订阅者模式啦。

创建一个发布订阅模式

首先我们需要一个平台，它可以记录订阅者的需求，以及让发布者能够根据需求发布的功能：

1
2
3

const platform = {
    eventPool:{}, // 事件中心，用于存储订阅者下的订单以及对应订单的回调函数
}

有了平台之后，我们需要给订阅者提供订阅事件的功能：

const platform = {
    eventPool:{}, // 事件中心，用于存储订阅者下的订单以及对应订单的回调函数
    // 订阅事件
    on: function(eventName, callback) {
        if(!this.eventPool[eventName]) {
            this.eventPool[eventName] = []; // 一个事件下，可能需要多个任务，所以我们用一个数组来记录
        }
        this.eventPool[eventName].push(callback);
    },
}

同时，我们也要给发布者提供发布事件的功能：

const platform = {
  eventPool:{}, // 事件中心，用于存储订阅者下的订单以及对应订单的回调函数
  	// 发布事件
  emit: function (eventName, data) {
    if (this.eventPool[eventName]) {
      this.eventPool[eventName].forEach(callback => {
        callback(data); // 因为一个事件可能有很多对应的任务，我们之前是用数组存储的，所以这里都要执行
      });
    }
    return; // 如果没有对应的事件名称，则返回
  },
}

取消事件监听

虽然我们事件是成功创建了，但是，如果我们不需要对应的事件了，或者需要对事件进行限制节省资源，所以我们需要对已经不在重要的事件进行移除。

const platform = {
  eventPool: {}, // 事件中心，用于存储订阅者下的订单以及对应订单的回调函数
  // 移除事件
  off: function (eventName) {
    if (this.eventPool[eventName]) {
      delete this.eventPool[eventName];
    }
    return; // 如果没有对应的事件名称，则返回
  }
};

好了，我们把整体拼装起来，并且，也来试一试，是否可以成功进行订阅和发布。

const platform = {
  eventPool: {}, // 事件中心，用于存储订阅者下的订单以及对应订单的回调函数
  // 订阅事件
  on: function (eventName, callback) {
    if (!this.eventPool[eventName]) {
      this.eventPool[eventName] = []; // 一个事件下，可能需要多个任务，所以我们用一个数组来记录
    }
    this.eventPool[eventName].push(callback);
  },
  // 发布事件
  emit: function (eventName, data) {
    if (this.eventPool[eventName]) {
      this.eventPool[eventName].forEach(callback => {
        callback(data); // 因为一个事件可能有很多对应的任务，我们之前是用数组存储的，所以这里都要执行
      });
    }
    return; // 如果没有对应的事件名称，则返回
  },
   // 移除事件
  off: function (eventName) {
    if (this.eventPool[eventName]) {
      delete this.eventPool[eventName];
    }
    return; // 如果没有对应的事件名称，则返回
  }
};

// 创建订阅者
platform.on(`event1`, data1 => {
  console.log('我是event1的回调函数1，他的接受到的数据是：', data1);
});
platform.on(`event1`, data2 => {
  console.log('我是event1的回调函数2，他的接受到的数据是：', data2 + 2);
});
platform.on(`event2`, data3 => {
  console.log('我是event2的回调函数3，他的接受到的数据是：', data3 + '0v0');
});
// 发布者执行任务
platform.emit(`event1`, `chuyuxuan`);
platform.off(`event1`);
platform.emit(`event1`, `chuyuxuan`);
platform.emit(`event2`, `chuyuxuan`);

/** 结果如下
 * 我是event1的回调函数1，他的接受到的数据是： chuyuxuan
 * 我是event1的回调函数2，他的接受到的数据是： chuyuxuan2
 * 我是event2的回调函数3，他的接受到的数据是： chuyuxuan0v0
 */

可以看到，我们的发布，订阅，和取消事件都完美运行。

那么，是不是到这里就已经是完美了嘛？还有优化空间嘛？当然还有。

优化代码

从上面代码可以看到，发布订阅者模式利用到的是一个事件池对象，那是采取类似key-value格式，那么我们可以借助ES6的Map()对它进行处理。同时，对于事件来说，更像是一个类，我们也可以用ES6的class来进一步优化，这样，我们更加借助面相对象思想，使得代码更加易读和维护：

class Platform {
  constructor() {
    this.eventPool = new Map();
  }

  // 订阅事件
  on(eventName, callback) {
    if (typeof callback !== 'function') {
      throw new Error('回调必须是一个函数');
    }

    const callbacks = this.eventPool.get(eventName) || [];
    callbacks.push(callback);
    this.eventPool.set(eventName, callbacks);
  }

  // 发布事件
  emit(eventName, data) {
    const callbacks = this.eventPool.get(eventName);
    if (callbacks) {
      callbacks.forEach(callback => {
        callback(data);
      });
    }
  }

  // 移除事件
  off(eventName, callback) {
    if (this.eventPool.has(eventName)) {
      if (callback) {
        const callbacks = this.eventPool.get(eventName).filter(cb => cb !== callback);
        this.eventPool.set(eventName, callbacks);
      } else {
        this.eventPool.delete(eventName);
      }
    }
  }
}

// 创建平台实例
const platform = new Platform();

// 创建订阅者
platform.on('event1', data1 => {
  console.log('订阅者 1:', data1);
});

platform.on('event1', data2 => {
  console.log('订阅者 2:', data2 + 2);
});

platform.on('event2', data3 => {
  console.log('订阅者 3:', data3 + '0v0');
});

// 发布事件
platform.emit('event1', 'chuyuxuan');
platform.off('event1');
platform.emit('event1', 'chuyuxuan'); // 这不应该触发任何回调，因为 'event1' 已取消订阅
platform.emit('event2', 'chuyuxuan');