MVC与发布订阅模式

通过这篇文章，可以回答以下两个面试问题：
何为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:
        `
html内容
      `,
    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')
        })
    }
}