Question

我一直在使用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，但也包含要添加的函数，清除或查询该列表中的数据，我应该如何构造模块函数，以便每个实现保持其自己的状态。 / p>

由于

Answer 1

你实际上并没有遗漏任何与此相关的需求。问题是只有对象通过引用传递（并且可能是数组......现在无法确定）。数字不是。因此，当您返回{setID：setID，id：id}时，'id'被设置为'id'的值，永远不会再次更新。你想要做的是使用诸如'getID'之类的函数，它将引用原始的变量，而不是原始变量的值：

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

然后......

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

Answer 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访问模块变量？

2 个答案:

示例1

示例2

示例3