挑战不可能！用纯JavaScript撸一个MVC程序

2023-10-13 02:04:40

用纯JavaScript撸一个MVC程序？这似乎是一个艰巨的任务，但只要遵循正确的步骤，您就可以轻松实现。在这篇文章中，我们将详细介绍如何用JavaScript从头开始构建一个MVC程序，并为您提供一个清晰的示例——一个简单的Todo应用程序。

序言：什么是MVC？

MVC（Model-View-Controller）是一种设计模式，用于将应用程序分成三个不同的部分：

模型：模型负责处理应用程序的数据和业务逻辑。
视图：视图负责将数据显示给用户。
控制器 ：控制器负责处理用户输入并更新模型。

MVC模式的好处是它可以让您将应用程序的各个部分解耦，从而使代码更易于维护和扩展。

构建我们的MVC程序

现在，让我们开始构建我们的MVC程序。我们将创建一个简单的Todo应用程序，允许用户添加、删除和标记完成待办事项。

1. 设置项目结构

首先，我们需要设置我们的项目结构。创建一个名为“todo-mvc”的新文件夹，并在其中创建以下文件：

index.html
app.js
model.js
view.js
controller.js

2. 创建模型

模型负责处理应用程序的数据和业务逻辑。在我们的Todo应用程序中，模型将负责存储待办事项列表。在model.js文件中，添加以下代码：

// 待办事项模型
class Todo {
  constructor(id, title, completed) {
    this.id = id;
    this.title = title;
    this.completed = completed;
  }
}

// 待办事项列表
const todos = [
  new Todo(1, 'Learn JavaScript', false),
  new Todo(2, 'Build a Todo app', false),
  new Todo(3, 'Write a blog post', false),
];

// 添加待办事项
const addTodo = (title) => {
  const newTodo = new Todo(todos.length + 1, title, false);
  todos.push(newTodo);
};

// 删除待办事项
const deleteTodo = (id) => {
  const index = todos.findIndex((todo) => todo.id === id);
  if (index !== -1) {
    todos.splice(index, 1);
  }
};

// 标记完成待办事项
const completeTodo = (id) => {
  const todo = todos.find((todo) => todo.id === id);
  if (todo) {
    todo.completed = true;
  }
};

// 获取待办事项列表
const getTodos = () => {
  return todos;
};

export { Todo, addTodo, deleteTodo, completeTodo, getTodos };

3. 创建视图

视图负责将数据显示给用户。在我们的Todo应用程序中，视图将负责显示待办事项列表并允许用户添加、删除和标记完成待办事项。在view.js文件中，添加以下代码：

// 获取 DOM 元素
const todoList = document.getElementById('todo-list');
const todoInput = document.getElementById('todo-input');
const todoForm = document.getElementById('todo-form');

// 渲染待办事项列表
const renderTodos = (todos) => {
  todoList.innerHTML = '';
  todos.forEach((todo) => {
    const li = document.createElement('li');
    li.classList.add('todo-item');
    if (todo.completed) {
      li.classList.add('completed');
    }
    li.innerHTML = `
      <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''}>
      <span class="todo-title">${todo.title}</span>
      <button class="todo-delete-button">X</button>
    `;
    todoList.appendChild(li);
  });
};

// 添加待办事项
const addTodo = (e) => {
  e.preventDefault();
  const title = todoInput.value;
  if (title) {
    dispatch('ADD_TODO', { title });
    todoInput.value = '';
  }
};

// 删除待办事项
const deleteTodo = (e) => {
  const target = e.target;
  if (target.classList.contains('todo-delete-button')) {
    const id = target.parentElement.dataset.id;
    dispatch('DELETE_TODO', { id });
  }
};

// 标记完成待办事项
const completeTodo = (e) => {
  const target = e.target;
  if (target.classList.contains('todo-checkbox')) {
    const id = target.parentElement.dataset.id;
    dispatch('COMPLETE_TODO', { id });
  }
};

// 绑定事件监听器
todoForm.addEventListener('submit', addTodo);
todoList.addEventListener('click', deleteTodo);
todoList.addEventListener('click', completeTodo);

export { renderTodos };

4. 创建控制器

控制器负责处理用户输入并更新模型。在我们的Todo应用程序中，控制器将负责处理用户添加、删除和标记完成待办事项的输入。在controller.js文件中，添加以下代码：

import { addTodo, deleteTodo, completeTodo, getTodos } from './model.js';
import { renderTodos } from './view.js';

// 分发动作
const dispatch = (action, payload) => {
  switch (action) {
    case 'ADD_TODO':
      addTodo(payload.title);
      renderTodos(getTodos());
      break;
    case 'DELETE_TODO':
      deleteTodo(payload.id);
      renderTodos(getTodos());
      break;
    case 'COMPLETE_TODO':
      completeTodo(payload.id);
      renderTodos(getTodos());
      break;
  }
};

export { dispatch };

5. 创建主程序

最后，我们需要创建一个主程序文件来将所有东西粘合在一起。在app.js文件中，添加以下代码：

import { dispatch } from './controller.js';
import { renderTodos } from './view.js';
import { getTodos } from './model.js';

// 初始化待办事项列表
renderTodos(getTodos());