0

すべてのページで同じスクリプトを何度も定義せずにロードするという問題があります。

私は次のような半分完全なソリューションを思いつきました...

var scriptLocs = [];

function loadScripts() {
    for (var i = 0; i < scriptLocs.length; i++) {
        var crtElement = document.createElement('script');
        crtElement.src = scriptLocs[i];
        var hh = document.getElementsByTagName('head')[0];
        // Getting head tag
        hh.appendChild(crtElement);
        //Adding it to head
    }
}​

配列は非常に大きくなる可能性があります。たとえば、約 120 個のスクリプト (2.5MB) があり、これらには jQuery や Knockout などが含まれます...

私が抱えている問題は、これが信頼できない可能性があることです. 順序は非常に重要です。jQuery に依存するものがあるため、他のスクリプトの前にロードする必要があります。

また、更新ごとに異なるエラーが発生します...たとえば、読み込み順序が異なる可能性がありますか?

要素内のすべてのスクリプトを定義してから、それらの多くを一度に追加する方法はありますか? これは機能しますか？

アップデート：

この test.js ファイルの使用

for (var i = 0; i < scriptLocs.length; i++) {
    document.write("<script type=\"text/javascript\" src=\"" + scriptLocs[i] + "\"><\/script>");
}

そして、頭の中で最初にそれを含めます..

<!DOCTYPE HTML>
<html>
    <head>
        <title>Test</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script type="text/javascript" src="test.js"></script>

この問題を解決するようです

4

4 に答える 4

3

多くのスクリプトがある場合は、それらを圧縮して連結し、1 つの縮小されたスクリプトとして提供することを検討する必要があります。

たとえば、Google のクロージャ コンパイラまたはYUI コンプレッサーを使用してこれを行うことができます。

于 2012-07-25T10:50:06.200 に答える
1

これがdocument.write()目的です。よく誤用されますが、この場合は適切な選択です。

var scriptLocs = [...];
for (var i = 0; i < scriptLocs.length; i++) {
    document.write("<script type=\"text/javascript\" src=\""+scriptLocs[i]+"\"><\/script>");
}

ただし、これを関数に入れたり、イベント ハンドラーから呼び出したりしないでください。このスクリプトは、ページの読み込み中にすぐに実行する必要があります。dom がロードされた後に呼び出すdocument.write()と、問題が発生します。

于 2012-07-25T11:09:48.923 に答える
1

依存関係を宣言し、読み込み順序を指定する方法を探しているようです。これは、jsハンドルが必要なものです。さらに、

RequireJS には、関連するスクリプトをまとめてビルド レイヤーに結合し、UglifyJS (デフォルト) または Closure Compiler (Java を使用する場合のオプション) を介してそれらを縮小する最適化ツールがあります。

これにより、縮小された単一のスクリプトをアプリケーションのすべてのページに含めることができます。

于 2012-07-25T10:58:03.290 に答える
0

呼び出しているスクリプトのサイズを確認しましたか? 配列はあなたの順序に従い、要素の作成はあなたの順序に従いますが、JavaScriptでそれらを呼び出していることを覚えておいてください。したがって、スクリプトがロードされるのを待ってから、他のスクリプトをロードすることはありません。つまり、100であるjqueryをロードしている場合たとえば、10 kb のネイティブ スクリプトを呼び出している場合、スクリプトは最初に jquery にロードされます。属性 async を追加して、dom がスクリプトを待たないようにします。

于 2012-07-25T10:59:45.433 に答える