JavaScript 设计模式与 Meteor

Question

我有一个 Meteor 项目，大约有 800 行代码，该项目开始失控。我今天开始对一些东西进行模块化和清理，事情看起来不错，但是我遇到了一些错误，我不知道如何处理的最佳方法。

这是一个典型的例子。

我正在使用 d3 创建强制布局(这个问题不是 d3 特有的)。我实例化了一些变量，最值得注意的是

var force = d3.layout.force()

在文件中

/client/views/force/forceLayout.js

我为此强制布局制作了一堆控件，并将它们放入自己的 .html 和 .js 文件中。这是一个例子

initChargeSlider = function() {
    d3.select("#charge-slider")
        .call(d3.slider()
            .min(-301)
            .max(-1)
            .step(5)
            .value(Session.get("charge"))
            .on("slide", function(evt, value) {
                Session.set("charge", value);
                // force.stop();
                force = force.charge(value);
                force.start();
            }));
}

Template.charge.rendered = function() {
    initChargeSlider();
};

在文件

/client/views/force/controls/sliders/charge.js

由于 Meteor 首先加载更深的目录，我在 force = force.charge(value) 处收到错误，因为 forceLayout.js 尚未实例化 force 还没有。

我很好奇处理这个问题的最佳方法是什么。移动文件和加载顺序只是反转我刚刚所做的所有模块化。我认为单例、对象或单子(monad)可能是有序的，但我不确定是哪个或为什么。我希望能够解释如何修复这些错误。

谢谢

切特

Answer 1

0.6.5 之前的 Meteor 运行文件而不将其包装在函数包装器中 (function() {/* 你的代码 */})()。

如果您将文件放在 client/compatibility 文件夹中，仍会遵循此行为:

Some JavaScript libraries only work when placed in the client/compatibility subdirectory. Files in this directory are executed without being wrapped in a new variable scope. This means that each top-level var defines a global variable. In addition, these files are executed before other client-side JavaScript files.

现在，Meteor 对全局变量更加不宽容，现在需要明确声明它们。因此，

window.force = d3.layout.force()

甚至

this.force = d3.layout.force(); // this === window in global context.

可以解决问题。