MVC模式(Model-view-controller) 是软件工程中的一种软件架构模式，把软件系统分为三个基本部分:
M-Model(数据模型)负责操作所以数据
V-View(视图)负责所有UI界面
C-Controller(控制器)负责其他

Model

1.model用于封装与应用程序的业务逻辑相关的数据以及数据的处理方法，会有一个或多个视图监听此模型，一旦model的数据发生变化，model将通知有关的视图。

  1. //示例
  2. let Model={
  3.     data:{数据源},
  4.     create:{增加数据},
  5.     delete:{删除数据},
  6.     update(data){
  7.         Object.assign(m.data,data)//用新数据替换旧数据
  8.         eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
  9.     },
  10.     get:{获取数据}
  11. }

View

2.View 代表表示层，也就是用户界面，对于网页来说，就是用户看到的网页HTML代码。当模型的数据发生变化，视图也会相应的刷新。

  1. //示例
  2. let View={
  3.     el:要刷新的元素，
  4.     html：'要显示在页面上的内容'
  5.     init(){
  6.         v.el:需要刷新的元素
  7.     }，
  8.     render(){
  9.         刷新页面
  10.     }
  11. }

Controller

  1. Controller表示控制层，用来对原始数据(Model)进行加工，处理用户的行为和数据model的改变并传送到View
    1. //示例
    2. let Controller={
    3.  init(){
    4.      v.init()//初始化View
    5.      v.render()//第一次渲染页面
    6.      c.autoBindEvents()//自动的事件绑定
    7.      eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
    8.  }，
    9.  events:{事件以哈希表的方式记录存储},
    10.  method(){
    11.      data=新数据
    12.      m.update(data)
    13.  },
    14.  autoBindEvents(){自动绑定事件}
    15. }

    EventBus的作用

    模块通信

    解决模块之间通信的问题，view组件层面，父子组件、兄弟组件通信都可以使用eventbus处理

    模块解耦

    storage change事件，cookie change事件，view事件的事件等，全部转换使用EventBus来订阅和发布，这样就统一了整个应用不同模块之间的通信接口问题。

    EventBus常用api

    1. on（监听事件）
    2. trigger（触发事件）
    3. off（取消监听）
    4. eventBus.trigger('m:updated') // 触发事件,大叫'm 已经更新了'
    5. eventBus.on('m:updated', () => { console.log('here') }) '监听事件，听到后执行函数'

    模块化

    在一个完整的页面应用中，不同的节点功能，不同的结构可以规划为多个模块，每个模块的实现方式以及用到的技术大不相同，使用模块化编程可以减少各个模块之间的响应和联系，可以更方便的优化代码和重构代码，提高我们代码的重用性，便于后期维护。

参考:https://juejin.cn/post/6844904055576379405