当前位置：首页 > JavaScript

js实现mvc

2026-03-15 05:24:59JavaScript

MVC 模式简介

MVC（Model-View-Controller）是一种软件架构模式，将应用程序分为三个核心组件：模型（Model）处理数据和业务逻辑，视图（View）负责展示数据，控制器（Controller）处理用户输入并协调模型和视图。

实现 MVC 的步骤

模型（Model） 模型负责管理数据和处理业务逻辑。可以创建一个独立的类或对象来封装数据操作。

class Model {
  constructor(data = {}) {
    this.data = data;
  }

  setData(key, value) {
    this.data[key] = value;
    this.notifyChange();
  }

  getData(key) {
    return this.data[key];
  }

  notifyChange() {
    // 通知视图更新
    if (this.onChange) {
      this.onChange(this.data);
    }
  }
}

视图（View） 视图负责渲染数据到用户界面，通常是 DOM 操作。

class View {
  constructor(elementId) {
    this.element = document.getElementById(elementId);
  }

  render(data) {
    this.element.innerHTML = `
      <div>Name: ${data.name}</div>
      <div>Age: ${data.age}</div>
    `;
  }
}

控制器（Controller） 控制器负责处理用户输入，更新模型并通知视图。

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

    // 绑定模型变更时的回调
    this.model.onChange = (data) => this.view.render(data);
  }

  handleInputChange(key, value) {
    this.model.setData(key, value);
  }
}

完整示例

以下是一个简单的 MVC 实现示例，模拟用户输入更新视图：

js实现mvc

// 初始化模型、视图和控制器
const model = new Model({ name: "John", age: 25 });
const view = new View("app");
const controller = new Controller(model, view);

// 首次渲染
view.render(model.data);

// 模拟用户输入更新数据
setTimeout(() => {
  controller.handleInputChange("name", "Alice");
}, 2000);

setTimeout(() => {
  controller.handleInputChange("age", 30);
}, 4000);