1、MVC（Model-View-Controller）
MVC 是一种软件架构模式，是模型 (model)－视图 (view)－控制器 (controller) 的缩写。MVC 这一概念是来源于后端的框架构建思想，是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
View 层：视图层，前端开发中的 DOM 层，作用是给用户展示各种信息
Model 层：数据层，数据可以是我们固定的写死的数据，但更多的是来自服务器，从网络上请求下来的数据
Controller 层：控制层，是连接视图和模型的桥梁，具体是指接受用户的输入并调用模型和视图去完成用户的需求
使用 MVC 将数据模型（modele）、页面视图（View）、业务逻辑（Controller）分离能有效地解决如下问题：
用 store 数据更新代替页面频繁 dom 操作，简化业务代码；
全局暂存数据，避免重复请求数据资源；
模块解耦，组件化开发，避免功能模块间互相影响；
局部刷新，减少页面刷新次数，提高用户体验；
2、MVC 的具体组成部分
2.1：M（Model)）层：即数据模型层，数据全都归它管，和数据相关的都放在这里，大概长这个样子：
const model = { 获取数据(){ 获取数据 }, 储存数据(){ 储存数据 }, 增(){}, 删(){}, 改(){}, 查(){} //等一系列数据操作的方法 }
可以看到都是和数据有关系的功能，模块的数据、对数据的操作方法等等，只要是和数据有关的都放在 model 层。
2.2：V（View）层：即视图层，页面相关的展示元素和组件等，只要是和视图相关都放在这里，大概这个样子：
const view = { el: "视图上已经存在用来装字符串模板的容器,一般是一个div" html: "视图字符串模板", 渲染(){ 把模板渲染到视图上 } }
2.3：C（Controller）层：即控制层，M 和 V 不管的，都归这一层管，比如：事件绑定，数据存储之类的
const controller = { 初始化(){ view.渲染() controller.绑定事件() }, 有关事件绑定的信息:{ //表驱动编程：用查表的方法获取值 绑定主体1 : 事件1, 绑定主体2 : 事件2, }, 绑定事件(){ 把事件绑定到相应主体上 }, 事件1(){ 做一些事情 }, 事件2(){ 做一些事情 }, }
以上是 MVC 组成部分的简要介绍，主要的思路就是在数据发生变化的时重新渲染视图，减少了从页面获取 dom 元素再把它放回去的步骤，那么如果监听数据变化呢？这里就可以用到 eventBus 实现对象间通信了。
3、EventBus 通信
eventBus 是一套监听触发机制，它提供了 on()、off() 和 trigger() 等 API，其中主要的 API 是 on() 和 trigger() 方法，on() 用于监听事件，trigger() 用于触发事件，由此可实现模块化开发的对象间通信，使用 eventBus 可以满足最小知识原则，model 层 和 view 层 互相不知道对方的细节，但是却可以调用对方的功能。
import $ from 'jquery' const eventBus = $({})
这里借用一下 jQuery 对象，一个 jQuery 对象同时拥有监听事件的方法和触发事件的方法，我们可以利用它做个监视器~
比如我们在 model 的改方法里加一个事件触发：
改(){ 修改了一些数据; eventBus.trigger("数据被修改啦") }
然后在 controller 中监听这个事件
初始化(){ view.渲染(数据) controller.绑定事件() eventBus.on("数据被修改啦", () => { view.渲染(数据) }) }
