Как получить доступ к переменным модуля с помощью requireJS?

Я использую 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

На самом деле вы не видите ничего, что связано с этим. Проблема в том, что только объекты передаются по ссылке (и, возможно, массивы.. не могут помнить наверняка прямо сейчас). Числа нет. Итак, когда вы вернули {setID: setID, id: id}, 'id' получил значение "id", больше никогда не обновлялось. То, что вы хотите сделать, это использовать функцию типа getID, которая будет ссылаться на исходную переменную, а не на исходное значение переменной:

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

а затем...

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

Ответ 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"
        });
    });

Если вам нужен только один экземпляр, например singleton, вы можете вернуть TestModule с помощью ключевого слова new.

Пример 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
    });
});