Javascript 具有嵌套视图的MVC

考虑以下视图结构：

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

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

我想为每个级别创建一个控制器吗？我所做的工作正常，但我觉得我的布局视图和列表视图做得太多了-例如，当控制器说“这里是一个更新的项目列表（来自服务器）”，布局视图负责删除不属于新数据的地图标记，更新现有标记，并添加新标记。同时，LayoutView的第一个ListView负责执行完全相同的操作，但负责它的项目

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

---

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

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

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

类似地，您将拥有ItemModel、ItemView和ItemController类（以及一个Item类）

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

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

---

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

如果没有代码示例，这有点抽象，很难理解，因此我只能给你一个抽象的答案作为回报。如果您的控制器有很多方法/动作，那么如果它们都与相同的概念相关，并且共享很多代码，那么就可以了。如果您发现您的控制器使用了许多不同的视图模型，那么这是一个很好的迹象，表明是时候换一个控制器了。让您的设计由SRP和DIP原则驱动。@Jasonesbitt现在，所有由LayoutView管理的视图都使用LayoutView作为“控制器”。您最终做了什么？我使用了我原来的结构，正如纯MVC对一个自包含的小部件的要求一样，它应该包括->

myWidget.create（{with:'some options'}）

。我听到了，所以每个“级别”都有一个视图+控制器+模型。但是我该怎么写呢？LayoutController是否应该实例化MapController和ListController？或者这可能超出了工程设计的范围？要清楚，不是每个级别的“视图+控制器+模型”，而是每个组件或小部件的“视图+控制器+模型”（不管它们是复合组件还是复合组件）。正如我所说的，考虑一个类，它将组成所有这些元素（M、V、C）以形成一个组件（W）。因此，W将在内部实例化M、V和C。可以根据给定应用程序中实例化的Ws来构建UI包含层次结构。实例化Ms、Vs和Cs主要是组件库创建者的事情。但是，如果需要定制，Ws应该促进将应用程序创建的Ms、Vs和Cs注入其中。如果您的小部件库只支持一个应用程序，那么这可能过于工程化。但是，如果您的关注点不是为您的应用程序实现可重用或可修改的小部件库或非常容易修改的视图，那么您需要三思为什么需要将重点放在抽象和分离关注点上。我分离关注点是因为我更容易维护。小部件的用户对内部结构一无所知。为了清楚地了解在实现小部件时如何使用MVC，请阅读以下内容：