JavaScript クライアント ソリューションのキャッシュ Provider_JavaScript のヒント

すべての開発者はキャッシュの重要性を理解していると思います。 DB への負荷を軽減するために、最初から最後までキャッシュ バックグラウンド (memcached、xcache など) があります。コンテンツ配信ネットワーク (CDN) キャッシュでは、ブラウザーが複数回読み込まれるリソースをキャッシュする必要があります。もちろん、クライアント側のキャッシュがあるため、高価な操作 (アルゴリズムや大規模な計算であっても) を繰り返す必要はありません。

これは優れた JavaScript クライアント ソリューションです。HTML5 ローカル ストレージのオプションのサポート

簡単な開始

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

function CacheProvider() {
// 値はここに保存されます
this._cache = {};
}ローカル ストレージ上の機能検出
try {
CacheProvider.hasLocalStorage = ('localStorage' in window) && window['localStorage'] !== null; ) {
CacheProvider.hasLocalStorage = false;
}


ここで try catch を使用する主な理由は、Firefox がこの属性をサポートしているにもかかわらず、about:config に設定する必要があるためです。オンにしないと、エラーが報告されます。したがって、単純な if else ではニーズを満たすことができません。

以下では、オブジェクトのローカル ストレージ メカニズムのサポートを追加します。この手法は、Christopher Blizzard による優れた記事
ローカル ストレージへのデータの保存
に基づいています。ご存知ない方のために、文字列をローカル ストレージに保存することしかできません。このようにしてこれを実現しました。in / out JSON 解析

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

if ( CacheProvider .hasLocalStorage) {

Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value))

ストレージ.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}


コアメソッドは get、set、clear です。

コアクラスの機能

コードをコピーします

コードは次のとおりです。 : CacheProvider.prototype = {

/**

* {String} k - キー
* {Boolean} local - ローカル ストレージから取得しますか?
* {Boolean} o - ローカルストレージに置いた値はオブジェクトですか?
*/
get: function(k, local, o) {
if (local && CacheProvider.hasLocalStorage) {
var action = o ? 'getObject' : 'getItem';
return localStorage[action](k) || return this._cache[ k] || 未定義;
}
},

/**
* {String} k - キー
* {Object} v - 保存する任意の種類の値
* ただし、ローカル ストレージではオブジェクトと文字列のみが許可されます
* {Boolean} local - これをローカルストレージに置きます
*/
set: function(k, v, local) {
if (local && CacheProvider.hasLocalStorage) {
if (typeof v !== 'string')) {
// 文字列でない場合はオブジェクトを保存していると仮定します
localStorage.setObject(k, v);
} else {
try {
localStorage.setItem(k, v);
} catch (ex) {
if (ex.name == 'QUOTA_EXCEEDED_ERR') {
// 開発者は無効化を開始するものを理解する必要があります
throw new Exception(v);
}
}
} else {
// ローカル オブジェクトを入力します
this._cache[k] = v;
}
// 新しくキャッシュされたアイテムを返します
return
},

/**
* {String} k - キー
* {Boolean} local - これをローカル ストレージに置きます
* {Boolean} o - これはローカル ストレージに置きたいオブジェクトですか?
*/
clear: function(k, local, o) {
if (local && CacheProvider.hasLocalStorage) {
localStorage.removeItem(k); >// 両方のキャッシュを削除します。
delete this._cache[k]

};


の使用方法
この記事の冒頭で、キャッシュ プロバイダーはオプションのローカル ストレージであると述べたことに注意してください。まず、ローカル ストレージを使用しない例を見てみましょう。

getElementsByClassName




コードをコピー

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

var キャッシュ = 新しい CacheProvider;

window.getElementsByClassName = getElementsByClassName || c, new RegExp("(?:^|s )" c "(?:s |$)"));
var elements = document.getElementsByTagName('*');
var results = [] ;
for (var i = 0; i if (elements[i].className.match(reg)) {
results.push(elements[i] );
}
}
return results;


注: 次回クラス関数を呼び出すと、事前にコンパイルされた通常の関数に置き換えられます。式 式を構築するのに十分です。

別の例: たとえば、i18​​n を必要とする大規模なアプリケーションの場合、コンパイルされた HTML 文字列をローカル ストレージにキャッシュできます。

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

var i18nCache = new CacheProvider;

if (i18nCache.get('topnav')) {
$('#nav').html(i18nCache.get('topnav'));
} else {
ajax(' top-nav .tmpl', function(html) {
i18nCache.set('topnav', html);
$('#nav').html(i18nCache.get('topnav')); 🎜>} );
}


さらに、外部リソースをローカルにキャッシュするなど、さまざまなことができます:)