jQueryでjsスクリプトファイルを動的に読み込む実装方法

今回はjQueryでjsスクリプトファイルを動的にロードする実装方法をお届けします。jQueryでjsスクリプトファイルを動的にロードする際の注意点を実際に見てみましょう。

動的読み込みJavaScriptは、非常に強力で便利なテクノロジーです。このトピックはインターネット上でよく議論されており、私はいくつかの個人プロジェクトで js をロードするために RequireJS と Dojo をよく使用します

これらは非常に強力ですが、場合によっては利点が利点を上回ることがあります。 jQuery を使用している場合、単一の js ファイルをロードするためのメソッドが組み込まれています。一部の JS プラグインまたは他の種類のファイルの読み込みを遅らせる必要がある場合は、この方法を使用できます。使い方はこちら！

1. jQuery getScript() メソッドは JavaScript をロードします

jQuery には、単一の js ファイルをロードする組み込みメソッドがあり、ロードが完了すると、コールバック関数で後続の操作を実行できます。 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 を使用する最も一般的な場所は、js プラグインを遅延ロードすることです。ロードが完了したら、それを実行します:

jQuery.getScript("jquery.cookie.js")
 .done(function() {
  jQuery.cookie("cookie_name", "value", { expires: 7 });
});

2. キャッシュの問題

jQuery.getScript を使用する場合、 タイムスタンプ 文字列 の後に必要な js アドレスを使用する必要があります。後でロードされるため、キャッシュされなくなります。ただし、このスクリプトをキャッシュしたい場合は、次のようにグローバル キャッシュ変数を設定する必要があります:

jQuery.ajaxSetup({
  cache: true
});

jQuery.ajax({
      url: "jquery.cookie.js",
      dataType: "script",
      cache: true
}).done(function() {
  jQuery.cookie("cookie_name", "value", { expires: 7 });
});

スクリプトをロードするときは、キャッシュの問題に必ず注意してください。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Jquery+LigerUI ファイルアップロード手順の詳細な説明

jquery js ファイルの動的読み込みの詳細な説明

以上がjQueryでjsスクリプトファイルを動的に読み込む実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。