常见面试问题：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 的优缺点

优点	缺点
分离关注点，便于团队协作	复杂场景下 Controller 可能臃肿
视图可替换（如 Web/APP 切换）	Model 和 View 可能产生间接耦合（如双向绑定）
易于单元测试（分层明确）	小型项目可能过度设计

---

🆚 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 重新渲染。