通过这篇文章，可以回答以下两个面试问题：
何为MVC？
什么是发布订阅模式
然后通过一个小demo教会你MVC的模块间通讯(使用eventHub)
1.何为MVC
MVC是指所有的页面模块都可以分为三个对象来实现，分别是M-Model，V-View，C-Controller。
Modle是数据模型，用于操作数据，一般结构如下：
const M={
data:{n:100},
update(){},
delete(){}
}
View是视图，负责所有的UI页面，一般结构如下;
const V = {
el: null, //功能区域，可以先为空，然后通过传参赋值
template:
`<div>html内容</div>
`,
render() {
$(this.el).html(this.template)
}
}
Controller是控制器，负责其他内容，一般为：
const C={
init(container){
V.el=container
V.render()
this.bindEvents()
this.bindEventHub()
},
bindEvents(){},//绑定事件
bindEvnetHub(){}//绑定事件中心
}
最后一般会把C.init暴露出去作为接口给其他模块调用。
最大的缺点是当有数据改变的时候,render()时很可能是从新渲染整个模块，包括那些没有改变的元素，性能较差。
优点是可以实现代码的模块化管理，各个模块之间互不影响。
2. 什么是发布订阅模式
直接手撕代码:
window.eventHub={
//事件
events:{},
//发布
on(eventName,fn){
if(this.events[eventName]===undefined){
this.events[eventName]=[]
}
this.events[eventName].push(fn)
}
//订阅
emit(eventName,data){
for(let key in this.events){
if(key===eventName){
const fnList=this.events[ebentName]
fnList.map((fn)=>{
fn.call(undefined,data)
}）
}
}
}
}
优点是它是一个全局对象，所以可以实现任意模块间的通讯。
缺点是当不同模块要发布的时间名一样的时候，但是需要实现的效果却不一样时，就会起冲突，这时候需要改变一个事件的事件名，感觉不是很合理。
3.使用eventHub
做个非常简单的demo吧。这个demo有两个模块，第一个模块是显示一个变量，第二个模块有一个按钮，按一下第一个模块的变量就会+1。点击预览；点击查看文件
如图：
image.png
1.首先要导入eventHub作为全局变量
把eventHub的代码copy到一个文档里面，然后在index.html里面用script标签引入即可。记得在main.js之前插入。
image.png
2. 发布事件
在模块一（含变量）的Controller里面绑定发布事件：
const C= {
init(container) {
V.el = container;
V.render()
C.bindEventBus() //调用绑定发布事件函数
},
bindEventBus() {
//发布事件
eventHub.on('eventName', () => {
//要执行的内容
})
}
}
3.订阅事件
在模块二的button的click事件中订阅事件
const C = {
init(container) {
V.el = container
V.render()
C.bindEvent()
},
bindEvent() {
$('#add').on('click', () => {
eventHub.emit('eventName')
})
}
}
