MVC 软件架构模式

目录

1、MVC（Model-View-Controller）

2、MVC 的具体组成部分

3、EventBus 通信

---

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.渲染(数据)
    })
}

这样一旦调用改方法，就会触发 "数据被修改啦" 这个事件，改事件被捕获就会重新渲染页面。