JavaScript MVC 架构的最佳实践：经验分享-编程学习网

分离关注点

MVC 架构的基本原则之一是分离关注点。这意味着将应用程序的各个组件（模型、视图和控制器）分解为独立的模块。这使得应用程序更容易维护，因为它允许您独立于其他部件更改每个模块。

示例代码：

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

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

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

  render() {
    const html = `<ul>`;
    for (const todo of this.model.todos) {
      html += `<li>${todo}</li>`;
    }
    html += `</ul>`;
    return html;
  }
}

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

  handleAddTodo(e) {
    e.preventDefault();
    const input = document.querySelector("input[name="todo"]");
    this.model.addTodo(input.value);
    this.view.render();
  }
}

使用单一职责原则

每个模块都应该只负责一项特定任务。这有助于保持模块的简洁性和可维护性。例如，模型应该只负责管理数据，视图应该只负责渲染数据，控制器应该只负责处理用户交互。

示例代码：

// Model (responsibility: manage data)
class TodoModel {
  constructor(todos) {
    this.todos = todos;
  }
}

// View (responsibility: render data)
class TodoView {
  constructor(model) {
    this.model = model;
  }

  render() {
    const html = `<ul>`;
    for (const todo of this.model.todos) {
      html += `<li>${todo}</li>`;
    }
    html += `</ul>`;
    return html;
  }
}

// Controller (responsibility: handle user interactions)
class TodoController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  handleAddTodo(e) {
    e.preventDefault();
    const input = document.querySelector("input[name="todo"]");
    this.model.todos.push(input.value);
    this.view.render();
  }
}

利用松散耦合

MVC 模块之间应该保持松散耦合。这意味着模块不应直接依赖于其他模块。这提高了应用程序的可扩展性和灵活性，因为它允许您轻松替换或修改一个模块而不影响其他模块。

示例代码：

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

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

// View
class TodoView {
  constructor(model) {
    this.model = model;

    // Event listener (does not directly depend on the controller)
    const addTodoForm = document.querySelector("form");
    addTodoForm.addEventListener("submit", this.handleAddTodo.bind(this));
  }

  handleAddTodo(e) {
    e.preventDefault();
    const input = document.querySelector("input[name="todo"]");
    this.model.addTodo(input.value);
    this.render();
  }

  render() {
    // ...(same as before)
  }
}

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

  // ...(same as before)
}

使用反向数据绑定

反向数据绑定是一个强大的工具，它可以自动将视图中的更改反映到模型中。这消除了手动更新模型的需求，从而减少了错误并简化了应用程序逻辑。

示例代码：

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

    // Implement Two-way data binding using Proxy
    return new Proxy(this, {
      set(target, prop, value) {
        target[prop] = value;
        this.view.render();  // Update the view automatically
        return true;
      }
    })
  }

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

// View
class TodoView {
  constructor(model) {
    this.model = model;

    const input = document.querySelector("input[name="todo"]");
    const list = document.querySelector("ul");

    // Event listeners
    input.addEventListener("input", (e) => {
      this.model.todos[0] = e.target.value;
    });
  }

  render() {
    // ...(same as before)
  }
}

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