Wstrzyknięcie zależności w JavaScript? (Dla danych opartych na wizualizacji)

Question

Są to tylko niektóre z zajęć w mojej aplikacji 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 

Interakcja pomiędzy tymi składnikami są zarysowane poniżej: (Przepraszam za złe Illus umiejętności ...;).)

Co szukam jest czysty sposób przekazać niezbędne argumenty (zarządzanie zależność) do podkomponenty regulatora wizualizacja:

Załóżmy, że użytkownik zmienia wskaźnik na wyświetlaczu Wizualizacja . Model prosi menedżera danych o załadowanie niezbędnych danych.

Gdy dane są ładowane, kontroler Wizualizacja dowiaduje się o zmianie modelu i powinien aktualizować swoje odpowiednie komponenty Grid, scatter, podpowiedzi itp

Siatka musi wiedzieć takie rzeczy jak Xmin, Xmax, szerokość, wysokość ...
"Rozproszone renderowanie" również potrzebuje xMin, xMax, szerokość, wysokość. Ponadto potrzebuje dostępu do big data singleton i musi dowiedzieć się, jakie części danych należy narysować.

Trzy pytania:

1. Jak mogę przekazać źródło danych do renderowania punktowy? Czy deklaruję je lub przekazuję?

2. Wiele komponentów jest zainteresowanych dostępnymi danymi do narysowania. Menedżer danych może odpowiedzieć na to zapytanie. Czy "DataAvailability" powinien zostać przekazany do renderera Scatter, czy zamiast tego powinien mieć cały menedżer danych jako zależność?

3. Patrząc na schematyczny rysunek, w jaki sposób rozmieściłbyś obiekty, aby nowy stan (nowe wskaźniki, rok, wybór, szerokość, wysokość) był łatwy do propagacji w dół przez wszystkie sub-obiekty?

Dzięki :)

Answer 1

Co mówisz to bardziej kwestia architektury MVC. Nie masz dziesiątek instancji obiektów w różnych zakresach, aby wymagać DI.

Patrząc na narysowany wykres, mam silne przeczucie, że zamiast modelu powinien być kontroler. Obowiązkiem kontrolera jest obsługa interakcji użytkownika. Twój kontroler może wyglądać tak:

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(); 

To wszystko. Prześlij gotowe dane do siatki i rozproszenia, nie przekazuj im parametrów źródła danych i danych zapytania.

Answer 2

Możesz chcieć spojrzeć na AngularJS, ponieważ ma możliwości DI (w celu wsparcia łatwiejszych testów).

Answer 3

również sprawdzić https://github.com/briancavalier/wire do wstrzykiwania zależności