如何用纯JavaScript撸一个MVC程序-创新互联
如何用纯JavaScript撸一个MVC程序,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
我想用 model-view-controller 架构模式在纯 JavaScript 中写一个简单的程序,于是我这样做了。希望它可以帮你理解 MVC,因为当你刚开始接触它时,它是一个难以理解的概念。
我做了
这个todo应用程序,这是一个简单小巧的浏览器应用,允许你对待办事项进行CRUD(创建,读取,更新和删除)操作。它只包含
index.html
、style.css
和script.js
三个文件,非常简单,无需任何依赖和框架。
先决条件
基本的 JavaScript 和 HTML 知识
熟悉 最新的 JavaScript 语法
目标
用纯 JavaScript 在浏览器中创建一个 todo 应用程序,并熟悉MVC(和 OOP——面向对象编程)的概念。
查看程序的演示
查看程序的源代码
注意:由于此程序使用了最新的 JavaScript 功能(ES2017),因此在某些浏览器(如 Safari)上无法用 Babel 编译为向后兼容的 JavaScript 语法。
什么是 MVC?
MVC 是一种非常受欢迎组织代码的模式。
Model(模型) - 管理程序的数据
View(视图) - 模型的直观表示
Controller(控制器) - 链接用户和系统
模型是数据。在这个 todo 程序中,这将是实际的待办事项,以及将添加、编辑或删除它们的方法。
视图是数据的显示方式。在这个程序中,是 DOM 和 CSS 中呈现的 HTML。
控制器用来连接模型和视图。它需要用户输入,例如单击或键入,并处理用户交互的回调。
模型永远不会触及视图。视图永远不会触及模型。控制器用来连接它们。
我想提一下,为一个简单的 todo 程序做 MVC 实际上是一大堆样板。如果这是你想要创建的程序并且创建了整个系统,那真的会让事情变得过于复杂。关键是要尝试在较小的层面上理解它。
初始设置
这将是一个完全用 JavaScript 写的程序,这意味着一切都将通过 JavaScript 处理,HTML 将只包含根元素。
index.html
Todo App