MVC - Model(模型) View(视图) Controller(控制器), 它是一种软件设计规范(框架模式), 用一种业务逻辑、数据、界面显示分离的方法组织代码, 将业务逻辑聚集到一个部件中, 在改进和个性化定制界面及用户交互的同时, 不需要重新编写业务逻辑

mvc

  • M: Model 模型(业务模型) - 用于处理应用程序数据逻辑部分
    • 通常模型对象负责在数据库中存取数据
  • V: View 视图(用户界面) - 用于处理数据显示部分
    • 通常视图是依据模型数据创建的
  • C: Controller 控制器(用户交互) - 用于处理用户交互部分
    • 通常控制器负责从视图读取数据, 控制用户输入, 并向模型发送数据0

      这三层是紧密联系在一起的, 但又是互相独立的, 每一层内部的变化不影响其他层; 每一层都对外提供接口(Interface), 供上面一层调用; 这样一来, 软件就可以实现模块化, 修改外观或者变更数据都不用修改其他层, 大大方便了维护和升级

优点:

  1. 耦合性低
  2. 复用性高
  3. 生命周期成本低
  4. 部署快
  5. 可维护性强
  6. 有利于软件工程化管理

缺点:

  1. 没有明确定义
  2. 不适合小型/中型规模的应用程序
  3. 增加了系统结构和实现的复杂性
  4. 视图和控制器联系过于紧密
  5. 视图对模型数据的访问效率低
  6. 一般高级的界面工具或构造器不支持模式

简单实现 MVC

1
2
3
4
5
6
7
8
9
10
// 模拟 Model、View、Controller
var M = {}, V = {}, C = {};
// Model 负责存储数据
M.data = 'hello world';
// View 负责将数据输出到视图层
V.render = (M) => { alert(M.data) };
// Controller 作为 M 和 V 的桥梁
C.handleOnload = () => { V.render(M) };
// 当网页读取时调用 Controller
window.onload = C.handleOnload;

React 中的 MVC

React 中的 MVC