【译】用纯JavaScript写一个简单的MVC App

【译】用纯JavaScript写一个简单的MVC App

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

我制作了​​this todo app​​​，它是一个简单的浏览器小应用程序，你可以进行CRUD（create, read, update, delete）操作。它仅由​​index.html​​​,​​style.less​​​和​​script.js​​文件组成，非常棒而且简单，无需安装依赖/无需框架就可以学习。

前置条件

基本的​​JavaScript​​​和​​HTML​​知识熟悉​​the latest JavaScript syntax​​

目标

用纯​​JavaScript​​​在浏览器中创建一个待办事项程序(a todo app)，并且熟悉​​MVC​​概念（和OOP-object-oriented programming，面向对象编程）。

​​View demo​​​​View source​​

因为这个程序使用了最新的​​JavaScript​​​特性（ES2017），在不使用​​Babel​​​编译为向后兼容的​​JavaScript​​​语法的情况下，在​​Safari​​这样的浏览器上无法按照预期工作。

什么是MVC?

​​MVC​​是组织代码的一种模式。它是受欢迎的模式之一。

Model - 管理应用程序的数据View - Model的可视化表示（也就是视图）Controller - 连接用户和系统

model就是数据。在此代办事项应用程序中，这将是实际的待办事项，以及将会添加、编辑和删除它们的方法。

view是数据的显示方式。在此代办事项应用程序中，这将是​​DOM​​​和​​CSS​​​呈现出来的​​HTML​​。

controller连接model和view。它接受用户输入，比如单击或者键入，并处理用户交互的回调。

model永远不会触及view。view永远不会触及model。controller将它们连接起来。

我想说的是，在这个简单的 todo app 中使用 MVC 大才小用。如果这是你要创建的应用程序，并且整个系统都由你自己开发，那确实会使得事情变得过于复杂。重点是尝试从一个较小的角度了解它，以便你可以理解为什么一个可伸缩迭代的系统会使用它。

初始化设置

这将是一个完全的​​JavaScript​​​的应用程序，这就意味着所有的内容将通过​​JavaScript​​​处理，而​​HTML​​在主体中仅包含一个根元素。

Todo App