我想使用体系结构模式并用纯JavaScript编写一个简单的应用程序。所以我着手做了，下面就是。希望能帮你理解MVC，因为这是一个很难理解的概念，刚接触时候会很疑惑。

我制作了，它是一个简单的浏览器小应用程序，你可以进行CRUD（create, read, update,

添加一个新的待办事项到数组，编辑查找要编辑的待办事项的ID并替换它，删除并过滤器筛选出数组中的待办事项，以及切换complete的布尔值。

因为我们都是在浏览器中进行此操作，并且可以从window(golbal)中访问应用程序，因此你可以轻松地进行测试，键入以下内容：

现在视图和模型都设置好了。我们只是还没办法连接它们 - 没有事件监听用户的输入，也没有处理程序来处理此类事件的输出。

控制台仍然作为临时控制器存在，你可以通过它添加和删除待办事项。

最后，控制器是模型（数据）和视图（用户所见）之间的连接。到目前为止，下面就是控制器中的内容。

视图和模型之间的第一个连接是创建一个方法，该方法在每次待办事项更改时调用displayTodos。我们也可以在构造函数中调用一次，以显示初始待办事项，如果有。

触发事件之后，控制器将对其进行处理。当你提交新的待办事项，单击删除按钮或单击待办事项的复选框时，将触发一个事件。视图必须监听那些事件，因为它是视图中用户的输入，但是它将把响应该事件将要发生的事情责任派发到控制器。

我们将在控制器中为事项创建处理程序。

现在我们有了这些处理程序，但是控制器仍然不知道何时调用它们。我们必须将事件监听器放在视图的DOM元素上。我们将响应表单上的submit事件，然后单击click并更改change待办事项列表上的事件。（由于略为复杂，我这里略过"编辑"）。

我们需要从视图中调用处理程序，因此我们将监听事件的方法绑定到视图。

现在，当一个submit,click或者change事件在特定的元素中触发，相应的处理事件将被唤起。

我们遗漏了一些东西 - 事件正在监听，处理程序被调用，但是什么也没有发生。这是因为模型不知道视图应该更新，也不知道如何进行视图的更新。我们在视图上有displayTodos方法来解决此问题，但是如前所述，模型和视图不互通。

就像监听起那样，模型应该触发回来控制器这里，以便其知道发生了某些事情。

我们已经在控制器上创建了onTodoListChanged方法来处理此问题，我们只需要使模型知道它就可以了。我们将其绑定到模型上，就像绑定到视图的方式一样。

然后将其绑定到控制器中，就像与视图一样。

现在，在模型中的每个方法之后，你将调用onTodoListChanged回调。

至此，该应用程序已基本完成，所有概念都已演示。通过将数据持久保存在浏览器的本地存储中，我们可以使其更加持久，因此刷新后将在本地持久保存。

如果你不熟悉local storage是怎么工作的，阅读下文章。

现在，我们可以将初始化待办事项设置为本地存储或空数组中的值。

我们将创建一个commit的私有方法来更新localStorage的值，作为模型的状态。

在每次this.todos发生更改之后，我们可以调用它。

这个难题的最后一部分是编现有待办事项的能力。与添加和删除相比，编辑总是有些棘手。我想简化它，不需要编辑按钮，用输入框input或其他来代替span。我们也不想每次输入时都调用editTodo，因为它将渲染整个待办事项列表UI。

我决定在视图上创建一个方法，用新的编辑值更新一个临时状态变量，然后在视图中创建一个方法，该方法在控制器中调用handleEditTodo方法来更新模型。输入事件是当你键入contenteditable元素时触发事件，而foucesout在你离开contenteditable元素时候触发的事件。

现在，当你单击任何待办事项时，你将进入"编辑"模式，这将更新临时临时状态变量，并且在你选择或者单击离开待办事件时，它将保存在模型中并重置临时状态。
只需要确保绑定editTodo处理程序就可以。

该contenteditable解决方案得以快速实施。在生产环境中使用contenteditable时，你需要考虑各种问题，

现在实现它了。使用纯JavaScript的无依赖待办事项应用程序，演示了模型-视图-控制器结构的概念。下面再次放出完整案例和源码地址。

翻译到此结束，上面是经典的todo list展示，引入localstorage也许有些不好理解。我们来个小的案例巩固下：

上面实现的功能是点击increase按钮递增数字，如下动图：