JavaScript의 종속 삽입?

Question

(데이터 기반 시각화를위한)이 내 자바 스크립트 응용 프로그램의 클래스의 일부입니다 :

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, 폭 것을 알 필요가

, 높이 ...
"Scatter renderer"에는 xMin, xMax, width, height도 필요합니다. 또한 큰 데이터 싱글 톤에 대한 액세스가 필요하며 데이터의 어떤 부분을 그릴 지 알아야합니다.

세 가지 질문 :

1. 은 어떻게 분산 렌더러에 데이터 소스를 통과합니까? 그것을 선언하거나 전달합니까?

2. 많은 구성 요소가 사용 가능한 데이터에 관심이 있습니다. 데이터 관리자가이 쿼리에 응답 할 수 있습니다. "dataAvailability"를 Scatter 렌더러에 전달해야합니까? 아니면 전체 데이터 관리자를 종속성으로 가져야합니까?

3. 도식적 인 그림을 보면 새로운 상태 (새로운 지표, 연도, 선택, 폭, 높이)가 모든 하위 객체를 통해 쉽게 전파 될 수 있도록 객체를 배치하는 방법은 무엇입니까? 당신이 무슨 말을하는지

감사합니다 :)

Answer 1

는 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에 전달하고 데이터 소스 및 데이터 쿼리 매개 변수를 전달하지 않습니다.

Answer 2

더 쉽게 테스트 할 수 있도록 DI 기능이 있으므로 AngularJS을보고 싶을 수 있습니다.

Answer 3

도