1

AMD/Require サイトで古いスクリプトを使用しようとしています。これらの古いスクリプトの一部は、タグの document.write または document.writeln を使用して他のスクリプトを挿入します。以下は、何が起こっているかを簡略化した形式です。

script1.js:

console.log('script1');
document.writeln("<script src='script2.js'></script>");

script2.js

console.log('script2');

従来の方法で script1 をロードすると、DOM は両方のスクリプト タグが存在することを示し、コンソール出力は両方が実行されたことを示します。

<head>
    <script src="script1.js"></script>
</head>
<body></body>

しかし、RequireJS 経由で script1 をロードすると、DOM はscript1 タグのみを表示します。コンソール出力は、script1が実行されたことを示していますが、document.writeln は明らかに無視されているため、script2 は DOM に追加されていません。

<head>
    <script src="require-jquery.js"></script>
    <script language="javascript">
        require( ['script1'], function( ) { } );
    </script>
</head>
<body></body>

この追加のスクリプトが DOM に挿入されるのを妨げているのは何ですか? 上記が正しく機能したとしても、読み込み順序に他の問題があると思われます。しかし、追加のスクリプトの読み込みを妨げている RequireJS の動作の違いについて、私の知識のこの穴を理解したいと思います。

RequireJS のバージョン 2.1.4 を使用しています。動作は Firefox と Chromium で同じです。

編集:実際のシナリオでは、最初のスクリプトが生成されるときに、「script2」へのパスがサーバー側のロジックに基づいて動的であることを忘れていました。

EDIT2: シナリオを要約しようとして、何か別のものを隠しました: これらの古いライブラリは、会社の別の部門によって管理されており、サーバー側のロジックに基づいて部分的に動的であるため (簡単に) 変更できません (これもまた) 、私は制御しません）。したがって、@ddotsenko が提案したように、質問を言い換える必要があるかもしれません:スクリプト タグの挿入に依存するレガシー スクリプトをどのように取得し、AMD/RequireJS を使用して正しいことをしようとしているサイトの残りの部分にそれらを適合させるか? 提案された shim アプローチは近いですが、依存関係が不明であるため機能しません。

4

1 に答える 1

1

問題は、ページの読み込み後に document.write() が機能しないことです (そして RequireJS は XHR を使用します)。

ただし、「shim」を使用して、古いモジュールの依存関係を事前定義することができます - http://requirejs.org/docs/api.html#config-shim

config.js

require.config({

    deps: ["main"],

    shim: {
        script1: {
            deps: ['script2'],
            exports: "someScript1Object"
        }
    }
});

main.js

require(
    [ "script1" ],
    function(someScript1Object) {
        // ...
    }
);

そしてコンソール出力は

script2
script1

アップデート。2 番目のバリアント: document.write / document.writeln をオーバーライドする

Document.write をオーバーライドすることで、 ControlJS のトリックを使用できます。このコードを試してください：

require.docwrite = function(text){
    var aMatches = text.match(/src='([^']*)/i) ||
        text.match(/src="([^"]*)/i) ||
        text.match(/src=([^ >]*)/i);
    if ( aMatches ) {
        var url = aMatches[1];
        require([ url ]);
    }
}

document.write = require.docwrite;
document.writeln = require.docwrite;
于 2013-03-05T05:55:53.517 に答える