クライアント側であまりにも多くのajax呼び出しとキャッシュjsonデータを避ける方法

Question

私はカレンダーアプリケーションを持っており、ajaxとjsonの結果を使ってすべてのイベントデータを読み込みます。問題は、私は別のビューを持っていると私はビューを変更するときに今私はサーバーを呼び出す必要があります。

クライアント側でこのデータをキャッシュし、さらに多くのajax呼び出しを呼び出す前にこれらのイベントをロードしているかどうかを確認する方法はありますか。

このためのベストプラクティスは何ですか？

Answer 1

MVCと呼ばれています。

アプリケーション用のデータモデルを作成し、何らかの種類のRecordオブジェクトを作成し、その状態を確認する必要があります。したがって、アプリケーションにはある種のCalendarEventモデルがあり、サーバーからデータをロードするとインスタンスがインスタンス化されます。

ビューを変更する場合は、最初にそのビューのモデルオブジェクトがあるかどうかを確認し、変更した場合は、変更をチェックしない限り、サーバーからモデルオブジェクトをロードする必要はありません。 。

あなたの計画はそれほど複雑である必要はありません。あなたはIdでイベントをロードする場合は、レコードをロードするとき、あなたはレコードを見て、そのかなり速い

window.App.Models[id] = InstanceOfYourRecord

及びその方法を置くことができ

window.App = {}; 
window.App.Models = {}; 

ような何かを行うことができます。または、堅牢なデータレイヤーを持つフレームワーク（Sproutcoreなど）を使用するだけです。

Answer 2

最近のプロジェクトでも同様の問題がありました。

概念的には、私はサーバーに保持された「実際の」データモデル（DM）をデータベースに保持しています。

クライアントは正常に動作するために、独自のローカルデータモデルを保持します。クライアントDMの外では、すべてのクライアントコードが結果をローカルに引き出すと考えています。それはクライアントのDMから（GET）のデータを読み込む

時：

• チェックを既存の結果
• のキャッシュは、キャッシュされたデータが利用できない場合、適切なAJAXは結果をキャッシュし、その後、照会呼び出します。

クライアントDMそれを介してデータ（POST）を変更：

• が適切
• としてキャッシュを無効に適切なAJAXは
• カスタムjQueryのイベントを示すクライアントDMが

を変更発する照会呼び出し

このクライアントDMも、

• は、AJAXエラー処理を集中管理します。
• AJAXコールはまだ飛んでいます。（保存されていない変更があるページを残すときにユーザーに警告することができます）。
• は、すべての呼び出しがローカルデータを受け取り、完全に同期しているユニットテストのための、ドロップインのダミー置換を可能にします。

実装ノート：

• 私がするDataModelと呼ばれるJavaScriptクラスとしてこれをコード化されました。デザインがより複雑になるにつれ、オブジェクトを分離する責任をさらに細分化することが理にかなっています。
• jQueryのカスタムイベントを使用すると、オブザーバパターンを簡単に実装できます。クライアントコンポーネントは、データが変更されたことを示すたびに、クライアントDMから更新されます。
• リモートAPIのJSONを使用すると、コードを簡素化できます。私のクライアントDMは、JSON結果をキャッシュに直接保存します。
• クライアントのdm関数の引数にはコールバックが含まれているので、必要なときにAJAX経由ですべてを自然に渡すことができます：function listAll（contactId、cb）{...}
• プロジェクトではシングルユーザーログインのみが可能です。外部の当事者がサーバーのデータモデルを変更できる場合、クライアントキャッシュが依然として有効であることを保証するために、ある種のデータ変更プローブが定期的に起動されるべきです。
• 私のアプリケーションでは、複数のクライアントコンポーネントが、クライアントDM変更イベントを受信したときに同じデータを要求します。これにより、同じ情報を持つ複数のAJAX呼び出しが発生しました。私はこの問題を、同じ結果を待っているクライアントコンポーネントコールバックのキューを管理するgetJsonOnce（）ヘルパーで解決しました。私の実装で

例機能：

listAll: 
function(contactId, cb) { 

    // pull from cache 
    if (contactId in this.notesCache) { 
    cb(this.notesCache[contactId]); 
    return; 
    } 

    // init queue if needed 
    this.listAllQueue[contactId] = this.listAllQueue[contactId] || []; 

    // pull from server 
    var self = this; 
    dataModelHelpers.getJsonOnce(
    '/teafile/api/notes.php', 
    {'req': 'listAll', 'contact': contactId}, 
    function(resp) { self.notesCache[contactId] = resp; }, 
    this.listAllQueue[contactId], 
    cb 
); 
} 

getJsonOnce（）ヘルパーは、我々は、単一のAJAX要求を送信することを、もし複数のクライアントコンポーネントがまったく同じ（キャッシュされていない）データを要求することを確認しますと、それが入って来たらみんなに知らせる

をnotesCacheだけの簡単なjavascriptオブジェクトです。

this.notesCache = {}; 

Answer 3

hvgotcodesのように、MVCフレームワークが役に立ちます。たとえば、backbone.js（http://documentcloud.github.com/backbone/）を試してください。

また、jStorage（http://www.jstorage.info/）の使用を検討することもできます。 AJAX呼び出しを行う必要があるたびに、まずストレージオブジェクト内にあるかどうかを確認し、そうでない場合はAJAX呼び出しを実行します。もう一方では、AJAX呼び出しを終了するたびに、結果をストレージオブジェクトに格納します。データストア内で参照するときに参照するある種のインデックス（CalendarEvent id）があることを確認してください。あなたのストレージ内のデータに何らかの種類の「期限切れの時間」を追加することもできます.AJAX呼び出し後のタイムスタンプ、期限が切れていればフロントを再度リクエストしてください。