当前位置：首页 > JavaScript

js 实现mvc

2026-04-03 23:11:08JavaScript

实现 MVC 模式的 JavaScript 示例

MVC（Model-View-Controller）是一种设计模式，用于分离应用程序的数据、用户界面和控制逻辑。以下是 JavaScript 实现 MVC 的核心方法：

模型（Model）部分

模型负责管理数据和业务逻辑。通常包含数据操作和事件通知机制。

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

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

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

  addListener(listener) {
    this.listeners.push(listener);
  }

  notify(key) {
    this.listeners.forEach(listener => listener.update(key));
  }
}

视图（View）部分

视图负责显示数据和接收用户输入。它订阅模型的变化并更新显示。

class View {
  constructor(model, controller) {
    this.model = model;
    this.controller = controller;
    this.element = document.getElementById('app');
    this.model.addListener(this);
  }

  render() {
    const data = this.model.getData('message');
    this.element.innerHTML = `<div>${data || ''}</div>
      <button id="changeBtn">Change Message</button>`;
    this.element.querySelector('#changeBtn')
      .addEventListener('click', () => this.controller.handleClick());
  }

  update(key) {
    if (key === 'message') {
      this.render();
    }
  }
}

控制器（Controller）部分

控制器处理用户输入并更新模型。

class Controller {
  constructor(model) {
    this.model = model;
  }

  handleClick() {
    this.model.setData('message', 'New Message at ' + new Date().toLocaleTimeString());
  }
}

初始化应用

将各组件连接起来创建完整应用：

const model = new Model();
const controller = new Controller(model);
const view = new View(model, controller);

view.render();

替代实现方案

使用观察者模式简化模型和视图的通信：

// 简化版模型
class SimpleModel {
  constructor() {
    this._data = {};
    this._callbacks = {};
  }

  on(event, callback) {
    this._callbacks[event] = callback;
  }

  set(key, value) {
    this._data[key] = value;
    if (this._callbacks[key]) {
      this._callbacks[key](value);
    }
  }
}

// 使用示例
const simpleModel = new SimpleModel();
simpleModel.on('text', value => {
  document.getElementById('output').textContent = value;
});

document.getElementById('input').addEventListener('input', (e) => {
  simpleModel.set('text', e.target.value);
});