使用原生JavaScript实现MVC模式

Question

我现在想要以更可扩展和可管理的方式组织我的代码。我想在不使用框架的情况下更好地理解JavaScript中的MVC架构。

目前我已经了解到以下内容（如果我有误，请务必纠正）： 模型： 网站/ Web应用程序内容（图片、文本、可下载内容等）的有组织结构，还具有操作内容所需的逻辑。因此，在JavaScript中，模型可以是JSON对象或调用检索/更新数据库的PHP文件，而模型的逻辑可能是负责解析、正则表达式和组织内容的函数，以便将其传递给视图。 视图： 用户界面和模型数据/内容的可视化表示。它的唯一工作是显示内容并接受用户输入（如果适用）。 控制器： 控制器的唯一工作是充当模型和视图之间的中介吗？例如，如果视图需要数据，它会询问控制器，然后控制器会去模型获取数据，然后将其发送回视图？如果有任何用户输入，则视图将其发送到控制器，然后控制器将其发送到模型，然后更新模型，此时控制器会通知视图模型已经更新？

MVC对我来说一直是个困惑的点，再加上已经有人说过MVC在JavaScript中不是一件自然的事情（至少不像在PHP、Java、ActionScript等语言中那样）。

- zero

---

除了JavaScript之外，尝试学习一些MVC理论知识。然后你就可以将这些方法应用到任何你选择的编程语言中。 - TJHeuvel

我还没有看到一个纯粹的MVC实现从头开始使用JavaScript。TodoMVC中的vanilla js实现明确不是真正的MVC，尽管它有不同层之间的分离。请参阅我对已接受答案的评论。《Head First设计模式》中的插图可能会有所帮助：http://codereview.stackexchange.com/questions/42353/is-the-vanilla-implementation-of-todomvc-really-an-mvc-app - oligofren

缺乏真正的MVC是因为涉及到大量的样板代码。原始的TodoMVC应用程序有900多行JS，但缺少必要的部分才能成为真正的MVC。 "The Sheep"的答案解释了这不一定是坏事的原因 ;) - oligofren

Answer 1

第一个真相是，视图和控制器在大多数情况下非常接近。有时甚至相同。这并不一定是坏事。例如，如果您有一个表格，选择一行，然后单击一个按钮，该按钮会更改所选行中的数据，则按钮显然是视图（您看到数据）和 控制器（您更改数据）。我相信还有更好的例子...

第二个真相是，你会发现几乎与人数同样多的MVC观点 ;)

但是，就个人而言，我建议您不要盲目地遵循某些设计模式。MVC是设计代码的好起点，但最终，您的代码需要快速，稳定且易于维护。您（以及您的团队）必须对代码感到舒适。如果您最终得到的代码遵循了MVC模式，那很好。如果没有，也没关系。至少这是我的看法。

- TheSHEEEP

Answer 2

我的学习方式一直是通过查看代码来学习，所以我决定分享以下内容。

TODO mvc 比较多种不同的 JS MV* 框架

上面的链接比较了所有的 JS mv* 框架。这个演示应该特别吸引您，

Vanilla JS Todo mv* 实现

源码

从您的描述中，我可以理解您已经知道什么是 MVC，只是对如何在 JS 中实现它感到困惑，只需查看许多不同的框架（ember.js、backbone.js等）及其源代码，了解他们的做法。待办事项清单是一个很好的起点。

- Loktar

---

纯JS实现不是MVC实现。它是一种模型-视图-其他实现，就像大多数其他实现（MVB、MVP、MVVM等）。更具体地说，纯JS实现不是MVC，因为它没有强制执行MVC所施加的简单限制：控件具有对视图和模型的引用，视图具有对模型和控制器的引用。它也没有在模型中实现任何观察者，以便视图可以基于它进行更新。 - oligofren

@oligofren 感谢您对两年前问题的投票解释，提醒我更新链接。 - Loktar

哈哈，是的，我明白了，定期更新旧答案是很好的做法。 - Loktar