Marionette 构建可重用的子应用程序和模块

Question

我目前正在构建一个复杂的木偶应用程序，并一直关注great book 作为参考。但是，我是可重用代码的傻瓜，并且喜欢尽可能保持灵活性。

我的应用程序有各种屏幕和模块，其中之一是仪表板。仪表板有自己的一套职责，所以我得出的结论是它应该是一个子应用程序。

仪表板按 50/50 拆分，内部有两个组件。我已经确定这些组件中的每一个（比如说compA 和compB）都有自己的一套职责，并且应该是他们自己的子应用程序。但是，我将在应用程序的另一个区域中使用compA 的用例。

我想到重用的第一个想法是简单地重用视图并在需要这个特定视图的地方创建一个新模块。但是，此视图附带的独特事件和操作存储在控制器和 API 中以与模块交互。

所以我最终得到了以下结构：

    application.js
    apps
    --dashboard
    --compA
    --compB

我已经实现了类似下面的东西来重用来自compA的功能

Controller = {
    getView: function () {
        return new Show.MyView();
    }
}

API = {
    getMyView: function () {
        return Controller.getView();
    }
}

App.reqres.setHandler('compa:get:view', function () {
    return API.getMyView();
});

这样做可以让我请求一个新的视图实例来显示并保持相同的动作逻辑。但是，这意味着每个部分之间没有分隔（仪表板中的compA 和应用程序的另一个部分中的compa）。因此，如果我要停止 compa 模块，它不会得到预期的结果。

有没有更好的方法来重复使用最少的代码？

我的想法是将控制器逻辑提取到我可以扩展的控制器对象中，然后在我想重用这些功能时创建一个新的“子应用程序”。

    application.js
    apps
    --dashboard
    --compA-dashboard // new instance of Controller
    --compA-somewhereelse // new instance of Controller
    --compB

似乎我的设计模式过于复杂了。

Answer 1

首先请允许我将您的“组件”重命名为“小部件”。在我看来，“组件”比您的小部件更适合通用。

我会将这些小部件安排如下：

app.js
/app
  /dashboard
    /show
      show_controller.js
    dashboard_app.js
  /other
/components
  /widgets
    /widgetA
      widgetController.js
      widgetView.js
    /widgetB 

由于 widgetA 依赖于仪表板并且应该在其他地方使用，它应该与仪表板完全解耦。

仪表板的“显示”视图应该有一个布局来定义在哪里显示小部件A 和小部件B。

然后，在你的 DashBoardApp 中，设置一个 appRoute 来响应某个路由，然后调用控制器。

控制器将初始化布局。

布局将要求显示 RegionA 和 RegionB。

收听 RegionA 和 RegionB 的“显示”事件，以请求应用范围的请求

this.listenTo(regionA, 'show', function(){
  App.request 'widget:a:show'
});

然后在Widget模块中，响应App事件并传递视图

App.reqres.setHandler('widget:a:show, function(){
  API.getWidgetAView();
});

我的答案的后半部分有点含糊，代码较少。基本思想是，DashBoardApp 应该通过发送 App 请求来完成他的工作。然后根据 App 请求交付视图是组件的工作，这是完全解耦的。