require.jsの循環参照を解決する方法

　require("")をトップレベルより下に書けばいい。

成果物

• demo
• code

参考

• require.jsでの循環参照の挙動と作法（と変数での動的require）

コード抜粋

main.js

define(function(require, exports, module) {
    var l = require('js/app/Log');
    l.print("MESSAGE!!");
});

Log.js

define(function(require) {
    return {
        header: "LOG: ",
        print: function() {
            var m = require("js/app/Message");
            alert(m.getMessage());
            console.log(m.getMessage());
        }
    };
});

Message.js

define(function(require) {
    return {
        getMessage: function(msg) {
            var l = require("js/app/Log");
            return l.header + "Hello !!";
        }
    };
});

Log.jsとMessage.jsは相互に参照し合っている。循環参照である。

循環参照の解決

　require("")をトップレベルより下に書けばいい。

Log.js

define(function(require) {
//    var m = require("js/app/Message"); // いつもはここ（トップレベル）に書いている
    return {
        header: "LOG: ",
        print: function() {
            var m = require("js/app/Message"); // ここに移動する
            alert(m.getMessage());
            console.log(m.getMessage());
        }
    };
});

　Message.jsも同様。

　理想としては循環参照しないよう設計すべきらしい。
　だが現実には、フレームワークなど変更できない箇所との兼ね合いで循環参照してしまうこともある。そんなときにはこの方法を使いたい。