jQuery を使用して JavaScript スクリプトを非同期的にロードする solutions_jquery

JavaScript ローダーは、Web 開発において非常に強力で便利なツールです。 curljs、LABjs、RequireJS などのいくつかの人気のあるローダーが広く使用されています。これらは強力ですが、状況によってはより簡単な解決策が存在する場合もあります。

jQuery を使用している場合は、スクリプトをロードするための組み込みメソッドがあります。プラグインやその他のタイプのスクリプトを遅延ロードする場合は、このメソッドを使用できます。使用方法は次のとおりです。

実装メソッド

jQuery にはスクリプトをロードするための getScript メソッドが組み込まれており、返された結果を処理する方法がいくつかあります。 jQuery.getScript の最も基本的な使用法は次のようになります。

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

jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {

/*
スクリプトがロードされて実行された後、次のことができます。何らかの処理を行います
*/

});

getScript メソッドは jqXHR オブジェクトを返すため、次のように使用できます:

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

jQuery.getScript("/path/to/myscript.js")
.done(function() {
/* 実行成功後の処理*/
})
.fail(function() {
/* 実行失敗後の処理*/
}) ;

jQuery.getScript を使用する最も一般的なシナリオは、プラグインを遅延ロードし、ロード後にそれを呼び出すことです:

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

jQuery.getScript("jquery.cookie.js")
.done(function() {
jQuery.cookie(" cookie_name", "value", { 有効期限 : 7 });
});

複数のスクリプトやさまざまな種類のファイル (テキスト ファイル、画像、CSS ファイルなど）を含む場合は、より強力な JavaScript ローダーに切り替えることをお勧めします。 getScript は、単にページをロードするたびにプラグインをロードするのではなく、単にプラグインを遅延ロードしたい場合に最適です。

キャッシュの問題

jQuery.getScript を使用する場合、スクリプトが実行されないように、スクリプト URL の末尾にタイムスタンプが自動的に追加されることに注意してください。キャッシュされた。したがって、すべてのリクエストに対してキャッシュ スクリプトを設定する必要があります:

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

jQuery.ajaxSetup({
cache: true
});

AJAX リクエストですべてのキャッシュを上書きしたくない場合は、次のようにすることをお勧めします。 jQuery.ajax メソッドを使用し、dataType Set をスクリプトに設定します。例:

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

jQuery.ajax({
url: "jquery.cookie.js",
dataType: "script",
キャッシュ: true
}).done(function() {
jQuery.cookie("cookie_name" , "value", { 有効期限: 7 })
});

スクリプトをロードするときは、キャッシュの問題に特に注意する必要があります！