Внедрение зависимостей в JavaScript?(Для визуализации на основе данных)

Question

Вот некоторые классы в моем приложении JavaScript:

myApp.mode.model          Handles the state
myApp.mode.controller     Instantiates and updates components based on the model
myApp.data.dataManager    Does operations on the dataSource
myApp.data.dataSource     A big singleton with structured data
myApp.chart.grid          A grid component
myApp.chart.scatter       A scatter gram renderer
myApp.chart.tooltip       A tooltip renderer

Взаимодействие между этими компонентами показано ниже: (Извините за плохие иллюзии. Навыки ...;))

Я ищу чистый способ передачи необходимых аргументов (управления зависимостями) подкомпонентам контроллера визуализации:

Допустим, пользователь меняет индикаторна дисплее визуализации.Модель просит диспетчер данных загрузить необходимые данные.

Когда данные загружены, контроллер визуализации узнает об изменении модели и должен обновить соответствующие компоненты: Сетка, Разброс, Подсказки и т. Д.

Сетка должна знать такие вещи, как xMin, xMax, width, height ...
«Средству разброса рассеяния» также необходимы xMin, xMax, width, height. Кроме того, ему необходим доступ к синглетону больших данных, и ему необходимо выяснить, какие части данных нужно рисовать.

Три вопроса:

1. Как передать источник данных в средство визуализации Scatter?Я объявляю это или передаю?

2. Многие компоненты заинтересованы в доступных данных для рисования.Менеджер данных может ответить на этот запрос.Должна ли «dataAvailability» передаваться в средство визуализации Scatter или вместо него иметь весь менеджер данных в качестве зависимости?

3. Глядя на схематический чертеж, как бы вы расположили объекты такчто новое состояние (новые показатели, год, выбор, ширина, высота) будет легко распространяться вниз по всем подобъектам?

Спасибо:)

Answer 1

Возможно, вы захотите взглянуть на AngularJS , поскольку он имеет возможности DI (для поддержки более простого тестирования).

Answer 2

также проверьте https://github.com/briancavalier/wire для внедрения зависимости

Answer 3

То, о чем вы говорите, это больше вопрос архитектуры MVC. У вас нет десятков экземпляров объектов в разных областях, требующих DI.

Глядя на диаграмму, которую вы нарисовали, у меня возникает сильное ощущение, что вместо модели должен быть контроллер. Контроллер обязан обрабатывать взаимодействия с пользователем. Ваш контроллер может выглядеть так:

var Controller = {

    init: function {
        this.dataManager = ...;
        this.grid = ...; // grid is some sort of widget
        this.scatter = ...; // scatter is some sort of widget
        // Setup widgets
        this.scatter.x = 100;
        this.scatter.y = 100;
    },

    bind: function {
        // Bind to your indicator controls
        $('#indicator').change(_.bind(this.update, this)); // mind the scope
    },

    update: function () {
        var indicatorValue = $('#indicator').val();
        var data = this.dataManager.getData(indicatorValue);
        this.grid.setData(data);
        this.scatter.setData(data);
        this.scatter.setRegion(300, 300);
    }

}

Controller.init();
Controller.bind();

Вот и все. Передайте готовые данные в Grid и Scatter, не передавайте им источник данных и параметры запроса данных.