jQuery 데이터 캐싱 function_jquery의 구현 아이디어 및 간단한 시뮬레이션

머리말
jQuery의 데이터 캐싱은 다들 잘 알고 계시리라 생각합니다. jQuery 캐싱 시스템은 DOM 요소뿐만 아니라 애니메이션, 이벤트 등에도 사용됩니다. 따라서 일상적인 실제 애플리케이션에서는 요소에 대한 일부 데이터를 캐시해야 하는 경우가 많으며 이러한 데이터는 DOM 요소와 밀접한 관련이 있는 경우가 많습니다. DOM 요소(노드)도 객체이기 때문에 DOM 요소의 속성을 직접 확장할 수 있습니다. 그러나 DOM 요소에 사용자 정의 속성을 추가하거나 너무 많은 데이터를 추가하면 메모리 누수가 발생할 수 있으므로 그렇게 하지 않도록 노력해야 합니다. 따라서 더 나은 솔루션은 낮은 결합 방법을 사용하여 DOM과 캐시 데이터를 연결하는 것입니다.

추가로: jQuery.data 및 jQuery.removeData 정적 메소드의 소개와 사용법에 대해서는 많이 언급하지 않을 것이며, 이 두 메소드를 기반으로 하는 프로토타입 확장 메소드에 대해서는 공식에서 확인할 수 있습니다. API 문서.

구현 아이디어
jQuery는 유연하고 강력한 캐싱 방법 세트를 제공합니다.
(1) 먼저 jQuery 내에 캐시 객체 {}를 생성하여 캐시된 데이터를 저장합니다. 그런 다음 캐시해야 하는 DOM 노드에 확장 값이 있는 속성을 확장합니다. 여기에는 "jQuery"(새 날짜).getTime()이 있습니다. 참고: Expando의 값은 "jQuery"의 현재 시간과 동일합니다. 요소 자체가 이 속성을 가질 가능성은 매우 적으므로 충돌을 무시할 수 있습니다.
(2) 그런 다음 각 노드의 dom[expando] 값을 자동 증가 변수 id로 설정하여 전역 고유성을 유지합니다. 이 ID의 값은 DOM 노드와 데이터를 연결하는 캐시 키로 사용됩니다. 즉, 캐시[id]는 이 노드의 모든 캐시를 검색합니다. 즉, id는 방(DOM 노드)을 여는 열쇠와 같습니다. 각 요소에 대한 모든 캐시는 맵에 배치되므로 여러 데이터를 동시에 캐시할 수 있습니다.
(3) 따라서 캐시 객체 구조는 다음과 같아야 합니다.

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

var 캐시 = {
"uuid1": { // DOM 노드 1이 데이터를 캐시합니다. "uuid1"은 dom1[expando]와 동일합니다.
"name1": value1,
"name2": value2
},
"uuid2": { // DOM 노드 2는 데이터를 캐시합니다. "uuid2"는 dom2[expando]와 동일합니다.
"name1": value1,
"name2 ": value2
}
// ......
};

각 uuid는 요소 캐시 데이터에 해당하며, 각 캐시 객체는 여러 개의 캐시 객체로 구성될 수 있습니다. 이름/값(이름-값 쌍) 쌍이며 값은 모든 데이터 유형이 될 수 있습니다.

간단한 시뮬레이션 구현
위의 아이디어를 바탕으로 jQuery.data 및 jQuery.removeDate의 기능을 간단히 구현할 수 있습니다.

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

