MVC模式

MVC模式将应用程序分为：模型Model、视图View、控制器Controller三个模块 ，用一种将业务逻辑、数据、视图分离的方式组织架构代码， 通过分离关注点的方式来支持改进应用组织方式，其促成了业务数据Model 从用户界面View中分离出来，还有第三个组成部分Controller负责管理传统意义上的业务逻辑和用户输入。

通常将MVC模式看作架构型设计模式。

基本介绍

前后端开发常常将视图、数据、业务逻辑等写在一个模块内， 如果业务内容比较多，容易造成层次的混乱，增加开发与维护的成本， 使用MVC模式可以将数据层、视图层、控制器层进行分层组织，用以减少耦合。

MVC模式的每个模块负责不同的作用和职责：

模型（Model）：

• 模型表示应用程序的数据和业务逻辑。
• 它负责处理数据的存储、获取、更新和验证，以及执行与数据相关的操作和业务规则。
• 模型通常是独立于用户界面和表示层的，可以被多个视图和控制器共享和重用。

视图（View）：

• 视图负责展示模型的数据或某个特定部分的数据给用户。
• 它通常是用户界面的一部分，用于显示数据、接收用户输入，以及向用户提供交互和操作界面。
• 视图可以是图形界面、命令行界面、网页或任何其他形式的用户界面。

控制器（Controller）：

• 控制器是模型和视图之间的协调者和中介者。
• 它接收用户的输入（如点击按钮、键盘输入等）或触发的事件，并将其转发给适当的模型或视图进行处理。
• 控制器负责处理用户请求、更新模型数据、调整视图的显示状态，并确保模型和视图之间的同步和协调。

代码实现

MVC模式实质是分层结构，主要分为三部分：

• View传送指令到Controller。
• Controller完成业务逻辑后，要求Model改变状态。
• Model将新的数据发送到View，用户得到反馈。

定义一个 TodoModel 类作为模型，它负责管理待办事项的数据（Todo 对象）。 TodoView 类作为视图，用于将待办事项列表渲染到控制台。 TodoController类作为控制器，协调模型和视图之间的交互，并处理用户的操作。

通过例子创建模型、视图和控制器的实例， 演示添加新任务、更新任务状态和更新视图的过程。

TypeScript

/**
 * MVC模式
 * - ts版本
 */

// 模型（Model）
interface Todo {
  id: number
  title: string
  completed: boolean
}

class TodoModel {
  private todos: Todo[] = []

  addTodo(todo: Todo) {
    this.todos.push(todo)
  }

  getTodos() {
    return this.todos
  }

  updateTodoStatus(id: number, completed: boolean) {
    const todo = this.todos.find(todo => todo.id === id)
    if (todo) {
      todo.completed = completed
    }
  }
}

// 视图（View）
class TodoView {
  render(todos: Todo[]) {
    console.log('Todo List:')
    todos.forEach((todo) => {
      console.log(`[${todo.completed ? 'x' : ' '}] ${todo.title}`)
    })
  }
}

// 控制器（Controller）
class TodoController {
  private model: TodoModel
  private view: TodoView

  constructor(model: TodoModel, view: TodoView) {
    this.model = model
    this.view = view
  }

  addTodoToModel(todo: Todo) {
    this.model.addTodo(todo)
  }

  updateTodoStatusInModel(id: number, completed: boolean) {
    this.model.updateTodoStatus(id, completed)
  }

  updateView() {
    const todos = this.model.getTodos()
    this.view.render(todos)
  }
}

// 使用示例
const model = new TodoModel()
const view = new TodoView()
const controller = new TodoController(model, view)

// 添加新任务
const todo1: Todo = { id: 1, title: 'Learn TypeScript', completed: false }
const todo2: Todo = { id: 2, title: 'Write Code', completed: true }

controller.addTodoToModel(todo1)
controller.addTodoToModel(todo2)

// 更新任务状态
controller.updateTodoStatusInModel(1, true)

// 更新视图
controller.updateView()