jQueryのグローバル設定

jQuery は、最新の Web 開発で最も人気のある JavaScript ライブラリの 1 つであり、HTML ドキュメントの操作、イベントの処理、アニメーションの作成、Ajax インタラクションやその他多くの一般的なタスクを実行するための信頼性が高く使いやすい方法を開発者に提供します。 。ただし、大規模な Web サイトやアプリケーションを開発する場合は、複数のページで jQuery を使用する必要があり、異なる構成で実行する必要がある場合があります。この目的のために、jQuery は開発者が複数のページにわたって構成を共有できるように、いくつかのグローバル設定オプションを提供します。ここでは、一般的な jQuery グローバル設定オプションをいくつか示します。

1. $.ajaxSetup()

$.ajaxSetup() メソッドを使用すると、jQuery のグローバル AJAX オプションを設定できます。これらのオプションは、別のページまたは別のセクションに作成したすべての $.ajax()、$.get()、$.post() などの AJAX リクエストに適用されます。これは、すべてのリクエストに影響するグローバル設定オプションです。

$.ajaxSetup() メソッドは次の方法で使用できます。

$.ajaxSetup({
  url: "/api/user",
  type: "POST",
  dataType: "json"
});

上の例では、AJAX リクエストのデフォルトの URL、HTTP メソッド、および応答データ型を設定します。これらの設定は、サイト全体で呼び出されるすべての AJAX リクエストに適用されます。

2. $.ajaxPrefilter()

$.ajaxPrefilter() メソッドを使用すると、AJAX リクエストが送信される前にリクエスト データを前処理できます。これは $.ajaxSetup() に似ていますが、呼び出されたときの AJAX リクエストにのみ影響します。 $.ajaxPrefilter() を使用すると、リクエストのパラメーターと応答データを変更したり、リクエストが送信される前に検証ロジックを実行したりできます。

$.ajaxPrefilter() の使用例を次に示します。

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
  options.url = "/api" + options.url;
});

上の例では、すべての AJAX リクエストの URL の前にプレフィックス「/api」を追加しました。これにより、AJAX リクエストでこのプレフィックスを繰り返し入力することがなくなります。

3. $.ajaxTransport()

$.ajaxTransport() メソッドを使用すると、新しい AJAX トランスポートを登録できます。デフォルトでは、jQuery は XMLHttpRequest とスクリプト タグのトランスポートをサポートしていますが、$.ajaxTransport() を介してカスタム トランスポートを登録できます。

以下は $.ajaxTransport() の使用例です:

$.ajaxTransport("+image", function(options, originalOptions, jqXHR) {
  var img,
      deferred = $.Deferred(),
      dataType = options.dataType || "";

  if (dataType.toLowerCase() === "image") {
    img = new Image();

    img.onload = function() {
      deferred.resolve(this);
    };

    img.onerror = function() {
      deferred.reject();
    };

    img.src = options.url;

    return deferred.promise();
  }
});

上の例では、新しいデータ型「image」を登録し、Image オブジェクトを渡す方法を定義しました。移行。これにより、AJAX リクエストでの画像の読み込みと表示にかかる時間と帯域幅が節約されます。

4. $.holdReady()

$.holdReady() メソッドを使用すると、jQuery の Ready イベントを一時停止または再開できます。 Ready イベントは $(document).ready() イベントで、DOM が完全にロードされ、解析されたときにトリガーされます。 $.holdReady() を使用すると、ready イベントの発生を遅らせたり防止したりして、他のコードが実行される前に特定の条件を待つことができます。

以下は $.holdReady() の使用例です:

$.holdReady(true);

$.get("/settings", function(data) {
  // Some data processing here
  $.holdReady(false);
});

上の例では、設定情報を取得する前に jQuery の Ready イベントを一時停止しています。 $.get() が完了し、データが処理された後、$.holdReady() を解放し、ready イベントが再び発生できるようにします。

概要

jQuery は、Web 開発者が信頼性が高く一貫した方法で多くの一般的な Web タスクを処理するのに役立つ、いくつかの便利なグローバル設定オプションを提供します。 $.ajaxSetup()、$.ajaxPrefilter()、$.ajaxTransport()、$.holdReady() などのメソッドを通じて、開発者は複数のページ間で設定を共有し、AJAX リクエストを前処理し、カスタム AJAX トランスポートを登録して jQuery の準備完了を制御できます。イベント。これらのオプションにより、生産性が向上し、Web サイトのパフォーマンスが向上し、複雑な Web アプリケーションの実装がより効率的になります。

以上がjQueryのグローバル設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。