javascript - 将 D3.js 与模块模式结合使用

Question

当d3调用回调函数时，this似乎被设置为窗口。

因此，我如何在 JSON 响应回调中设置模块级变量？

在下面的示例中，MODULE.Submodule.bar 已设置，但 MODULE.Submodule.foo 未设置。

var MODULE = MODULE || {};

MODULE.Submodule = (function(){
    var foo = [],
        bar = [];

    var init = function() {
        d3.json('path_to_file.json', set_globals);
    }

    var set_globals = function(error, json) {
        this.foo = ['a','b','c']; // 'this' doesn't point to MODULE.Submodule 
        bar.push('a');
        console.log('foo: ' + MODULE.Submodule.foo); // foo:
        console.log('bar: ' + MODULE.Submodule.bar); // bar: a
    }

    return {
        init: init,
        foo: foo,
        bar: bar
    }
}());

MODULE.Submodule.init();

我想过透露 set_globals ，然后将回调从 d3.json 转换为 this.set_globals 但这并没有帮助。

我也尝试过简单地从 this.foo = ['a','b','c']; 之前删除 this 但这也好不到哪儿去.

Answer 1

这样就可以了。如果需要的话，它还可以通过使用增强来动态创建父 MODULE 来清理一些东西。

var MODULE = (function (module) {
    var sub = module.Submodule = module.Submodule || {
        foo: [],
        bar: [],
        init: function () {
            d3.json('path_to_file.json', set_globals);
        }
    };

    function set_globals(err, json) {
        sub.foo = ['a', 'b', 'c'];
        sub.bar.push('a');
    }

    return module;
}(MODULE || {}));

然后只需像之前一样调用 MODULE.Submodule.init() 即可。