JavaScript 中如何实现 MVC, MVP, MVVM 架构模式？

推荐答案

MVC (Model-View-Controller)

// www.javascriptcn.com code example
// Model
class Model {
  constructor(data) {
    this.data = data;
  }

  setData(data) {
    this.data = data;
    this.onDataChange(this.data);
  }

  onDataChange(data) {}
}

// View
class View {
  constructor(controller) {
    this.controller = controller;
    this.element = document.getElementById('mvc-view');
  }

  render(data) {
    this.element.innerHTML = data;
  }

  bindEvents() {
    this.element.addEventListener('click', () => this.controller.handleClick());
  }
}

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

    this.model.onDataChange = (data) => this.view.render(data);
    this.view.bindEvents();
  }

  handleClick() {
    this.model.setData('New Data');
  }
}

// Usage
const model = new Model('Initial Data');
const view = new View();
const controller = new Controller(model, view);

MVP (Model-View-Presenter)

// www.javascriptcn.com code example
// Model
class Model {
  constructor(data) {
    this.data = data;
  }

  getData() {
    return this.data;
  }

  setData(data) {
    this.data = data;
  }
}

// View
class View {
  constructor(presenter) {
    this.presenter = presenter;
    this.element = document.getElementById('mvp-view');
  }

  render(data) {
    this.element.innerHTML = data;
  }

  bindEvents() {
    this.element.addEventListener('click', () => this.presenter.onViewClick());
  }
}

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

    this.view.bindEvents();
  }

  onViewClick() {
    const data = this.model.getData();
    this.view.render(data);
  }
}

// Usage
const model = new Model('Initial Data');
const view = new View();
const presenter = new Presenter(model, view);

MVVM (Model-View-ViewModel)

// www.javascriptcn.com code example
// Model
class Model {
  constructor(data) {
    this.data = data;
  }

  getData() {
    return this.data;
  }

  setData(data) {
    this.data = data;
  }
}

// View
class View {
  constructor(viewModel) {
    this.viewModel = viewModel;
    this.element = document.getElementById('mvvm-view');
  }

  render(data) {
    this.element.innerHTML = data;
  }

  bindEvents() {
    this.element.addEventListener('click', () => this.viewModel.handleClick());
  }
}

// ViewModel
class ViewModel {
  constructor(model) {
    this.model = model;
  }

  handleClick() {
    const data = this.model.getData();
    this.onDataChange(data);
  }

  onDataChange(data) {}
}

// Usage
const model = new Model('Initial Data');
const viewModel = new ViewModel(model);
const view = new View(viewModel);

viewModel.onDataChange = (data) => view.render(data);
view.bindEvents();

本题详细解读

MVC (Model-View-Controller)

• Model: 负责管理应用程序的核心数据和逻辑。
• View: 负责显示数据，通常是用户界面的一部分。
• Controller: 负责处理用户输入并更新模型和视图。

MVP (Model-View-Presenter)

• Model: 与MVC中的Model类似，负责管理数据。
• View: 负责显示数据，但不再直接与Model交互。
• Presenter: 充当View和Model之间的中介，处理用户输入并更新Model和View。

MVVM (Model-View-ViewModel)

• Model: 与MVC和MVP中的Model类似，负责管理数据。
• View: 负责显示数据，但通过ViewModel与Model交互。
• ViewModel: 负责将Model中的数据转换为View可以使用的格式，并处理用户输入。

这些架构模式的主要区别在于它们如何处理用户输入和更新视图的方式。MVC通过Controller直接更新View，MVP通过Presenter更新View，而MVVM通过ViewModel更新View。