JavaScript 中的依赖注入？ （用于数据驱动的可视化）

Posted 2023-02-24

【中文标题】JavaScript 中的依赖注入？ （用于数据驱动的可视化）

【英文标题】：Dependency injection in JavaScript? (For data-driven visualization)

【发布时间】：2011-11-05 12:34:51

【问题描述】：

这些是我的 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

这些组件之间的交互如下图所示：（对不起，我的错觉。技能...；））

我正在寻找一种将必要的参数（依赖管理）传递给可视化控制器的子组件的干净方法：

假设用户更改了可视化显示中的指示器。模型要求数据管理器加载必要的数据。

加载数据时，可视化控制器了解模型更改并应更新其各自的组件：网格、散点图、工具提示等。

Grid 需要知道诸如 xMin、xMax、width、height 之类的东西... “Scatter 渲染器”还需要 xMin、xMax、width、height。 此外，它需要访问大数据单例，并且需要找出要绘制数据的哪些部分。

三个问题：

如何将 dataSource 传递给 Scatter 渲染器？我是申报还是通过？

许多组件都对要绘制的可用数据感兴趣。数据管理员可以回答这个查询。应该将“dataAvailability”传递给 Scatter 渲染器，还是应该将整个数据管理器作为依赖项？

查看示意图，您将如何布置对象以便新状态（新指标、年份、选择、宽度、高度）可以轻松地向下传播到所有子对象？

谢谢:)

【问题讨论】：

你在使用特定的 JS 框架或库吗？其中一些具有精确帮助此类事情的功能。

因为看起来您已经编写了相当多的代码，所以这不是答案，但您可能会考虑将backbone.js 用于未来的JS MVC 类型项目

我没有看到控制器与您的模型交互...除非这个 myApp.mode.controller 是可视化控制器

【参考方案1】：

还可以查看 https://github.com/briancavalier/wire 进行依赖注入

【参考方案2】：

您可能想查看AngularJS，因为它具有 DI 功能（以支持更轻松的测试）。

【参考方案3】：

您所说的更多是 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，不要将数据源和数据查询参数传递给它们。