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模块，它将无法获得所需的结果。

对于可重复使用的模块是否有更好的方法，并且代码重复最少？

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

    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依赖于仪表板而应该在其他地方使用，因此它应该与仪表板完全分离。

“show”仪表板视图应该有一个布局来定义显示widgetA和widgetB的位置。

然后，在您的DashBoardApp中，设置appRoute以响应某些路由，然后调用控制器。

控制器将初始化布局。

布局将要求显示RegionA和RegionB。

收听RegionA和RegionB的'show'事件，要求提供App广泛的请求

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

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

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

我的回答的后半部分有点模糊，代码较少。基本的想法是， DashBoardApp应该通过发送App请求来完成他的工作。然后是应用程序请求提供视图的组件工作，它完全解耦。

木偶建筑可重复使用的子应用程序和模块

1 个答案: