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は確かに非常に強力であり、そのシンプルな機能のいくつかを理解しています。最初に書き留めて共有してください。また、将来の自分の便利さのためです。