当前位置：首页 > JavaScript

js实现mvc

2026-02-02 05:40:46JavaScript

MVC 模式概述

MVC（Model-View-Controller）是一种设计模式，将应用分为三个核心组件：Model（数据逻辑）、View（用户界面）、Controller（业务逻辑）。JavaScript 中实现 MVC 可通过原生代码或框架（如 Backbone.js）完成。

原生 JavaScript 实现 MVC

Model 层

Model 负责数据管理和业务逻辑，通常包含数据获取、更新和事件通知机制。

js实现mvc

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

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

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

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

View 层

View 负责渲染界面并监听用户交互，将操作传递给 Controller。

js实现mvc

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

  render(data) {
    this.element.innerHTML = `<h1>${data.title}</h1><button id="btn">Update</button>`;
    document.getElementById('btn').addEventListener('click', () => this.controller.handleClick());
  }
}

Controller 层

Controller 作为中介，处理用户输入并更新 Model 或 View。

class Controller {
  constructor(model, view) {
    this.model = model;
    this.view = view;
    this.model.subscribe(data => this.view.render(data));
  }

  handleClick() {
    this.model.setData({ title: 'Updated Title' });
  }
}

// 初始化
const model = new Model({ title: 'Initial Title' });
const view = new View(new Controller(model));
view.render(model.data);

使用 Backbone.js 框架

Backbone.js 是轻量级 MVC 框架，提供结构化实现。

Model 定义

const Book = Backbone.Model.extend({
  defaults: {
    title: 'Default Title',
    author: 'Unknown'
  }
});

View 定义

const BookView = Backbone.View.extend({
  el: '#app',
  events: {
    'click #btn': 'updateTitle'
  },
  initialize() {
    this.listenTo(this.model, 'change', this.render);
  },
  render() {
    this.$el.html(`<h1>${this.model.get('title')}</h1><button id="btn">Update</button>`);
  },
  updateTitle() {
    this.model.set({ title: 'New Title' });
  }
});

// 初始化
const book = new Book();
const bookView = new BookView({ model: book });
bookView.render();