<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> // 类似于一个事件中心(构造函数) 里面有一个管家负责管理事件 function EventCenter () { this.guanjia = { 'a': [], 'b': [] } } // 相当于添加一个观察者,负责这个事件中心内的时间(往里面添加事件或者给事件添加回调) //需要参数是事件名,以及对应的回调函数 EventCenter.prototype.$on = function(eventName,fn){ if (this.guanjia[eventName]) { this.guanjia[eventName].push(fn) }else { this.guanjia[eventName] = [fn] } } // 相当于一个执行者,负责执行事件中心的事件,(执行对应事件还有包含的所有回调函数) EventCenter.prototype.$emit = function(eventName) { if (this.guanjia[eventName]) { this.guanjia[eventName].forEach(fn =>{ fn() }) } } const app = new EventCenter() // 添加事件 app.$on('a',() => { console.log('a1'); }) app.$on('a',()=>{ console.log('a2'); }) app.$on('a',()=>{ console.log('a3'); }) // 调用事件 app.$emit('a') </script></body></html>
