在香草JavaScript中，当有多个模型/视图/控制器时，如何构造我的应用程序？

我试图用JavaScript实际掌握MVC模型的实现（而不是概念上的理解）

至于开始，我认为值得一试，尝试用纯JS构建一个MVC应用程序。我读过几十篇文章和书中的章节，都提到了MVC及其变体。当然，我在谷歌上搜索了很多例子，看看它是如何实现的。在我看来，最容易理解和恰当的含义是：

最后，我能够以todomvc vanillajs的方式重构我自己的应用程序

然而，有一件事仍然困扰着我。所有这些应用程序和示例都非常基础，因此整个应用程序只指定了一个模型、视图和控制器

如果我想在这样的应用程序中添加更多（同样复杂）的功能，该怎么办

我应该一个接一个地将它们添加到controller.js view.js和model.js文件中，还是应该停止开发意大利面代码，而是添加新文件，从而分别为每个新功能创建新的模型、控制器和视图

在我看来，每个功能都应该有自己的视图、控制器和模型，或者至少可以有自己的视图、控制器和模型，这取决于主观评价。但我不太确定这种实现应该如何从代码结构、名称空间等方面看待这种情况

如果我想通过在每个功能上创建多个视图、模型和控制器来模拟比例，例如处理“将任务添加到列表”或“删除任务”操作，该怎么办

为了解决我的困境，我创建了自己的MVC草稿，它有两个模型：控制器和视图。这种做法是否有意义？当进一步开发我的应用程序时会发生什么，我很快就有了几十个和更多特定的（协同响应的）模型、视图和控制器

这是前面提到的

---

因此，我发现问题与我的非常相似，但提供的答案并不完全令人满意，至少对我来说是这样。

从我在RubyonRails框架中的经验来看，我并不总是需要MVC模式的所有三个元素。有时您需要一个数据库模型，但它只能在内部访问，不能由客户机访问。或者有时您只需要一个泛型帮助器类

按照惯例，文件被拆分，每个文件都有自己的控制器、模型和视图，遵循命名约定，可能类似于：

articles-view.html
articles-controller.js
articles-model.js

_articles-form.html <- this is your partial!
articles-create.html
articles-edit.html

将为控制器中的每个操作拆分视图：

articles-index.html
articles-show.html
articles-update.html
...
articles-controller.js
articles-model.js

在控制器内部，您将拥有“actions”，即与博客文章语义相关的所有功能

function ArticlesController() {
    function index() { ... }
    function create() { ... }
    function edit() { ... }
    ...
    function delete() { ... }
}

在模型中，您基本上拥有类/原型本身，即使用给定数据构建的东西

function Article() {
    this.name = "";
    this.author = "";
    this.text = "";
    this.dateCreated = "";
}

最后，视图中应该有与模型中使用的名称相同的元素

例如，如果您有一个基本的CRUD系统，那么您可以只有一个控制器和一个模型，但有不同的视图（一个用于列出所有项目，一个用于创建和编辑，一个仅用于一个项目，等等）。 以Rails和NodeJ为例，为视图编写更少代码的方法是使用“partials”。常见的HTML结构可以保存在文件中，并根据需要导入到其他HTML文件中，如表单、页眉、页脚等

例如： 除了在articles-create.html上有一个表单和在articles-edit.html上有另一个表单外，您还可以使用以下内容：

articles-view.html
articles-controller.js
articles-model.js

_articles-form.html <- this is your partial!
articles-create.html
articles-edit.html

---

\u articles-form.html检查我所谓的实现。整个过程由60行代码组成。它使用jQuery，但可以在VanilaJS中实现

基本思想很简单-你的应用程序只是一个页面集合，也称为查看

  <section id="route1" src="content1.htm" />
  <section id="route2" src="content2.htm" />
  ...


...

区段id定义了一组可能的“路线s”
SpAPP捕捉浏览器的导航事件并加载路由上请求的视图

和部分content1..N.htm文件包含视图标记、设置和控制器功能

Datamodel这里是从服务器接收并存储在内存或本地存储器中的JS数据

一般来说，对于MVC框架。。。你不能免费给每个人带来快乐。我认为，可以很容易地理解并根据特定项目的需要进行调整的小型SpAPP是一种可行的方法
 你有没有看一下流行的框架（比如angular）是如何处理这个问题的？视图是一个在拆分时无法工作（或者至少没有意义）的组件或片段。比如，如果你有一个表单，整个表单就是一个视图，然后你有一个文件上传的东西，它将是你的表单视图使用的另一个视图。我会说，你不需要每次都有三个；可以将控制器和视图添加到现有模型，并且模型可以具有子模型。从技术上讲，您并不真正需要这些，因此请使用使您的工作更轻松的部分，并为能够做出框架为您做出的有时很艰难的选择而感到自豪。