前端设计模式之:发布订阅模式

// 发布订阅模式 ==> 一对多的关系;  本质是回调;  参考内置dom2事件
// DOM.addEventListener('click', function () { })
// DOM.addEventListener('click', function () { })


class Event {
  // 订阅 || 监听
  listen(event, cb) {
    if (!this.obj[event]) {
      this.obj[event] = [];
    }
    this.obj[event].push(cb)
  }
  // 触发函数
  trigger(key, ...agrs) {
    this.obj[key].forEach(fn => {
      fn.apply(this, agrs);
    })
  }
}

class SalesOffice extends Event {
  obj = {};
  constructor() {
    super();
  }
}

const salesOffice = new SalesOffice()

// 绑定事件
salesOffice.listen('click', function (a, b) {
  console.log('click', a, b, this === salesOffice);
})
salesOffice.listen('click', (a, b) => {
  console.log('click', a, b);
})
salesOffice.listen('move', (a, b) => {
  console.log('move', a, b);
})

// 触发事件
const remind = event => {
  salesOffice.trigger(event, 'aa', 'bb');
};

remind('click')
remind('move')

你可能感兴趣的:(javascript)