javascript 클라이언트 솔루션 캐싱 공급자_javascript 팁

나는 모든 개발자가 캐싱의 중요성을 알고 있다고 믿습니다. DB에 대한 부담을 줄이기 위해 처음부터 끝까지 캐싱 배경(memcached, xcache 등)이 있습니다. CDN(콘텐츠 전송 네트워크) 캐시는 브라우저가 두 번 이상 로드된 리소스를 캐시하기를 원합니다. 물론 클라이언트측 캐싱이 있으므로 비용이 많이 드는 작업(알고리즘이나 대규모 계산도 포함)을 반복하지 않아도 됩니다.

이것은 좋은 자바스크립트 클라이언트 솔루션입니다. HTML5 로컬 저장소에 대한 선택적 지원

간단하게 시작하기

코드 복사 코드는 다음과 같습니다.

function CacheProvider() {
// 값은 여기에 저장됩니다
this._cache = {};
}로컬 저장소의 기능 감지
try {
CacheProvider.hasLocalStorage = ('localStorage' in window) && window['localStorage'] !== null
} catch(예: ) {
CacheProvider.hasLocalStorage = false;
}

여기서 try catch를 사용하는 주된 이유는 Firefox가 이 속성을 지원하지만 about:config에 있어야 하기 때문입니다. 그렇지 않으면 오류가 보고됩니다. 따라서 간단한 경우에는 요구 사항을 충족할 수 없습니다.

아래에서는 객체 로컬 저장 메커니즘에 대한 지원을 추가합니다. 이 기술은 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));
}
}

이제 세 가지가 있습니다. 핵심 메소드는

핵심 클래스 기능

코드 복사 코드는 다음과 같습니다. :

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);
return
}
}
}
} else {
// 로컬 객체 넣기
this._cache[k] = v;
}
// 새로 캐시된 항목 반환
return v; /**
* {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 || function(c) {
var reg = 캐시.get(c) || 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;
}

참고: 다음에 클래스 함수를 호출하면 미리 컴파일된 정규 함수로 대체됩니다. 표현식 표현식을 구성하기에 충분합니다.


또 다른 예: 예를 들어 i18n이 필요한 대규모 애플리케이션의 경우 컴파일된 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')); 🎜>} )
}


또한 외부 리소스를 로컬로 캐싱하는 등 많은 작업을 수행할 수 있습니다 :)