Iniezione di dipendenza in JavaScript? (Per i dati-driven visualizzazione)

Question

Queste sono alcune delle classi nella mia applicazione 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 

L'interazione tra questi componenti sono illustrate qui di seguito: (Ci scusiamo per la cattiva illus competenze ...;.))

Quello che sto cercando è un modo pulito per passare gli argomenti necessari (gestione delle dipendenze) per i sub-componenti del regolatore di visualizzazione:

Diciamo che l'utente modifica un indicatore sul display di visualizzazione . Il modello chiede al gestore dati di caricare i dati necessari.

Quando viene caricato i dati, il controllore di visualizzazione viene a conoscenza del cambio di modello e dovrebbero aggiornare i rispettivi componenti: griglia, dispersione, ecc Tooltips

La griglia deve sapere cose come Xmin, Xmax, larghezza, altezza ...
Anche il "Renderer di dispersione" richiede xMin, xMax, larghezza, altezza. Inoltre, ha bisogno di accedere al Big Data Singleton e ha bisogno di scoprire quali parti dei dati disegnare.

Tre domande:

1. Come faccio a passare il DataSource al renderer Scatter? Lo dichiaro o lo passo?

2. Molti componenti sono interessati ai dati disponibili da disegnare. Il gestore dati potrebbe rispondere a questa domanda. La "dataAvailability" deve essere passata al renderer di Scatter o dovrebbe invece avere l'intero data manager come dipendenza?

3. Osservando il disegno schematico, come definirei gli oggetti in modo che un nuovo stato (nuovi indicatori, anno, selezione, larghezza, altezza) si propagasse facilmente attraverso tutti gli oggetti secondari?

Grazie :)

Answer 1

Quello che stiamo parlando è più una questione di architettura MVC. Non hai decine di istanze di oggetti in ambiti diversi per richiedere un DI.

Guardando il diagramma che hai disegnato, ho la netta sensazione che al posto del modello ci debba essere un controller. È dovere del controllore gestire le interazioni dell'utente. Il tuo controller potrebbe essere il seguente:

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

Questo è tutto. Passa i dati pronti a Grid e Scatter, non passare i parametri di origine dati e query dati a questi.

Answer 2

Si potrebbe voler guardare AngularJS in quanto ha funzionalità DI (per supportare test più facili).

Answer 3

Verificate anche https://github.com/briancavalier/wire per l'iniezione di dipendenza