javascript - 具有嵌套 View 的 MVC

Question

考虑以下 View 结构:

• 布局 View
  • map View
  • ListView
    • 项目 View
      • ListView
        • 项目 View
        • 项目 View
    • 项目 View
      • ListView
        • 项目 View
        • 项目 View

目前，整个结构只有一个 Controller 。所有嵌套 View 都通过冒泡事件与该 Controller 进行通信。

我想为每个级别创建一个 Controller 吗？我所拥有的有效，但我觉得我的布局 View 和 ListView 做得太多了 - 例如当 Controller 说“这是更新的项目列表(来自服务器)”时，布局 View 负责删除不属于新数据的 map 标记，更新现有标记并添加新标记。同时，LayoutView 的第一个 ListView 负责执行完全相同的操作，但针对的是它的项目。

为每个人创建一个 Controller 是一个更好的主意吗？如果是这样，我该怎么办？布局 View 是否应该注入(inject)一个 ListController 和一个 MapController 来负责构建 subview ？

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

Answer 1

您仅列出了 View 集合。如果您正在考虑实现基于 MVC 的小部件库，则需要有相应的模型和 Controller 。也就是说，对于您拥有的每个 View ，您需要有一个模型实例和一个 Controller 实例(您需要编码相应的类)。

例如，您将拥有 ListModel、ListView 和 ListController 类。您可能决定编写另一个名为 List 的类来将所有内容绑定(bind)在一起 - 以便应用程序的 UI 构建代码只需实例化 List 类并使用它。如果您愿意，您可以减少类(class)数量。例如，您可能决定将 View 和 Controller 合并为一个(因为 View 和 Controller 之间的耦合很紧密)。

类似地，您将拥有 ItemModel、ItemView 和 ItemController 类(以及 Item 类)。

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

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

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