我的回答

  1. class Observer {
  2. constructor() {
  3. this.ob = {}
  4. }
  5. depend(key, cb) {
  6. if (!this.ob[key]) {
  7. this.ob[key] = []
  8. }
  9. this.ob[key].push(cb)
  10. }
  11. notify(key) {
  12. this.ob[key] && this.ob[key].forEach(cb => cb())
  13. }
  14. }

参考回答

  1. class EventEmitter {
  2. constructor() {
  3. // 存放订阅的名称和事件
  4. this.events = {};
  5. }
  6. // 订阅事件的方法
  7. on(eventName, callback) {
  8. if(this.events[eventName]) {
  9. // 事件是否存在,存在则追加一条订阅事件
  10. this.events[eventName].push(callback);
  11. } else {
  12. // 不存在,新增一条事件数组
  13. this.events[eventName] = [callback];
  14. }
  15. }
  16. // 出发订阅的方法
  17. emit(eventName) {
  18. // 遍历执行所有订阅的事件
  19. this.events[eventName] && this.events[eventName].forEach((cb) => cb());
  20. }
  21. // 移除订阅事件
  22. removeListener(eventName, callback) {
  23. if(this.events[eventName]) {
  24. this.events[eventName] = this.events[eventName].filter((cb) => cb !== callback);
  25. }
  26. }
  27. // 只执行一次订阅的事件,然后移除
  28. once(eventName, callback) {
  29. const fn = () => {
  30. callback();
  31. this.removeListener(eventName, fn);
  32. };
  33. this.on(eventName, fn);
  34. }
  35. }
  36. const callback1 = () => {
  37. console.log('callback1');
  38. };
  39. let eventEmitter = new EventEmitter();
  40. eventEmitter.on('click', () => {console.log('click');});
  41. eventEmitter.on('click', callback1);
  42. eventEmitter.emit('click');
  43. eventEmitter.removeListener('click', callback1);
  44. eventEmitter.emit('click');
  45. eventEmitter.once('once-click', () => {console.log('once-click');});
  46. eventEmitter.emit('once-click');
  47. eventEmitter.emit('once-click');