10

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

谢谢

4

2 回答 2

6

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

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

接着...

testInstance1.setID(11);
alert(testInstance1.getID());
于 2012-09-16T19:45:00.947 回答
3

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

示例 1

测试模块.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

测试模块.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

测试模块.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
    });
});
于 2013-09-19T07:34:56.630 回答