仅30行代码实现Javascript中的MVC

下面是详细讲解“仅30行代码实现Javascript中的MVC”的完整攻略。

什么是MVC？

MVC（Model-View-Controller）是一种架构模式，它将应用程序分成三个核心组件：模型、视图和控制器。这种分层方式将业务逻辑、用户界面和用户输入分离开来，实现了代码的独立性和可维护性。

• 模型（Model）：表示应用程序的数据和业务规则。它们为应用程序提供数据，并且在数据变化时进行状态通知。
• 视图（View）：表示应用程序的用户界面。它们负责显示数据，并且提供一些与数据交互的接口（如按钮、表格等）。
• 控制器（Controller）：接收用户输入并将其转化为操作模型的指令。它们根据指令更新模型数据，再将更新后的数据反映到视图上。

仅30行代码实现Javascript中的MVC

下面是实现Javascript中的MVC的30行代码：

class Model {
  constructor() {
    this.todos = [
      { id: 1, text: 'Buy milk', complete: false },
      { id: 2, text: 'Do laundry', complete: false },
    ];
  }

  toJSON() {
    return JSON.stringify(this.todos);
  }
}

class View {
  constructor() {
    this.app = document.getElementById('app');
    this.form = document.createElement('form');
    this.input = document.createElement('input');
    this.input.type = 'text';
    this.input.placeholder = 'Add todo...';
    this.submitButton = document.createElement('button');
    this.submitButton.textContent = 'Submit';
    this.todoList = document.createElement('ul');
    this.form.append(this.input, this.submitButton);
    this.app.append(this.form, this.todoList);
  }

  bindAddTodo(handler) {
    this.form.addEventListener('submit', event => {
      event.preventDefault();
      if (this.input.value) {
        handler(this.input.value);
      }
      this.input.value = '';
    });
  }

  bindDeleteTodo(handler) {
    this.todoList.addEventListener('click', event => {
      if (event.target.tagName.toLowerCase() === 'button') {
        const id = parseInt(event.target.parentElement.id);
        handler(id);
      }
    });
  }

  displayTodos(todos) {
    while (this.todoList.firstChild) {
      this.todoList.removeChild(this.todoList.firstChild);
    }

    if (todos.length === 0) {
      const p = document.createElement('p');
      p.textContent = 'Nothing to do! Add a task?';
      this.todoList.append(p);
    } else {
      todos.forEach(todo => {
        const li = document.createElement('li');
        li.id = todo.id;
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = todo.complete;
        const span = document.createElement('span');
        span.contentEditable = true;
        span.classList.add('editable');
        if (todo.complete) {
          const strike = document.createElement('s');
          strike.textContent = todo.text;
          span.append(strike);
        } else {
          span.textContent = todo.text;
        }
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        li.append(checkbox, span, deleteButton);
        this.todoList.append(li);
      });
    }
  }
}

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

    this.view.bindAddTodo(this.handleAddTodo);
    this.view.bindDeleteTodo(this.handleDeleteTodo);

    this.render();
  }

  render() {
    this.view.displayTodos(this.model.todos);
  }

  handleAddTodo = todoText => {
    const todo = {
      id: this.model.todos.length + 1,
      text: todoText,
      complete: false,
    };

    this.model.todos.push(todo);
    this.render();
  };

  handleDeleteTodo = id => {
    this.model.todos = this.model.todos.filter(todo => todo.id !== id);
    this.render();
  };
}

const app = new Controller(new Model(), new View());

这里定义了一个Model、View和Controller类，它们分别代表模型、视图和控制器。Model类用来存储数据，View类用来显示数据和接受用户输入，Controller类则用来接收用户输入并将其转化为对数据模型的操作指令。

下面是两个示例：

// 示例一：创建一个新的任务
app.handleAddTodo('Do homework');

// 示例二：删除一个任务
app.handleDeleteTodo(2);

第一个示例会在Model的todos数组中添加一个新的对象，然后调用render()方法显示更新后的任务列表。第二个示例会从Model的todos数组中删除一个对象，然后调用render()方法显示更新后的任务列表。

结语

以上就是30行代码实现Javascript中的MVC的完整攻略。这个例子虽然简单，但它包含了MVC的关键概念，可以作为入门MVC架构的良好参考。