1 使用命名空间 观察者模式
提供一个window.xxx ={},各个模块直接在这里面交流数据。
image.png
缺点 代码耦合
2发布/订阅
image.png
使用eventHub托管,模块1向eventHub传递事件名称与数据,其他板块当有该事件时就执行该事件。
个个模块之间不知道互相的存在,没有代码耦合。
window.eventHub = { //订阅/发布
events:{
},
emit(eventName,data){ //发布事件
for(let key in this.events){
if(key === eventName){
let fnList = this.events[key]
fnList.map((fn)=>{
fn.call(undefined,data)
})
}
}
},
on(eventName,fn){ //订阅事件
if(this.events[eventName] === undefined){
this.events[eventName] = []
}
this.events[eventName].push(fn)
},