面试题：JavaScript 中 MVC 架构思想与设计模式结合

1. MVC 架构在待办事项列表应用中的职责

Model（模型）：负责管理应用的数据，如待办事项的列表数据。它应该提供方法来添加、删除、修改待办事项，并且能够通知视图数据发生了变化。
View（视图）：负责呈现用户界面，展示待办事项列表以及提供交互元素，如添加事项的输入框和按钮等。视图需要订阅模型的变化，当模型数据改变时，更新自身的显示。
Controller（控制器）：作为模型和视图之间的桥梁，接收用户在视图上的操作，如点击添加按钮，然后调用模型的相应方法来处理数据变化，并通知视图进行更新。

2. 设计模式的应用

观察者模式：在这个应用中，模型作为被观察对象，视图作为观察者。当模型中的待办事项数据发生变化（比如添加了新事项或删除了事项），模型会通知所有订阅它的视图，视图接收到通知后更新自身显示。这使得模型和视图之间的耦合度降低，当视图或模型任何一方发生变化时，另一方不需要做出大量修改。
策略模式：可以用于处理不同的待办事项操作逻辑，比如添加事项时的验证逻辑。不同的验证规则（如不能为空、长度限制等）可以封装成不同的策略，在需要验证时根据具体情况选择合适的策略。这样可以使验证逻辑易于扩展和维护，当有新的验证需求时，只需要新增一个策略类即可，而不需要修改原有的验证代码。

3. 代码示例

模型部分

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

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

    removeTodo(index) {
        this.todos.splice(index, 1);
        this.notifyObservers();
    }

    attach(observer) {
        this.observers.push(observer);
    }

    notifyObservers() {
        this.observers.forEach(observer => observer.update(this.todos));
    }
}

视图部分

class TodoView {
    constructor(model) {
        this.model = model;
        this.model.attach(this);
        this.render();
    }

    update(todos) {
        this.render(todos);
    }

    render(todos = this.model.todos) {
        const todoList = document.getElementById('todoList');
        todoList.innerHTML = '';
        todos.forEach((todo, index) => {
            const li = document.createElement('li');
            li.textContent = todo;
            const removeButton = document.createElement('button');
            removeButton.textContent = 'Remove';
            removeButton.addEventListener('click', () => this.model.removeTodo(index));
            li.appendChild(removeButton);
            todoList.appendChild(li);
        });
    }
}

控制器部分

class TodoController {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        const addButton = document.getElementById('addButton');
        const todoInput = document.getElementById('todoInput');
        addButton.addEventListener('click', () => {
            const todoText = todoInput.value;
            if (todoText) {
                this.model.addTodo(todoText);
                todoInput.value = '';
            }
        });
    }
}

使用示例

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

上述代码展示了基于 MVC 架构结合观察者模式构建待办事项列表应用的关键部分。通过这种方式，代码结构更加清晰，各部分职责明确，便于维护和扩展。策略模式可类似地添加到验证待办事项输入的逻辑中，通过定义不同策略类来实现不同验证规则。

星途面试题库

面试题：JavaScript 中 MVC 架构思想与设计模式结合

知识考点

面试题答案

1. MVC 架构在待办事项列表应用中的职责

2. 设计模式的应用

3. 代码示例

模型部分

视图部分

控制器部分

使用示例