(function(window, undefine) {
var 캐시Data = {}, // 데이터를 저장하는 데 사용되는 개체
win = window, // 변수에 창 캐시
uuid = 0 ,
//난수(8자리) 선언
// new Date()에 의해 생성된 난수는 빈 문자열로 연결된 후(또는 toString을 사용하여 변환된 후)입니다. 메서드), 문자열이 되고 슬라이스 메서드를 사용할 수 있습니다.
expando = "cacheData" ( new Date() "").slice(-8)
// ( new Date()).toString( ).slice( -8) Expando와 동일
// 캐시에 쓰기
var data = function(elem, name, value) {
// 또는 기본 메서드를 사용하여 문자열 확인 Object.prototype.toString .call( elem) === "[object String]"
// elem이 문자열인 경우
if (typeof elem === "string") {
// name 매개변수가 전달된 경우 입력하면 캐시 입력
if (name !== undefine) {
cacheData[elem] = name
}
// 캐시 데이터 반환
return 캐시Data[elem];
// elem이 DOM 노드인 경우
} else if (typeof elem === "object") {
var id,
thisCache
// elem에 Expando 속성, Expando 속성 추가(요소에 대한 캐시를 처음 설정하는 경우), 그렇지 않으면 기존 Expando 및 id 값을 직접 가져옵니다.
if (!elem[expando]) {
id = elem[ Expando] = uuid;
thisCache = 캐시데이터 [id] =
} else {
id = elem[expando]
thisCache = 캐시데이터[id]
// 현재 캐시 객체로 난수 사용 의 속성인 캐시 객체는 난수를 사용하여 찾을 수 있습니다.
if (!thisCache[expando]) {
thisCache[expando] = {}; 🎜>}
if (값 !== 정의되지 않음) {
// 캐시 객체에 데이터 저장
thisCache[expando][name] = value
}
// Return DOM 요소에 저장된 데이터
return thisCache[expando ][name];
}
// 캐시 삭제
varremoveData = function(elem, name) {
// elem이 문자열인 경우 속성 값을 직접 삭제합니다.
if (typeof elem === "string") {
delete 캐시Data[elem]
// 키가 DOM 노드인 경우
} else if (typeof elem === "object" ) {
// elem에 Expando 속성이 없으면 캐시를 삭제하지 않고 실행을 종료합니다.
if (!elem[expando]) {
return;
}
// 객체가 비어 있는지 확인
var isEmptyObject = function(obj) {
var name
for (name in obj) {
return false;
}
return true;
}
removeAttr = function() {
try {
// 표준 브라우저인 IE8에서는 속성을 직접 삭제할 수 있습니다
delete elem[expando];
} catch (e) {
// IE6/IE7은 속성을 삭제하기 위해 RemoveAttribute 메소드를 사용합니다
elem.removeAttribute(expando);
id = elem[expando];
if (name) {
// 지정된 데이터만 삭제
delete 캐시Data[id][expando][name]// 빈 개체인 경우 해당 ID에 해당하는 모든 데이터 개체가 삭제됩니다
if (isEmptyObject(cacheData [id][expando])) {
delete 캐시Data[id];
removeAttr(); >}
} else {
// DOM 요소에 대해 캐시에 저장된 모든 데이터 삭제
delete 캐시Data[id]
removeAttr();
}
};
// 외부에서 사용할 수 있도록 데이터 및 제거 데이터를 창 전역 개체에 걸어 놓습니다.
win.expando = Expando;
win.data =
win; 제거데이터 = 제거데이터
})(창, 정의되지 않음)


예:
HTML 구조:




코드 복사

코드는 다음과 같습니다:

< ;div id="demo" style="height: 100px; width: 100px; background: #ccc; color: # fff; 여백: 20px; 텍스트 정렬: 센터; 줄 높이: 100px;"> 데모

js 코드:

코드 복사

코드는 다음과 같습니다.

window.onload = function() { // Test var 데모 = document.getElementById("demo"); // 캐시 쓰기데이터(demo, "myName", "hcy") console.log(data(demo, " myName")); // hcy

data(demo, "myBlog", "http://www.cnblogs.com/cyStyle");

console.log(data(demo, "myBlog")) ; // http://www.cnblogs.com/cyStyle
// DOM 요소 캐시 삭제
removeData(demo, "myBlog")
console.log(data(demo, " myBlog")); // 정의되지 않음
console.log(data(demo, "myName")); // hcy
console.log(demo[expando]); // 1
// 제거 DOM 요소
removeData(demo)
console.log(demo[expando]) // 정의되지 않음


firefox의 예제 결과 스크린샷:

jQuery의 간단한 캐싱 시스템을 구현하기 위한 위의 예에서는 먼저 DOM 요소에 무작위로 생성된 확장 속성을 추가합니다. 캐시된 데이터에 접근하기 위한 id 값을 저장하기 위해 DOM 요소에 캐시 금고를 열 수 있는 키가 있는 것과 같습니다. 키가 있는 한 언제든지 캐시 금고를 열 수 있습니다. 원래 DOM 요소에 저장된 데이터는 캐시로 옮겨지고, DOM 요소 자체는 간단한 속성만 저장하면 되므로 DOM 요소로 인한 메모리 누수를 방지할 수 있습니다(구체적으로 어떻게 될지는 모르겠지만, 다들 아시죠 그래서~) 위험이 최소화됩니다.

결론
끝에 헷갈리는 부분이 있는데, 용어나 설명에 차이가 있을 수 있으니, 이론적으로는 고쳐주시고 조언도 해주셨으면 좋겠습니다. , , data 및 RemoveData 메소드는 모든 객체를 캐싱하는 데 사용할 수 있습니다. 그러나 로컬 객체나 창 객체에 사용하면 메모리 누수 및 순환 참조(인터넷에서 볼 때 ^_^)와 같은 문제가 발생하므로 일반적으로 DOM 노드에 사용되며 이벤트와 애니메이션을 결합하여 DOM 노드에 데이터를 캐시할 수도 있습니다. ps: 캐시는 정말 중요해요! 천천히 깨달아야지~
나눔이 있기에 소박하고, 나눔이 있기에 행복하다.