Создание марионеток для повторного использования подпрограмм и модулей

Question

В настоящее время я создаю сложное приложение для марионеток, и в качестве справочного пособия я использовал замечательную книгу. Тем не менее, я склонен к повторному использованию кода и люблю сохранять гибкость, насколько это возможно.

Мое приложение имеет различные экраны и модули, одним из которых является панель инструментов. Панель инструментов имеет свой собственный набор обязанностей, поэтому я пришел к выводу, что это должно быть вспомогательное приложение.

Приборная панель разделена на 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 зависит от информационной панели и предполагается, что она будет использоваться где-то еще, она должна быть полностью отделена от информационной панели.

Представление "show" панели мониторинга должно иметь макет, чтобы определить, где показывать widgetA и widgetB.

Затем в вашем DashBoardApp установите appRoute для ответа на какой-либо маршрут, а затем вызовите контроллер.

Контроллер инициализирует макет.

Макет попросит показать RegionA и RegionB.

Слушайте "показывать" события RegionA и RegionB, чтобы запросить широкий запрос приложения

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

Затем в модуле Widget ответьте на события приложения и предоставьте представление

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

Поздняя часть моего ответа немного расплывчата с меньшим количеством кода. Основная идея заключается в том, что DashBoardApp должен завершить свою работу, отправив запрос приложения. А затем работа с компонентами заключается в предоставлении представления по запросу приложения, которое полностью отделено.