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

I have been using Javascript for a while and I have just tried using modules and requireJS for the first time and its hard to get my head around new design patterns!

我已经使用了一段时间的Javascript，我刚刚尝试了第一次使用模块和requireJS，并且很难得到新的设计模式。

Here is my first attempt:

这是我的第一次尝试:

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

and testModule.js

和testModule.js

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

    var id = 0;

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

This returns 0 and I was expecting 11. What am I missing?

这个返回0，我原以为是11。我缺少什么?

It is also a simplified example of course. I would like to create multiple objects and each should keep its own variables in state. For example if I wanted a module to append a list to a container DIV but also contain functions to add, clear or query data in that list how should I structure the module functions so that each implementation keeps its own state.

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

Thanks

谢谢

2 个解决方案

#1

You actually aren't missing anything requireJS related here. The problem is that only objects are passed around by reference (and maybe arrays.. can't remember for sure right now). Numbers are not. So, when you returned {setID: setID, id: id}, the 'id' got set to the value of 'id', never again to be updated. What you want to do is use a function such as 'getID', which will reference the original variable, rather than the original variable's value:

你实际上并没有漏掉任何相关的需求。问题是只有对象是通过引用(可能还有数组)传递的。现在不记得了。数字不是。因此，当您返回{setID: setID, id: id}时，'id'被设置为'id'的值，从此不再更新。你要做的是使用一个函数，比如getID，它将引用原始变量，而不是原始变量的值:

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

and then...

然后……

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

#2

If you want to have two instances of testModule you'll need to return testModule as a function. Then when you require it you can instantiate multiple instances using new.

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

Example 1

testModule.js

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

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

---

Or if you want to get fancy, you can protect certain properties or functions within testModule.

或者，如果您想要更花哨一些，您可以在testModule中保护某些属性或函数。

Example 2

testModule.js

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

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"
        });
    });

---

If you just want a single instance like a singleton you can return TestModule using the new keyword.

如果您只想要一个单独的实例，比如单例，您可以使用新的关键字返回TestModule。

Example 3

testModule.js

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

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