LABJS のオンデマンドでの js ファイルの動的ロードについて詳しく説明する_javascript スキル

LABjs は、必要に応じて JavaScript ファイルをロードするために使用される小さな JavaScript ツールです。このツールを使用すると、ページのパフォーマンスを向上させ、不要な JavaScript ファイルのロードを回避し、スクリプト ファイルの動的並列ロードと管理を実現できます。スクリプトファイルをロードする実行順序。

簡単な例

$LAB
.script("script1.js", "script2.js", "script3.js")
.block(function(){
  // wait for all to load, then do something
  script1Func();
  script2Func();
  script3Func();
});

LABJS の例をいくつか紹介します:
例 1:

$LAB
  .script("script1.js")
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

例 2:

$LAB 
  .script({ src: "script1.js", type: "text/javascript" })
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

例 3:

$LAB
  .script("script1.js", "script2.js", "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

例 4:

$LAB
  .script( [ "script1.js", "script2.js" ], "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

例 5:

$LAB
  .script("script1.js").wait() // 空的wait()只是确保script1在其他代码之前被执行
  .script("script2.js") // script2 和 script3 依赖于 script1
  .script("script3.js").wait() // 但是script2 和 script3 并不互相依赖,可以并行下载
  .script("script4.js") // script4 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

例 6:

$LAB
  .script("script1.js") // script1, script2, and script3 之间没有依赖关系,
  .script("script2.js") // 所以可以任意顺序执行
  .script("script3.js")
  .wait(function(){ // 如果需要,这里当然可以执行javascript函数
    alert("Scripts 1-3 are loaded!");
  })
  .script("script4.js") // 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

例 7:

$LAB
  .setOptions({AlwaysPreserveOrder:true}) // 设置每个脚本之间等待
  .script("script1.js") // script1, script2, script3, script4 互相依赖
  .script("script2.js") // 并且并行下载后循序执行
  .script("script3.js")
  .script("script4.js")
  .wait(function(){script4Func();});

例 8:

$LAB
  .script(function(){
    // `_is_IE`的值ie为true ,非ie为false
    if (_is_IE) {
      return "ie.js"; // 如果是ie则这个js会被加载
    }
    else {
      return null; //如果不是ie这个代码就会被略过
    }
  })
  .script("script1.js")
  .wait();

LABjsの読み込み方法

LABjs でのスクリプト ファイルの動的読み込みとは、ページの js スクリプトが実行されるときに、さまざまなメソッドを通じて外部 js を読み込むことを指します (主に、HTML ページの 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを通じて静的に読み込まれるスクリプトとは異なります)

スクリプトを動的にロードするにはさまざまな方法がありますが、ここでは詳しく説明しません。興味のある方は、この記事の最後にある参照リンクを参照してください。

LABjs では、スクリプト要素、XHR インジェクション、キャッシュ トリックという 3 つの主なテクニックが使用されます

まず、これら 3 つの読み込みメソッドについて簡単に説明します。第 4 部では、LABjs ソース コード実装における 3 つのメソッドの使用シナリオを分析します。

スクリプト要素 (LABjs はデフォルトで読み込みメソッドを使用します)

スクリプトを動的にロードする最も一般的な方法には、次のような多くの利点があります。 1. 実装が簡単 2. クロスドメインが可能 3. 他のリソースのロードをブロックしないなど

Opera/Firefox (旧バージョン) では、スクリプトの実行順序は、ノードがページに挿入される順序と一致します

IE/Safari/Chrome の場合: 実行順序は保証されません

注:

新しいバージョンの Firefox では、スクリプトの実行順序とページへの挿入順序は必ずしも一致しませんが、script タグの async 属性を false に設定することで実行順序を保証できます

古いバージョンの Chrome では、スクリプトの実行順序とページへの挿入順序は必ずしも一致しませんが、script タグの async 属性を false に設定することで実行順序を保証できます

XHR インジェクション
ajax リクエスト経由でスクリプト ファイルをロードし、次の方法で実行します:
eval: 共通メソッド
XHR インジェクション: スクリプト要素を作成し、ロードされたスクリプト ファイルのコンテンツを
にインジェクトします。 主な制限: ドメインを越えることはできません
キャッシュ トリック (ブラウザ機能の実装に大きく依存するため、推奨されません)
script 要素の type 属性をブラウザが認識しない値 ("text/cache"、"text/casper"、"text/hellworld" など) に設定すると、さまざまなブラウザの動作は次のようになります。以下:
IE/Safari/Chrome (旧バージョン): スクリプトは通常どおりロードされますが、ブラウザーがキャッシュを無効にしないと、ロードされたスクリプトは必要な場合にのみブラウザーによってキャッシュされます。スクリプトタグを再作成し、タイプを正しい値に設定し、src が以前にリクエストしたファイル URL を指す必要があります (キャッシュからファイルを読み取るのと同等)
Opera/Firefox: 読み込まれていません
注:
これはブラウザの機能実装に強く依存しており、ブラウザの機能実装が変更されると無効になる可能性があります。
の使用はお勧めできません。 Chrome ブラウザの新しいバージョンでは、スクリプト要素のタイプが「text/javascript」以外に設定され、スクリプト ファイルが読み込まれなくなります。

LABjs でのスクリプト読み込みオプションの判断

技術的な詳細は無視し、擬似コードを使用して LABjs での実装を説明します。これは大まかに次のとおりです。
まず、要求されたスクリプトをプリロードするかどうかを決定します (プリロードの条件については、疑似コードのコメントを参照してください)。 プリロードが実行される場合は、ブラウザが真のプリロードをサポートしているかどうかを判断し、サポートしていない場合は、要求されたスクリプトが現在のページと同じドメインにあるかどうかを判断します。 、 、キャッシュ トリックを使用します
プリロードが実行されない場合は、ブラウザが script 要素の async 属性をサポートしているかどうかを確認します (擬似コードのコメントを参照)。サポートしている場合は、async 属性を設定し、サポートしていない場合は script 要素を介してスクリプト ファイルを直接ロードします。 ;

if(ifPreloadScript){  //当请求的脚本文件是否进行预加载：1、需要预加载 2、浏览器支持预加载
  if(supportRealPreloading){  //如果支持真正的预加载
    if(supportPreloadPropNatively){  //支持通过设置script标签的preload属性，实现script的预加载，以及分离加载和执行
                    //Nicholas C. Zakas大神的美好愿望，尚未有浏览器支持：/blog/2011/02/14/separating-javascript-download-and-execution/
      script.onpreload = callback;
      script.newPreload = true;
      script.src = targetUrl;
    }else{
      script.onreadystatechange = callback;  //其实就是指IE浏览器，假设指定了script元素的src属性，IE浏览器里会立即加载
      script.src = targetUrl;  //即使script元素没有被插入页面，callback为预加载后的回调
    }
  }
  else if(inSameDomain){  //非跨域，采用XHR Injection：请求的脚本与当前页面处于同一个域
    xhr = new XMLHttpRequest();  //由于上个判断已经将IE无情地抛弃在这个条件分支之外，所以大胆地用 new XMLHttpRequest()吧
    xhr.onreadystatechange = callback;
    xhr.open("GET",targetUrl);
    xhr.send();
  }
  else{  //最无奈的后招，Cache Trick，新版chromei已经不支持
    script.onload = callback;
    script.type = 'text/cache';  
    script.src = targetUrl;
  }
}else{
  if(canContrlExecutionOrderByAsync){  //如果能够通过script元素的async属性来强制并行加载的脚本顺序执行
                    //kyle大神着力推进的提案，目前已被html5小组接受并放入草案：/Dynamic_Script_Execution_Order#My_Solution
    script.onload = callback;
    script.async = false;  //将script元素的async设为false，可以保证script的执行顺序与请求顺序保持一致
    script.src = targetUrl;
  }
  else{
    script.onload = callback;
    script.src = targetUrl;  
  }
}

実際、ページ上に img ノードを作成し、その src をスクリプト ファイルに指定すると、一部のブラウザではファイルのプリロードの役割を果たすこともできます。LABjs の作者はこれを考えなかったのでしょうか?