当前位置：首页 > JavaScript

js 实现mvc

2026-02-28 22:43:44JavaScript

MVC 模式概述

MVC（Model-View-Controller）是一种设计模式，将应用分为三个核心部分：Model（数据逻辑）、View（界面展示）、Controller（业务逻辑）。JavaScript 中实现 MVC 有助于代码解耦和维护。

实现步骤

Model 层

Model 负责数据管理和业务逻辑，通常包含数据获取、更新和验证。以下是一个简单的 Model 示例：

js 实现mvc

class UserModel {
  constructor() {
    this.users = [];
  }

  addUser(user) {
    this.users.push(user);
  }

  getUsers() {
    return this.users;
  }
}

View 层

View 负责渲染界面并处理用户交互。可以通过 DOM 操作或模板引擎实现：

js 实现mvc

class UserView {
  constructor() {
    this.app = document.getElementById('app');
  }

  render(users) {
    this.app.innerHTML = users.map(user => `
      <div>${user.name}</div>
    `).join('');
  }
}

Controller 层

Controller 作为 Model 和 View 的桥梁，处理用户输入并更新数据：

class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  handleAddUser(user) {
    this.model.addUser(user);
    this.view.render(this.model.getUsers());
  }
}

整合 MVC

通过实例化各组件并建立关联完成 MVC 架构：

const model = new UserModel();
const view = new UserView();
const controller = new UserController(model, view);

// 模拟用户操作
controller.handleAddUser({ name: 'Alice' });