原生 JavaScript 中的 MVC答案

【问题标题】：MVC in Vanilla JavaScript原生 JavaScript 中的 MVC
【发布时间】：2012-04-30 00:49:19
【问题描述】：

我现在正处于我真正想以一种使其更具可扩展性和可管理性的方式组织我的代码的地步。我想在不使用框架的情况下更好地理解 javascript 中的 MVC 架构。

这就是我目前所理解的（如果我错了，请纠正我）：

型号：网站/网络应用程序内容的组织结构（图片、副本、可下载内容等...）这也具有操作内容所需的逻辑。因此在 javascript 中，模型可以是 JSON 对象或对检索/更新数据库的 php 文件的调用，并且模型的逻辑可以是负责解析、正则表达式和组织内容的函数，然后可以将其交给去看风景？

视图：用户界面和模型数据/内容的可视化表示。它唯一的工作是显示内容并接受用户输入（如果适用）？

控制器：那么控制器唯一的工作就是充当模型和视图之间的中介吗？例如，如果视图需要数据，它会询问控制器，然后控制器会去模型获取数据，然后将其发送回视图吗？如果有任何用户输入，视图会将其发送给控制器，然后控制器将其发送给模型，然后模型会更新，此时控制器会通知视图模型已更新？

MVC 对我来说一直是并且仍然是一个困惑点，再加上它已经声明 MVC 在 javascript 中不是一个自然而然的东西（至少不像 php、java、actionscript 等...... )

【问题讨论】：

尝试从 Javascript 中查看 MVC，阅读一些关于它的理论。然后你可以用你选择的任何语言应用这些方法。
我还没有看到在 JavaScript 中从头开始实现 MVC 的纯 MVC 实现。 TodoMVC 中的 vanilla js 实现绝对不是真正的 MVC，尽管它具有不同层的分离。请参阅我对已接受答案的评论。 Head First Design Patterns 中的插图可能会有所帮助：codereview.stackexchange.com/questions/42353/…
从头开始缺乏真正的 mvc 的原因是涉及的样板代码量。普通的 TodoMVC 应用程序包含 900 多行 JS，但缺少真正 MVC 的基本部分。 “绵羊”的回答解释了为什么这不一定是坏事；）

标签： javascript model-view-controller

【解决方案1】：

查看代码一直是我学习的最佳方式，所以我想我会分享这些。

TODO mvc comparing many different JS MV* Frameworks

上面的链接比较了所有的 JS mv* 框架。这个演示应该让你特别感兴趣，

Vanilla JS Todo mv* implementation

source

从它的声音你了解 MVC 是什么，只是对如何在 JS 中实现它感到困惑，只需看看那里的许多不同框架（ember.js、backbone.js 等）及其来源得到他们的看法。待办事项列表是一个很好的起点。

【讨论】：

vanilla js 实现不是 MVC 实现。它是一个 Model-View-Whatever 实现——与大多数其他实现（MVB、MVP、MVVM 等）一样。更具体地说，vanilla js 实现不是 MVC，因为它没有强制执行 MVC 强加的简单限制：控件具有对视图和模型的引用 + 视图具有对模型和控制器的引用。它在 Model 中也没有任何 Observer 实现，因此 View 可以基于它进行更新。
@oligofren 感谢您对一个 2 岁问题的否决票的解释，提醒我更新链接。
哈哈是的，我明白了，不时更新旧答案很好。

【解决方案2】：

第一个事实是 View 和 Controller - 在大多数情况下 - 非常接近。有时甚至是一样的。这不一定是坏事。如果你有一个表，选择一行，然后点击一个按钮，该按钮将更改所选行中的数据，该按钮显然将成为 View 的一部分（你看到数据）和控制器（你更改数据）。这方面有更好的例子，我敢肯定......

第二个事实是，你会发现几乎与人一样多的关于 MVC 的意见；）

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

【讨论】：