当前位置：首页 > JavaScript

js mvc 实现

2026-04-04 00:10:05JavaScript

JavaScript MVC 实现方法

MVC（Model-View-Controller）是一种设计模式，用于分离应用程序的数据、用户界面和控制逻辑。以下是实现JavaScript MVC的关键步骤和示例代码。

模型（Model）的实现

模型负责管理应用程序的数据和业务逻辑。通常使用类或对象来定义模型。

class TodoModel {
  constructor() {
    this.todos = [];
  }

  addTodo(todo) {
    this.todos.push(todo);
    this.onTodoListChanged(this.todos);
  }

  deleteTodo(id) {
    this.todos = this.todos.filter(todo => todo.id !== id);
    this.onTodoListChanged(this.todos);
  }
}

视图（View）的实现

视图负责呈现用户界面并处理用户交互。视图通常通过DOM操作来更新界面。

class TodoView {
  constructor() {
    this.app = document.getElementById('app');
    this.todoList = document.createElement('ul');
    this.app.append(this.todoList);
  }

  displayTodos(todos) {
    this.todoList.innerHTML = '';
    todos.forEach(todo => {
      const li = document.createElement('li');
      li.textContent = todo.text;
      this.todoList.append(li);
    });
  }

  bindAddTodo(handler) {
    document.getElementById('add-todo').addEventListener('click', () => {
      const input = document.getElementById('todo-input');
      handler(input.value);
      input.value = '';
    });
  }
}

控制器（Controller）的实现

控制器负责协调模型和视图之间的交互。它接收用户输入并更新模型和视图。

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

    this.model.onTodoListChanged = this.view.displayTodos;
    this.view.bindAddTodo(this.handleAddTodo);
  }

  handleAddTodo = (todoText) => {
    this.model.addTodo({
      id: Date.now(),
      text: todoText
    });
  }
}

初始化应用程序

将所有组件组合在一起以启动应用程序。

const model = new TodoModel();
const view = new TodoView();
const controller = new TodoController(model, view);

事件处理与数据绑定

确保视图能够响应用户操作并更新模型。

// 在View中添加删除功能
bindDeleteTodo(handler) {
  this.todoList.addEventListener('click', event => {
    if (event.target.tagName === 'LI') {
      const id = parseInt(event.target.dataset.id);
      handler(id);
    }
  });
}

使用框架简化MVC

现代前端框架如React、Angular或Vue已经内置了MVC或类似模式的支持。例如，使用React的函数组件：

js mvc 实现

function TodoApp() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos([...todos, { text }]);
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo.text}</li>
        ))}
      </ul>
      <button onClick={() => addTodo('New Task')}>Add Todo</button>
    </div>
  );
}