带有嵌套视图的 MVC答案

【问题标题】：MVC with nested views带有嵌套视图的 MVC
【发布时间】：2014-06-30 22:48:54
【问题描述】：

考虑以下视图结构：

布局视图
- 地图视图
- 列表视图
  - 项目视图
    - 列表视图
      - 项目视图
      - 项目视图
  - 项目视图
    - 列表视图
      - 项目视图
      - 项目视图

目前，我只有一个控制器用于整个结构。所有嵌套视图都通过冒泡事件与该控制器进行通信。

我想为每个关卡创建一个控制器吗？我有什么作品，但我觉得我的布局视图和列表视图做得太多了——例如当控制器说“这里是更新的项目列表（来自服务器）”时，布局视图负责删除不属于新数据的地图标记，更新现有的，并添加新的。同时，LayoutView 的第一个 ListView 负责做同样的事情，但它的项目。

为每个控制器创建一个控制器会更好吗？如果是这样，我会怎么做？布局视图是否应该注入一个 ListController 和一个 MapController 来负责构建子视图？

如果对技术感兴趣：这是针对 JavaScript 小部件的。

【问题讨论】：

这有点抽象，没有代码示例很难理解，所以我只能给你一个抽象的答案作为回报。如果您的控制器有很多方法/动作，那么如果它们都与相同的概念相关并且共享大量代码，那也没关系。如果你发现你的控制器使用了很多不同的视图模型，那么这是一个很好的迹象，表明是时候换一个控制器了。让您的设计由 SRP 和 DIP 原则驱动。
@JasonNesbitt 就像现在一样，所有由 LayoutView 管理的视图都使用 LayoutView 作为它们的“控制器”。
你最后做了什么？
我采用了我原来的结构，因为 pure MVC 对于一个应该包含的自包含小部件来说过于复杂 -> myWidget.create({with: 'some options'})。跨度>

标签： javascript model-view-controller separation-of-concerns architectural-patterns

【解决方案1】：

您只列出了一组视图。如果您正在考虑实现基于 MVC 的小部件库，则需要具有相应的模型和控制器。也就是说，对于您拥有的每个视图，您都需要有一个模型实例和一个控制器实例（您需要对相应的类进行编码）。

例如，您将拥有 ListModel、ListView 和 ListController 类。您可能决定编写另一个名为 List 的类来将所有内容绑定在一起 - 这样您的应用程序的 UI 构建代码就可以简单地实例化 List 类并使用它。如果您愿意，您可以减少课程的数量。例如，您可能决定将 View 和 Controller 合二为一（因为 View 和 Controller 之间的耦合很紧密）。

同样，您将拥有 ItemModel、ItemView 和 ItemController 类（还有一个 Item 类）。

模型类将具有以相应视图类可以用来呈现特定视图的方式将您的数据呈现给相应视图类的工具。控制器将知道如何解释发生在相应视图上的 UI 交互并调用相应视图和相应模型上的方法。

为了允许创建树层次结构，您最好使用 GoF 组合模式。

作为 MVC 模式的替代方案，您可能希望查看职责分配策略不同的 PAC 模式。 MVC 现在被广泛使用。

【讨论】：

我听到了，所以每个“级别”都有一个视图+控制器+模型。但是我将如何创作呢？ LayoutController 是否应该实例化 MapController 和 ListController？或者这可能是过度设计的东西？
要明确一点，不是每个级别的“View+Controller+Model”，而是每个组件或小部件的“View+Controller+Model”（无论它们是复合组件还是叶子）。正如我所说，考虑一个将所有这些（M，V，C）组合成一个组件（W）的类。所以 W 在内部将实例化 M、V 和 C。UI 包含层次结构可以根据给定应用程序中的实例化 W 来构建。实例化 Ms、Vs 和 Cs 主要是组件库创建者的问题。但是如果需要自定义，Ws 应该便于应用程序创建 Ms、Vs 和 Cs 注入它们。
如果您的小部件库只支持一个应用程序，这可能会过度设计。但是，如果您关心的不是为您的应用实现可重用或可修改的小部件库或非常容易修改的视图，那么您需要三思而后行，为什么需要更多地关注抽象和关注点分离。
我将关注点分开，因为它更容易维护。小部件的用户一无所知。
在实现小部件时阅读此内容以清楚了解如何使用 MVC：Is MVC a design pattern or an architectural pattern?