如何使用 requireJS 访问模块变量？

Posted 2023-02-18

【中文标题】如何使用 requireJS 访问模块变量？

【英文标题】：How do I access module variables using requireJS?

【发布时间】：2012-09-09 02:43:37

【问题描述】：

我使用 javascript 已经有一段时间了，我只是第一次尝试使用模块和 requireJS，我很难理解新的设计模式！

这是我的第一次尝试：

require([
    "jquery",
    "testModule"
], function ($, testModule) 
    $(function () 
        var testInstance1 = testModule;
        testInstance1.setID(11);
        alert(testInstance1.id);
    );
);

和 testModule.js

define([
  'jquery'
], function ($) 

    var id = 0;

    var setID = function (newID) 
        id = newID;
        return id;
    ;
    return 
        setID: setID,
        id:id
    ;
);

这返回 0，而我期待 11。我错过了什么？

当然这也是一个简化的例子。我想创建多个对象，每个对象都应该保持自己的变量处于状态。例如，如果我想要一个模块将列表附加到容器 DIV，但还包含在该列表中添加、清除或查询数据的函数，我应该如何构造模块函数，以便每个实现都保持自己的状态。

谢谢

【参考方案1】：

您实际上并没有错过任何与 requireJS 相关的内容。问题是只有对象是通过引用传递的（也许数组..现在无法确定）。数字不是。因此，当您返回 setID: setID, id: id 时，'id' 被设置为 'id' 的 value，不再更新。您想要做的是使用诸如'getID'之类的函数，它将引用原始变量，而不是原始变量的值：

return 
    setID: setID,
    getID: function () return id;
;

然后……

testInstance1.setID(11);
alert(testInstance1.getID());

【讨论】：

感谢您的帮助。这一直有效，直到我尝试创建 2 个实例。 'var testInstance1 = testModule; testInstance1.setID(11); var testInstance2 = testModule; testInstance2.setID(99);警报（testInstance2.getID（））；警报（testInstance1.getID（））；'两者都给 99。

嗯，你正在改变同一个变量..你可能需要一个比你所拥有的更复杂的结构，比如有一个'testModule.createInstance()'

Stephen，你的回答真的帮助了我get RequireJS 模块。真是太感谢你了。

【参考方案2】：

如果您想拥有两个 testModule 实例，您需要将 testModule 作为函数返回。然后，当您需要它时，您可以使用 new 实例化多个实例。

示例 1

testModule.js

define([
  'jquery'
], function ($) 

    function TestModule() 
        var self = this;
        // anything attached to self or this will be public
        self.id = 0;
        self.setID = function (newID) 
            self.id = newID;
            return self.id;
        ;
    

    return TestModule;
);

main.js

require([
    "jquery",
    "testModule"
], function ($, TestModule) 
    $(function () 
        var testInstance1 = new TestModule();
        var testInstance2 = new TestModule();
        testInstance1.setID(11);
        testInstance2.setID(99);
        alert(testInstance1.id); // Should return 11
        alert(testInstance2.id); // Should return 99
    );
);

---

或者，如果你想变得花哨，你可以在 testModule 中保护某些属性或函数。

示例 2

testModule.js

define([
  'jquery'
], function ($) 

    function TestModule() 
        var self = this;
        var privateID = 0;
        function privateToString() 
            return 'Your id is ' + privateID;
        
        // anything attached to self or this will be public
        self.setID = function (newID) 
            privateID = newID;
        ;
        self.getID = function () 
            return privateID;
        ;
        self.toString = function () 
            return privateToString();
        ;
    

    return TestModule;
);

main.js

    require([
        "jquery",
        "testModule"
    ], function ($, TestModule) 
        $(function () 
            var testInstance1 = new TestModule();
            var testInstance2 = new TestModule();
            testInstance1.setID(11);
            testInstance2.setID(99);
            alert(testInstance1.getID()); // Should return 11
            alert(testInstance2.getID()); // Should return 99
            alert(testInstance1.privateID); // Undefined
            alert(testInstance1.toString()); // Should return "Your id is 11"
        );
    );

---

如果您只想要像单例这样的单个实例，您可以使用 new 关键字返回 TestModule。

示例 3

testModule.js

define([
  'jquery'
], function ($) 

    function TestModule() 
        var self = this;
        // anything attached to self or this will be public
        self.id = 0;
        self.setID = function (newID) 
            self.id = newID;
            return self.id;
        ;
    

    return new TestModule();
);

main.js

require([
    "jquery",
    "testModule"
], function ($, testModule) 
    $(function () 
        var testInstance1 = testModule;
        var testInstance2 = testModule;
        testInstance1.setID(11);
        testInstance2.setID(99);
        alert(testInstance1.id); // Should return 99
        alert(testInstance2.id); // Should return 99
    );
);

【讨论】：

太棒了，这让我对 RequireJS 大开眼界。我对 NodeJS 模块是 OO 感到满意，但我需要在 RequireJS 中看到这一点。谢谢。