基于发布订阅模式实现 time 和 timeEnd 方法

相信很多同学都用过 console.time 和 console.timeEnd 方法统计代码运行时间。这边本人利用发布订阅模式模拟实现 time 和 timeEnd 方法，代码如下：

class MyConsole {
  constructor() {
    // 全局事件中心
    // 采用先订阅后发布的模式
    this.events = {};
  }
  time(s) {
    let timeStart = new Date().getTime();
    // 订阅事件
    // 使用闭包缓存 timeStart 和 s
    // 如果另外使用一个对象或者数组保存也是一样的
    this.events[s] = function() {
      let timeEnd = new Date().getTime();
      console.log(`${s}: ${timeEnd - timeStart}ms`);
    }
  }
  timeEnd(s) {
    // 发布事件
    this.events[s]();
    // 执行完之后移除订阅，释放闭包缓存的变量
    delete this.events[s];
  }
}

const myConsole = new MyConsole();

myConsole.time("ceshi1");
for(let i=0; i<10000; i++) {
  // do something
}
myConsole.timeEnd("ceshi1");

将自己实现的和原生 API 进行了对比，总体来说还是原生的性能好一点：

let count1 = 0;
myConsole.time("ceshi1");
for(let i = 1; i <= 100000; i++) {
  count1 += i;
}
myConsole.timeEnd("ceshi1");
// ceshi1: 4ms

let count2 = 0;
console.time("console");
for (let i = 1; i <= 100000; i++) {
  count2 += i;
}
console.timeEnd("console");
// console: 5.995ms

let count1 = 0;
myConsole.time("ceshi1");
myConsole.time("ceshi2");
myConsole.time("ceshi3");
for(let i = 1; i <= 100000; i++) {
  count1 += i;
}
myConsole.timeEnd("ceshi1");
myConsole.timeEnd("ceshi2");
myConsole.timeEnd("ceshi3");
// ceshi1: 4ms
// ceshi2: 11ms
// ceshi3: 12ms

let count2 = 0;
console.time("console1");
console.time("console2");
console.time("console3");
for (let i = 1; i <= 100000; i++) {
  count2 += i;
}
console.timeEnd("console1");
console.timeEnd("console2");
console.timeEnd("console3");
// console1: 4.393ms
// console2: 4.654ms
// console3: 4.707ms