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

45次阅读

共计 704 个字符,预计需要花费 2 分钟才能阅读完成。

// 公布订阅模式 ==> 一对多的关系;  实质是回调;  参考内置 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')

正文完
 0