jQuery의 캐싱 메커니즘에 대한 간략한 분석_jquery

얼마 전 jQuery의 애니메이션 대기열을 연구하면서 jQuery의 캐싱 시스템도 매우 강력하다는 사실을 발견했습니다. jQuery의 캐싱 시스템은 외부에서 사용할 때 비교적 간단합니다. 예를 들어 특정 URL 데이터를 캐시에 저장하려면 다음과 같이 작성하면 됩니다.

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

var val = "stylechen.com";
$("div").data( "url" ) // Return undefine
$ ("div").data( "url", val ); // "stylechen.com"을 반환합니다
$("div").data( "url" ) // "stylechen.com"을 반환합니다. 🎜 >

위의 값은 문자열을 저장할 수 있을 뿐만 아니라 모든 데이터가 될 수 있으며 개체, 배열, 함수 등을 저장할 수 있습니다. 이 함수를 구현하는 것은 매우 간단합니다. 데이터를 저장하기 위한 전역 개체를 선언한 다음 데이터 메서드를 사용하여 데이터를 저장하거나 반환합니다.

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

var 캐시데이터 = {}; 데이터를 저장하려면 전역 객체
var data = function( key, val ){
if( val !== undefine ){
캐시Data[key] = val;
}
캐시데이터[키] 반환;

}

jQuery 캐싱 시스템의 진정한 매력은 내부 애플리케이션에 있습니다. 애니메이션, 이벤트 등이 모두 이 캐싱 시스템을 사용합니다. 이전에 easyAnim을 작성할 때 각 DOM 요소의 사용자 정의 속성에 애니메이션 대기열을 저장했기 때문에 대기열 데이터에 쉽게 접근할 수 있었지만 숨겨진 위험도 있었습니다. DOM 요소에 사용자 정의 속성과 너무 많은 데이터를 추가하면 메모리 누수가 발생할 수 있으므로 이 작업을 피하십시오.

JQuery의 캐싱 시스템을 사용하여 DOM 요소의 데이터를 저장하는 경우 무작위로 생성된 속성이 DOM 요소에 먼저 추가됩니다. 이 속성은 DOM과 마찬가지로 캐시된 데이터에 액세스하기 위한 인덱스 값을 저장하는 데 사용됩니다. 요소에 열려 있는 열쇠가 있습니다. 캐시 금고의 열쇠가 있으면 언제든지 캐시 금고를 열 수 있습니다. 원래 DOM 요소에 저장된 데이터는 캐시로 옮겨지고, DOM 요소 자체는 간단한 속성만 저장하면 되므로 DOM 요소로 인한 메모리 누수 위험을 최소화할 수 있습니다. 다음은 jQuery를 시뮬레이션하기 위해 작성한 간단한 캐싱 시스템입니다.

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

var 캐시Data = {}, // 데이터를 저장하는 데 사용되는 전역 객체
uuid = 0,
// 난수 선언
Expando = "cacheData" ( new Date() " " ).slice( -8 );

var data = function( key, val, data ){
if( typeof key === "string" ){
if( val != = 정의되지 않음 ){
캐시데이터[키] = val;
}

return cashData[key];
}
else if( typeof key === "object" ){
var index,
thisCache;

if( !key [expando] ){
// DOM 요소의 속성 추가
// 난수는 속성 이름이고 인덱스 값은 속성 값
index = key[expando] = uuid;
thisCache = 캐시Data[ index] = {};
}
else{
index = key[expando];
thisCache = 캐시Data[index];
}


if( !thisCache[expando] ){
thisCache[expando] = {};
}

if( gambling // 캐시 객체에 데이터 저장
thisCache[expando][val] = data;
}

// 저장된 DOM 요소 반환 Data
return thisCache[expando][val];
}
};

var RemoveData = function( key, val ){
if( typeof key === "string" ){
delete cashData[key];
}
else if( typeof key = == "object" ){
if( !key[expando] ){
return;
}
// 객체가 비어 있는지 확인
var isEmptyObject = function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
},

RemoveAttr = function(){
try{
// IE8 및 표준 브라우저는 속성을 삭제하기 위해 delete를 직접 사용할 수 있습니다.
delete key[expando];
}
catch (e) {
// IE6/IE7 사용 속성을 삭제하는 RemoveAttribute 메소드
key.removeAttribute(expando);
}
},

index = key[expando];

if( val ){
// 지정된 데이터만 삭제
delete 캐시Data[index][expando][val];
// 빈 객체라면 그냥 모든 객체 삭제
if( isEmptyObject( 캐시Data[index] [expando] ) ){
delete cashData[index];
RemoveAttr();
}
}
else{
// DOM 요소에 대해 캐시에 저장된 모든 데이터를 삭제합니다.
캐시 데이터 삭제[index];
RemoveAttr();
}
}
};

위 코드에서 주목할 만한 점은 IE6/IE7에서 사용자 정의 속성을 삭제하기 위해 삭제를 사용하면 오류가 보고된다는 점입니다. 표준 브라우저에서는 삭제를 사용하여 삭제할 수 있습니다. 호출 결과는 다음과 같습니다.

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

var box = document.getElementById( "box " ),
list = document.getElementById( "list" );

data( box, "myName", "chen" );
alert( data( box, "myName" ) ) ; //첸

data( box, "myBlog", "stylechen.com" );
alert( data( box, "myBlog" ) ) // stylechen.com

removeData( 상자, "myBlog" );

alert( data( box, "myBlog" ) ); // 정의되지 않음
alert( data( box, "myName" ) ) // chen
alert( box[expando] );

removeData( box );
alert( box[expando] ) // 정의되지 않음

물론 jQuery의 캐싱 시스템은 저보다 더 복잡하지만 핵심 원칙은 여전히 ​​동일합니다. easyAnim은 후속 버전에서 이 캐싱 시스템을 도입할 것입니다.