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のインスタンスを2つ作成する場合は、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
    });
});
于 2013-09-19T07:34:56.630 に答える