JS関数を動的にロードします
一般的に、JSファイルをロードする必要がある場合、次のコードと同様に、スクリプトタグを使用して実装します。
コードコピーは次のとおりです。
<script type = "text/javascript" src = "embler.js"> </script>
ただし、スクリプトタグを使用してJSファイルを直接ロードするには、次の欠点があります。
1。厳密な読み取り順序。ブラウザは、<script>がWebページに表示される順序でJavaScriptファイルを読み取り、その後すぐに実行するため、複数のファイルが互いに依存する場合、最小依存関係のファイルを正面に配置する必要があり、最も依存関係のあるファイルを最後に配置する必要があります。
2。パフォーマンスの問題。ブラウザは「同期モード」を使用して<script>タグを読み込みます。つまり、ページは「ブロック」され、JavaScriptファイルがロードされるのを待ってから、後続のHTMLコードを実行します。複数の<script>タグが存在する場合、ブラウザは同時に読み取ることができません。一方を読み取る前に読む必要があります。その結果、読み取り時間が大きく延長され、ページの応答が遅くなります。
この時点で、JSの動的にロードすることを考えます。 JSに動的にロードする実装方法は、次のコードに似ています
コードコピーは次のとおりです。
/*
*@DESC：[スクリプトも動的に追加します
*@param SRC：ロードされたJSファイルのアドレス
*@paramコールバック：JSファイルがロードされた後に呼び出される必要があるコールバック関数
*@デモ：
addDynamicStyle（ 'http://webresource.c-ctrip.com/code/cquery/labjs/lab.js'、function（）{
アラート（ 'ctripサーバーの読み込みに関するlab.jsは完了しました'）
}）;
*/
関数adddynamicjs（src、callback）{
var script = document.createelement（ "script"）;
script.setattribute（ "type"、 "text/javascript"）;
script.src = src [i];
script.charset = 'gb2312';
document.body.AppendChild（スクリプト）;
if（callback！= undefined）{
script.onload = function（）{
折り返し電話（）;
}
}
}
これはページの詰まりを引き起こすことはありませんが、別の問題を引き起こします。この方法でロードされたJavaScriptファイルは元のDOM構造にないため、DOM対応（domContentLoaded）イベントで指定されたコールバック関数とwindow.onloadイベントは無効です。
現時点では、一部の外部関数ライブラリを使用してJSロードの問題を効果的に管理することを考えます。
メイントピックに行き、lab.jsについて話しましょう
lab.js
従来の方法を使用してJSをロードすると、通常、次のコードにスタイルが表示されます。
コードコピーは次のとおりです。
<スクリプトsrc = "aaa.js"> </script>
<スクリプトsrc = "bbb-a.js"> </script>
<スクリプトsrc = "bbb-b.js"> </script>
<script type = "text/javascript">
initaaa（）;
initbbb（）;
</script>
<スクリプトsrc = "ccc.js"> </script>
<script type = "text/javascript">
initccc（）;
</script>
lab.jsを使用して上記のコード関数を実装する場合、次の方法を使用します
コードコピーは次のとおりです。
<！ - lab.jsライブラリを最初にロードします
<スクリプトsrc = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js"> </script>
<script type = "text/javascript">
$ lab
.script（ "aaa.js"）
.script（ "bbb-a.js"）
.script（ "bbb-b.js"）// aaa.js bbb-a.js bbb-b.jsをロードし、initaaa initbbbを実行します
.wait（function（）{//パラメーターを備えた.wait（）メソッドもすぐにJavaScriptファイルを実行しますが、パラメーターで指定された関数も実行されます。
initaaa（）;
initbbb（）;
}）
.script（ "ccc.js"）// ccc.jsをロードし、ccc.jsを読み込んだ後にinitcccメソッドを実行します
.wait（function（）{
initccc（）;
}）;
</script>
複数の$ $ラボチェーンは同時に実行できますが、それらは完全に独立しており、秩序の関係はありません。 JavaScriptファイルが別のファイルの後に実行されることを確認する場合は、同じチェーン操作でのみ書き込むことができます。特定のスクリプトが完全に無関係である場合にのみ、それらを異なる$ラボチェーンに分割することを検討する必要があり、それらの間に相関がないことを示します。
一般的な使用例
コードコピーは次のとおりです。
$ lab
.script（ "script1.js"）// script1、script2、およびscript3は互いに依存せず、任意の順序で実行できます
.script（ "script2.js"）
.script（ "script3.js"）
.wait（function（）{
アラート（ "スクリプト1-3がロードされます！"）;
}）
.script（ "script4.js"）// script1.js、script2.js、script3.jsが実行前に実行されるのを待つ必要があります
.wait（function（）{script4func（）;}）;
コードコピーは次のとおりです。
$ lab
.script（ "script.js"）
.script（{src： "script1.js"、type： "text/javascript"}）
.script（["script1.js"、 "script2.js"、 "script3.js"]））
.script（function（）{
//ホストページで定義されている「_is_ie`はIEでtrue、他のブラウザでfalseとして定義されています
if（_is_ie）{
"ie.js"を返します。 // IEでのみ、このスクリプトがロードされます
}
それ以外 {
nullを返します。 // IEにない場合、このスクリプト呼び出しは効果的に無視されます
}
}）
コンソールでLab.jsの読み込み情報を表示します
コンソールで各JSロード情報をデバッグまたは表示する場合は、$ lab.setglobaldefaultsメソッドを使用できます。詳細については、コードの例を参照してください。
コードコピーは次のとおりです。
<！ - 最初にctripのラボライブラリラボをロードしてオンラインでダウンロードします - >
<script type = "text/javascript" src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js" charset = "gb2312"> </script>
<script type = "text/javascript">
$ lab.setglobaldefaults（{debug：true}）// open debugging
$ lab
//最初の実行チェーン
.script（ 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js'）
.script（ 'http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'）
// 2番目の実行チェーン
.wait（function（）{
//console.log(window.$）
//console.log(window._）
}）
// 3番目の実行チェーン
.script（ 'http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js'）
.script（ 'http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js'）
// 4番目の実行チェーン
.wait（function（）{
// console.log（plugin1function）
// console.log（plugin2function）
}）
// 5番目の実行チェーン
.script（ 'js/aaa.js'）
.script（ 'js/bbb.js'）
// 6番目の実行チェーン
.wait（function（）{
// console.log（module1function）
// console.log（module2function）
}）
</script>
この時点で、次の図に示すように、コンソールを開いて情報を見てください。
あなたがこれを見たとき、あなたはlab.jsのデバッグ機能に驚かされると思います。実際、Lab.jsは確かに非常に強力であり、そのシンプルな機能のいくつかを理解しています。最初に書き留めて共有してください。また、将来の自分の便利さのためです。