Lab.jsを初めて使うときの注意点_JavaScriptスキル

JS 関数の動的ロード

一般に、js ファイルをロードする必要がある場合は、次のコードのようなスクリプト タグを使用します:

コードをコピー コードは次のとおりです:

ただし、スクリプト タグを直接使用して js ファイルを読み込むには、次のような欠点があります:

1. 厳密な読み取り順序。ブラウザは Web ページに表示される順序で Javascript ファイルを読み取り、すぐに実行するため、複数のファイルが相互に依存している場合は、依存関係が最も少ないファイルが最初に配置され、依存関係が最も小さいファイルが最初に配置されます。最大の依存関係を最初に配置する必要があります。ファイルは最後に配置する必要があります。そうしないと、コードでエラーが報告されます。

2. パフォーマンスの問題。ブラウザは「同期モード」を使用して <script> タグをロードします。これは、ページが「ブロック」され、後続の HTML コードを実行する前に JavaScript ファイルがロードされるのを待機することを意味します。複数の <script> タグがある場合、ブラウザはそれらを同時に読み取ることができず、一方を読み取ってからもう一方を読み取る必要があるため、読み取り時間が大幅に長くなり、ページの応答が遅くなります。 </script>

今回は JS を動的にロードすることを考えます。JS を動的にロードする実装方法は次のコードのようになります。

コードをコピーします コードは次のとおりです:

/*
*@desc: スクリプトを動的に追加します
*@param src: ロードされたjsファイルのアドレス
*@param callback: js ファイルのロード後に呼び出す必要があるコールバック関数
*@デモ:
addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {
alert('Ctripサーバー上のlab.jsがロードされました')
});
*/
function addDynamicJS(src, callback) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.src = src[i];
Script.charset = 'gb2312';
Document.body.appendChild(script);
If (コールバック != 未定義) {
script.onload = function () {
callback();
}
}
}

これによりページ ブロックは発生しませんが、別の問題が発生します。この方法でロードされた Javascript ファイルは元の DOM 構造にないため、DOM-ready (DOMContentLoaded) イベントと window.onload で指定されたコールバック関数がイベントには影響しません。

現時点では、JS 読み込みの問題を効果的に管理するために、いくつかの外部関数ライブラリを使用することを検討します。

本題に入り、LAB.js について話しましょう

LAB.js

従来の方法を使用して js を読み込む場合、記述されるコードは通常、以下のコードのようになります。

コードをコピー コードは次のとおりです:

initAaa();
initBbb();



initCcc();

LAB.js を使用する場合、上記のコード関数を実装するには、次のメソッドを使用します

コードをコピー コードは次のとおりです:

$LAB
.script("aaa.js").wait()//パラメータのない .wait() メソッドは、読み込んだばかりの Javascript ファイルをすぐに実行することを意味します
.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();
});

複数の $LAB チェーンを同時に実行できますが、それらは完全に独立しており、順序関係はありません。 1 つの JavaScript ファイルが別の JavaScript ファイルに続いて実行されるようにしたい場合は、それらのファイルを同じチェーン操作内でのみ記述することができます。特定のスクリプトが完全に関連していない場合にのみ、スクリプトを異なる $LAB チェーンに分割して、それらの間に相関関係がないことを示すことを検討してください。

一般的な使用例

コードをコピー コードは次のとおりです:

$LAB
.script("script1.js") // script1、script2、script3 は相互に依存しておらず、任意の順序で実行できます
.script("script2.js")
.script("script3.js")
.wait(関数(){
alert("スクリプト 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) {
return "ie.js" // IE の場合のみ、このスクリプトがロードされます
}
他 {
return null; // IE ではない場合、このスクリプト呼び出しは事実上無視されます
}
})

コンソールで LAB.js の読み込み情報を表示します

コンソールで各 js の読み込み情報をデバッグしたり確認したりする場合は、$LAB.setGlobalDefaults メソッドを使用できます。具体的な使用方法については、コード例を参照してください。

コードをコピー コードは次のとおりです:

$LAB.setGlobalDefaults({ Debug: true }) //デバッグをオンにする

$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)
})

この時点でコンソールを開いて、以下に示すような情報を確認します。

これを見たらLab.jsのデバッグ機能に驚かれると思います。実際、Lab.js は確かに非常に強力ですが、私はその表面的な機能の一部しか理解していません。まず書き留めて、将来の利便性のために共有してください。