常见面试问题：MVC模式

MVC（Model-View-Controller）是一种 分层架构设计模式 ，核心思想是通过职责分离提升代码的可维护性和扩展性。它的三个组件分工如下：

1. Model（模型）

• 职责 ：管理数据和业务逻辑，与数据库或外部服务交互。

• 特点 ：

  • 不依赖 View 和 Controller，是纯粹的数据层。
  • 提供数据校验、持久化（如保存到数据库）、状态通知（通过观察者模式）。

• 示例 ：用户注册时，Model 负责验证邮箱格式、密码强度，并将数据存入数据库。

2. View（视图）

• 职责 ：负责数据展示和用户界面（UI），不处理业务逻辑。

• 特点 ：

  • 被动接收 Model 的数据更新（如通过绑定或事件监听）。
  • 支持多形态展示（同一数据可以渲染为网页、移动端页面或 PDF）。

• 示例 ：用户个人主页的 HTML 模板，展示用户的头像、昵称和动态列表。

3. Controller（控制器）

• 职责 ：接收用户输入，协调 Model 和 View。

• 特点 ：

  • 解析请求参数（如 HTTP 请求中的表单数据）。
  • 调用 Model 处理业务，根据结果选择渲染哪个 View。

• 示例 ：用户点击“提交订单”按钮时，Controller 调用 Model 扣减库存，成功后跳转到支付页面。

🌰 MVC 工作流程示例（用户登录场景）

1. 用户操作 ：在登录页面输入账号密码，点击“登录”按钮。

2. Controller ：

   • 接收 HTTP 请求，解析账号密码参数。
   • 校验参数格式 （如是否为空、长度是否合法）。

3. Model ：

   • 根据账号查询数据库，验证密码哈希是否匹配。
   • 返回验证结果（成功或失败）。

4. Controller ：

   • 根据 Model 的返回结果：

     • 成功：调用 View 渲染用户主页。
     • 失败：调用 View 渲染错误提示页。

5. View ：

   • 生成 HTML 页面（主页或错误页），返回给用户浏览器。

⚡️ MVC 的优缺点

🆚 MVC 与 MVVM 的区别

• MVC ：

  • View 直接依赖 Model（如通过数据绑定）。
  • Controller 负责手动更新 View（如调用 render() 方法）。

• MVVM ：

  • 引入 ViewModel 层，通过双向绑定自动同步 View 和 Model。
  • 典型应用：Vue.js、Angular（减少手动 DOM 操作）。

模拟提问：如果让你用 MVC 设计一个TODO列表应用，你会如何划分模块？

1. Model ：

   • 定义 TodoItem 类，包含标题、状态（完成/未完成）、创建时间等属性。
   • 提供 save() （保存到本地存储）、 loadAll() （加载所有待办事项）等方法。

2. View ：

   • HTML 页面结构，包含输入框、添加按钮、待办列表。
   • 渲染方法：根据 Model 数据生成列表项，标记完成状态（如划掉文字）。

3. Controller ：

   • 监听“添加”按钮点击事件，获取输入内容，调用 Model 的 save() 。
   • 监听“删除”或“切换状态”操作，更新 Model 后触发 View 重新渲染。