javascript - requireJsを使用したモジュールの循環依存

Question

循環依存関係を修正するためにrequireJsのドキュメントを読むexportsことは、他のモジュールがすぐに参照できるモジュールの空のオブジェクトを作成するために使用することをお勧めします。

このコードを試しましたが、機能しないようです。なにが問題ですか？

PS：
出力、
特にsetTimeout呼び出し内のBモジュールを確認するためのコメントを読んでください。

// A module
define([
    'b'
], function (b) {
    console.log('B:', b); // B, Object
    var A = {
        boo: 1
    };

    return A;
});

// B module
define([
    'a',
    'exports'
], function (a, exports) {
    console.log('A:', a); // A, undefined (as I was expecting)
    exports.A = function () {
        return a;
    }

    var B = {
        bar: 1
    };

    setTimeout(function () {
        console.log('exports.A', exports.A()); // exports.A undefined 
                                           // I would like to access the A object
                                           // which is defined in A module
    }, 500);

    return B;
});

// main.js

(function () {

    define([
        'a'
    ], function () {
    });
}());

score 1 · Accepted Answer

require()B モジュールの同期バージョンを使用して、「A」モジュールにアクセスできるはずです。

// B module
define([
    'a',
    'exports'
], function (a, exports) {
    console.log('A:', a); // A, undefined (as I was expecting)
    exports.A = function () {
        return require('a');
    }
    ...
});

score 0 · Accepted Answer

1 つのオプションは、モジュール自体を返すのではなく、モジュールをインスタンス化する関数を返すことです (この例では、typescript で定義されているコンストラクターで、下部に生成された js コードがあります。インターフェイスは .js コードを生成しないことに注意してください)。

ファイル IA.ts

/// <reference path="IB.ts" />
interface IA{
    funcA();
    _classB : IB;
}

ファイル IB.ts

/// <reference path="IA.ts" />
interface IB{
    funcB();
    _classA : IA;
}

ファイル ClassA.ts

/// <reference path="IA.ts" />
/// <reference path="IB.ts" />

export class ClassA implements IA
{
    _classB : IB = null;

    constructor(classB : IB)
    {
        this._classB = classB;
        if (classB){
            this._classB._classA = this;
        }
        return this;
    }

    funcA(){
        console.log('I am ClassA');
    }
}

ファイル ClassB.ts

/// <reference path="IA.ts" />
/// <reference path="IB.ts" />
export class ClassB implements IB
{
    _classA : IA = null;
    constructor(classA : IA)
    {
        this._classA = classA;
        if (classA){
            this._classA._classB = this;
        }
        return this;
    }
    funcB(){
        console.log('I am ClassB');
    }
}

ファイル MainTest.ts

/// <reference path="../../def/require.d.ts" />
/// <reference path="IA.ts" />
/// <reference path="IB.ts" />
define(['ClassA', 'ClassB'],
    function (classA, classB)
    {
        var aa : IA = new classA.ClassA();
        var bb : IB = new classB.ClassB(aa);

        bb.funcB();
        aa._classB.funcB();
        bb._classA.funcA();
        aa.funcA();
    });

そして、生成された js コード:

ファイル ClassA.js

define(["require", "exports"], function(require, exports) {
    var ClassA = (function () {
        function ClassA(classB) {
            this._classB = null;
            this._classB = classB;
            if (classB) {
                this._classB._classA = this;
            }
            return this;
        }
        ClassA.prototype.funcA = function () {
            console.log('I am ClassA');
        };
        return ClassA;
    })();
    exports.ClassA = ClassA;
});

ファイル ClassB.js

define(["require", "exports"], function(require, exports) {
    var ClassB = (function () {
        function ClassB(classA) {
            this._classA = null;
            this._classA = classA;
            if (classA) {
                this._classA._classB = this;
            }
            return this;
        }
        ClassB.prototype.funcB = function () {
            console.log('I am ClassB');
        };
        return ClassB;
    })();
    exports.ClassB = ClassB;
});

ファイル MainTest.js

define(['ClassA', 'ClassB'], function (classA, classB) {

    var aa = new classA.ClassA();
    var bb = new classB.ClassB(aa);

    bb.funcB();
    aa._classB.funcB();
    bb._classA.funcA();
    aa.funcA();

});

最終的に、出力は次のようになります。

私はクラスBです

私はクラスAです

javascript - requireJsを使用したモジュールの循環依存

3 に答える 3

Related

Reference