JAvascriptクライアントソリューションキャッシュプロバイダ
4761 ワード
開発者一人一人がキャッシュの重要性を知っていると信じています.最初から最後までキャッシュされたバックグラウンド(memcached,xcacheなど)があります.dbの圧力を軽減しますコンテンツ配信ネットワーク(CDN)キャッシュでは、ブラウザが一度以上ロードリソースをキャッシュすることを望んでいます.もちろん、クライアントキャッシュがあるので、アルゴリズムや大量の演算でも高価な操作を繰り返さないでください.
これは、HTML 5のローカルメモリをサポートするオプションのjavascriptのクライアントソリューションを紹介しています.
Starting Simple
ここでtry catchを使用する主な理由は、firefoxがこのプロパティをサポートしているにもかかわらず、about:configで設定して開く必要があるためです.そうしないと、エラーが発生します.だから簡単なif elseは需要を満たすことができません.
次に、オブジェクトのローカルストレージメカニズムのサポートを追加します.この技術はChristopher Blizzardの良い文章を参考にしていますSaving data with local storage,C for which those who didn't know,you can only store string's into local storage.Thus we have this…
in/out JSON parsing
get,set,clearの3つのコアメソッドに着きました
Core class functionality
どのように運用しますか?
この記事の最初に、Cache Providerはオプションで支配されるローカルストレージであると述べています.まず、ローカルストレージがない例を見てみましょう.
getElementsByClassName
メモ:次にクラス関数を呼び出すと、あらかじめコンパイルされた正規表現の代わりに、式を作成するのに十分な正規表現が使用されます.
もう1つの例を挙げます.例えば、大きなアプリケーションにi 18 nが必要な場合は、コンパイルされたhtml文字列をローカルストレージにキャッシュすることができます.
それ以外に、多くの外部リソースをローカルにキャッシュすることができます.頑張ってください.
これは、HTML 5のローカルメモリをサポートするオプションのjavascriptのクライアントソリューションを紹介しています.
Starting Simple
function CacheProvider() {
// values will be stored here
this._cache = {};
}Feature detect on local storage
try {
CacheProvider.hasLocalStorage = ('localStorage' in window) && window['localStorage'] !== null;
} catch (ex) {
CacheProvider.hasLocalStorage = false;
}
ここでtry catchを使用する主な理由は、firefoxがこのプロパティをサポートしているにもかかわらず、about:configで設定して開く必要があるためです.そうしないと、エラーが発生します.だから簡単なif elseは需要を満たすことができません.
次に、オブジェクトのローカルストレージメカニズムのサポートを追加します.この技術はChristopher Blizzardの良い文章を参考にしていますSaving data with local storage,C for which those who didn't know,you can only store string's into local storage.Thus we have this…
in/out JSON parsing
if (CacheProvider.hasLocalStorage) {
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
};
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
};
}
get,set,clearの3つのコアメソッドに着きました
Core class functionality
CacheProvider.prototype = {
/**
* {String} k - the key
* {Boolean} local - get this from local storage?
* {Boolean} o - is the value you put in local storage an object?
*/
get: function(k, local, o) {
if (local && CacheProvider.hasLocalStorage) {
var action = o ? 'getObject' : 'getItem';
return localStorage[action](k) || undefined;
} else {
return this._cache[k] || undefined;
}
},
/**
* {String} k - the key
* {Object} v - any kind of value you want to store
* however only objects and strings are allowed in local storage
* {Boolean} local - put this in local storage
*/
set: function(k, v, local) {
if (local && CacheProvider.hasLocalStorage) {
if (typeof v !== 'string')) {
// make assumption if it's not a string, then we're storing an object
localStorage.setObject(k, v);
} else {
try {
localStorage.setItem(k, v);
} catch (ex) {
if (ex.name == 'QUOTA_EXCEEDED_ERR') {
// developer needs to figure out what to start invalidating
throw new Exception(v);
return;
}
}
}
} else {
// put in our local object
this._cache[k] = v;
}
// return our newly cached item
return v;
},
/**
* {String} k - the key
* {Boolean} local - put this in local storage
* {Boolean} o - is this an object you want to put in local storage?
*/
clear: function(k, local, o) {
if (local && CacheProvider.hasLocalStorage) {
localStorage.removeItem(k);
}
// delete in both caches - doesn't hurt.
delete this._cache[k];
}
};
どのように運用しますか?
この記事の最初に、Cache Providerはオプションで支配されるローカルストレージであると述べています.まず、ローカルストレージがない例を見てみましょう.
getElementsByClassName
var cache = new CacheProvider;
window.getElementsByClassName = getElementsByClassName || function(c) {
var reg = cache.get(c) || cache.set(c, new RegExp("(?:^|s+)" + c + "(?:s+|$)"));
var elements = document.getElementsByTagName('*');
var results = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].className.match(reg)) {
results.push(elements[i]);
}
}
return results;
};
メモ:次にクラス関数を呼び出すと、あらかじめコンパイルされた正規表現の代わりに、式を作成するのに十分な正規表現が使用されます.
もう1つの例を挙げます.例えば、大きなアプリケーションにi 18 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'));
});
}
それ以外に、多くの外部リソースをローカルにキャッシュすることができます.頑張ってください.