🤾🏻 👟 👩🏾‍🏭 複雑なAJAXサイトを作成するための6つのヒント 🛤️ 🥙 🏂🏽

AJAXを使用することの多くの利点を知っています。ユーザーは新しいページの読み込みを待つ必要がなく、アクションはバックグラウンドで実行されるため、より動的なユーザーエクスペリエンスを提供できます。アイデアは単純に思えますが、複雑なAJAX Webアプリケーションを作成することは非常に困難です。 AJAXに基づいてブログを作成しました。いくつかのヒントがあります。私の経験を皆さんと共有したいと思います。将来、いくつかの問題を解決する手助けができることを願っています！

イベントの委任を使用する

AJAXサイトの主な特徴は、イベント委任の使用です。 AJAXを介して挿入された可能性があるため、ページに要素が存在すると想定しないでください。イベントリスナー（要素）を要素（document.bodyを除く）に直接割り当てようとしないでください。代わりに、最善の解決策はイベントの委任を使用することです。 jQueryで委任を使用する方法の非常に簡単な例を次に示します。

// Add event listener to the body because it is a constant jQuery("body").on("click", "a", function(event) { event.preventDefault(); // Trigger the XHR to load the page content // ... // Update the History with pushState // ... // Other tasks // ... });

サイトの作成中に、 <body>以外の要素が存在しないかのようにコードを記述しました。その結果、Aginal AJAXナビゲーションを実装するのに30分もかかりませんでした。イベントの委任により、AJAXページの読み込みが可能になります。

シグナルイベントにPub / Subを使用する

から。 -シグナルイベント。たとえば、リンクのクリック。

パブリッシュとサブスクライブを実装すると 、アプリケーションのパワーが大幅に向上します。 pub / subに慣れていない場合は、ラジオがどのように機能するかを想像してください。ラジオはブロードキャスト（ パブリッシュ ）し、誰がそれを聞いているかわかりません。リスナーは、ステーション自体とは関係なくリッスン（ サブスクライブ ）できます。

pub / subを使用する理由と方法を説明するために、私のサイトの例を示します。いずれの記事でも、最初に人気のソーシャルネットワークのウィジェットをダウンロードし、2番目に評価ウィジェットを表示して、ユーザーが記事の有用性を評価できるようにします。より静的なサイトでは、コードを実行してDomContentLoadedでこれらのウィジェットを作成するだけです。複雑なAJAXサイトでは、これらの機能を数回実行する必要がある場合があるため、これらのウィジェットを再作成するためにページを変更する信号が必要です。

 // In the method where we do the AJAX request for new page content.... jQuery.ajax({ url: event.target.href }).done(function(data) { // Place the content in the page // ... // Send a pub/sub signal that the page is ready so that widgets can be created publish("/page/loaded", data); // Arguments are the channel name and data }); // ... Elsewhere, where the we set up the social widgets.... subscribe("/page/loaded", function(data) { // Set up the widgets! createSocialWidgets(data); // Fade in the widgets // ... }); // ... Elsewhere, where the we set up the rating widgets.... subscribe("/page/loaded", function(data) { // Set up the widgets! createStarRatingWidget(data); // Fade in the widget // ... });

pub / subの良い点は、JavaScriptモジュールがAJAXを備えたパーツとは別個であり、大規模なコールバックを処理する必要がないことです。 publish 1回の呼び出しで、すべてのモジュールがこのイベントにsubscribeして応答できるようにします。

単一のpushStateマネージャーを使用する

複雑なAJAXサイトは、新しいコンテンツをアップロードするだけでなく、HTML5 History APIを使用してURLを変更します。
pjax履歴用の人気のあるjQueryプラグイン。

ユーザーが現在のページのURLを更新、ブックマーク、または友人と共有できるように、閲覧履歴をAJAXページのダウンロードと同期させることが重要です。また、ブラウザの前後のボタンが正しく機能することを保証します！

恒久的な場所に通知を投稿する

ユーザーにとって考えられる問題の1つは、ブラウザーの行にダウンロードステータスが表示されないことです。ページの特定の場所に通知（スピナー）を配置することで、ダウンロードステータスを停止できます。処理がいつ行われるかをユーザーが常に知っていることが重要です。これは、コンテンツを動的にロードおよびレンダリングする場合に特に重要です。

URLによるクエリ結果のキャッシュ

ウェブでは、必要以上のリクエストは必要ありません。これは、ページを完全にリクエストする場合に特に当てはまります。 AJAXサイトのキャッシュシステムの作成は（通常）思っているよりもはるかに簡単です。

 var cache = {}; // ... // ... within the AJAX callback cache[url] = data; // ... // ... within the click callback that would set forth a request if(cache[url]) { // Explicitly call the callback, passing it the cached page data return successCallback(cache[url]); } else { // ... do all of the AJAX request and callback stuff }

このキャッシュは、ユーザーがリンクを数回クリックした場合は使用されませんが、ユーザーがボタンを前後にクリックした場合は使用されます。サーバーとユーザーは、クライアント側のキャッシュに感謝します！

AJAX を使用しない場合

すべてのページをAJAX経由で読み込む必要はありません。AJAXの使用に問題がある場合、開発者が判断できることが非常に重要です。多くの場合、フォームの結果をキャッシュしたり、動的にフェッチしたりする必要はありません。インフラストラクチャがAJAXワークロードの影響を受けるシナリオが存在する場合があります。 AJAXを使用してロードしないURLを定義できる場合、jQueryセレクターを変更できます。

 jQuery("body").on("click", "a:not(href$='/some/page')", function(event) { });

URLをホストするためのコールバックにロジックを追加できます。クリックしたときにURLが一致する場合、 preventDefault()を呼び出してページを通常どおりにロードすることはできません。

柔軟なコードを事前に計画する場合、AJAX Webサイトの作成は想像以上に簡単です。この投稿のヒントを思い出してください。80％は既に完了しています。もちろん、一部の機能はサイト固有のものですが、アプリケーション全体に関しては重要ではありません。ハッピーAJAXing！