Injection de dépendance en JavaScript? (Pour la visualisation guidée par les données)

Question

Voici quelques-unes des classes dans mon application 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'interaction entre ces composants sont esquissés ci-dessous: (Désolé pour la mauvaise illus compétences ...;.))

ce que je suis à la recherche est un moyen propre pour passer les arguments nécessaires (gestion de la dépendance) aux sous-composantes du contrôleur de visualisation:

Disons que l'utilisateur change un indicateur dans l'affichage de visualisation . Le modèle demande au gestionnaire de données de charger les données nécessaires.

Lorsque les données sont chargées, le contrôleur de visualisation apprend au sujet du changement de modèle et devrait mettre à jour ses composants respectifs: Grille, Scatter, infobulles etc.

La grille a besoin de savoir des choses telles que Xmin, xMax, largeur, height ...
Le "Scatter renderer" nécessite également xMin, xMax, width, height. En outre, il doit avoir accès au singleton Big Data et doit trouver les parties des données à dessiner.

Trois questions:

1. Comment puis-je passer la source de données au moteur de rendu Scatter? Est-ce que je le déclare ou le passe?

2. De nombreux composants sont intéressés par les données disponibles à dessiner. Le gestionnaire de données pourrait répondre à cette requête. Le "dataAvailability" doit-il être transmis au rendu Scatter ou doit-il avoir le gestionnaire de données entier en tant que dépendance? En regardant le dessin schématique, comment disposeriez-vous les objets afin qu'un nouvel état (nouveaux indicateurs, année, sélection, largeur, hauteur) se propage facilement dans tous les sous-objets?

Merci :)

Answer 1

Qu'est-ce que vous parlez est plus une question de l'architecture MVC. Vous n'avez pas des dizaines d'instances d'objets dans des portées différentes pour exiger une DI. En regardant le diagramme que vous avez dessiné, j'ai le sentiment qu'à la place du modèle, il devrait y avoir un contrôleur. C'est le devoir du contrôleur de gérer les interactions de l'utilisateur. Votre contrôleur peut ressembler à ceci:

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

C'est tout. Transmettez les données prêtes à Grid et Scatter, ne leur transmettez pas les paramètres de source de données et de requête de données.

Answer 2

Vous voudrez peut-être regarder AngularJS car il a des capacités DI (pour faciliter les tests).

Answer 3

vérifier également https://github.com/briancavalier/wire pour l'injection de dépendance