javascript - 模块模式: setting module-wide arrays

Question

尽管已阅读 all the usual关于 Javascript 模块模式的教程，仍然有一些关于范围界定的内容我显然不明白。

pushing 到模块范围的列表符合我的预期。使用 = 设置模块范围的列表则不会。我在这里做错了什么？

var MODULE = MODULE || {};

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

    var init = function() {
        foo = ['a','b','c']; // This doesn't set MODULE.Submodule.foo
        bar.push('a'); // But this works as expected
        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();

Answer 1

这个 JSFiddle http://jsfiddle.net/SwBLk/1/可能有助于解释发生的事情:

var MODULE = MODULE || {};

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

var init = function() {
    console.log(MODULE.Submodule.foo === foo);
    foo = ['a','b','c']; // This doesn't set MODULE.Submodule.foo
    console.log(MODULE.Submodule.foo === foo);
    bar.push('a'); // But this works as expected

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

第一个 bool 检查返回 TRUE，因为两个对象引用同一个对象。第二个 bool 检查返回 FALSE，因为您已将 foo 替换为新对象，并且引用不再指向相同的底层对象。

当您重新分配一个新数组时，您将用对新数组的引用替换 foo 数组。

当您执行 IIFE 时，您会在 return 语句上分配对“foo”的非常特定版本的引用。这是您调用 MODULE.Submodule.foo 时访问的引用。当您进入并替换 foo = [ "a", ... ] 时，您将替换对象 foo，但不会替换 MODULE.Submodule 对象中对其的引用。

编辑:您如何解决这个问题？

1) 理想情况下，您不会替换整个数组，而只需在 init() 调用时清除并重新初始化它:

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

var init = function() {
    // Clear our the array if it already contains data (in case your calling "init" more than once)
    // This method is documented to be the fastest way to clear out an array, referenced here:
    // http://stackoverflow.com/questions/1232040/how-to-empty-an-array-in-javascript
    while(foo.length > 0) {
        foo.pop();
    }

    foo.push('a');
    foo.push('b');
    foo.push('c');

    bar.push('a'); // But this works as expected

    console.log('foo: ' + MODULE.Submodule.foo); // foo:
    console.log('bar: ' + MODULE.Submodule.bar); // bar: a
}

2)你的第二个选择是使用我所说的“动态 setter/getter ”(工作 fiddle :http://jsfiddle.net/6zVcP/):

var MODULE = MODULE || {};

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

var init = function() {
    foo = ['a','b','c']; // This doesn't set MODULE.Submodule.foo
    bar.push('a'); // But this works as expected

    console.log('foo: ' + MODULE.Submodule.foo()); // foo:
    console.log('bar: ' + MODULE.Submodule.bar()); // bar: a
}

var modify = function()
{
    foo = [];
    foo.push("test");
}

return {
    init: init,
    modifyArrays: modify,
    foo: function() { return foo; },
    bar: function() { return bar; }
}
}());

MODULE.Submodule.init();
MODULE.Submodule.modifyArrays();
console.log(MODULE.Submodule.foo());

这允许您对 foo 对象执行任何您想要的操作，而 getter 将始终返回最新的引用。