Tiêm phụ thuộc trong JavaScript? (Đối với dữ liệu-driven trực quan)

Question

Đây là một số các lớp trong ứng dụng JavaScript của tôi:

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 

Sự tương tác giữa các thành phần này được phác thảo dưới đây: (Xin lỗi vì sự MINH HOẠ xấu kỹ năng ...;).)

những gì tôi đang tìm kiếm là một cách sạch sẽ để vượt qua các đối số cần thiết (quản lý phụ thuộc) để các tiểu hợp phần của bộ điều khiển Visualization:

Hãy nói rằng người dùng thay đổi một chỉ báo trong màn hình Visualization . Mô hình yêu cầu trình quản lý dữ liệu tải dữ liệu cần thiết.

Khi dữ liệu được nạp, bộ điều khiển trực quan tìm hiểu về sự thay đổi mô hình và sẽ cập nhật các thành phần tương ứng của nó: Lưới, Scatter, Tooltips, vv

Các Lưới cần biết những thứ như xmin, xmax, chiều rộng, chiều cao ...
"Trình kết xuất phân tán" cũng cần xMin, xMax, chiều rộng, chiều cao. Ngoài ra, nó cần truy cập vào dữ liệu lớn đơn và nó cần phải tìm ra những phần của dữ liệu để vẽ.

Ba câu hỏi:

1. Làm thế nào để vượt qua các nguồn dữ liệu cho các renderer Scatter? Tôi có khai báo hay vượt qua nó?

2. Nhiều thành phần quan tâm đến dữ liệu có sẵn để vẽ. Trình quản lý dữ liệu có thể trả lời truy vấn này. Nếu "dataAvailability" được chuyển tới trình kết xuất đồ họa Scatter hay nó sẽ thay thế toàn bộ trình quản lý dữ liệu dưới dạng phụ thuộc?

3. Nhìn vào bản vẽ sơ đồ, bạn sẽ đặt các đối tượng sao cho trạng thái mới (chỉ số mới, năm, lựa chọn, chiều rộng, chiều cao) dễ dàng truyền qua tất cả các đối tượng phụ?

Cảm ơn :)

Answer 1

Những gì bạn đang nói về là hơn một câu hỏi về kiến ​​trúc MVC. Bạn không có hàng chục đối tượng trong các phạm vi khác nhau để yêu cầu DI.

Nhìn vào biểu đồ bạn vẽ, tôi có cảm giác mạnh mẽ thay cho mô hình nên có bộ điều khiển. Đó là nhiệm vụ của bộ điều khiển để xử lý tương tác của người dùng. Bộ điều khiển của bạn có thể trông giống như sau:

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

Vậy đó. Chuyển dữ liệu đã sẵn sàng tới Grid và Scatter, không chuyển các tham số truy vấn nguồn dữ liệu và dữ liệu cho chúng.

Answer 2

Bạn có thể muốn xem AngularJS vì nó có khả năng DI (để hỗ trợ kiểm tra dễ dàng hơn).

Answer 3

cũng kiểm tra https://github.com/briancavalier/wire để tiêm phụ thuộc