jQuery 데이터 캐시 data(이름, 값)_jquery에 대한 자세한 설명 및 구현

프로그래머라면 '캐싱'을 언급하면 ​​'클라이언트(브라우저 캐시)'와 '서버 캐시'를 쉽게 떠올릴 수 있습니다. 클라이언트 캐시는 브라우저 컴퓨터의 하드 드라이브, 즉 브라우저의 임시 폴더에 저장되는 반면, 서버 캐시는 서버의 메모리에 저장됩니다. 물론 일부 고급 응용 프로그램에는 전용 캐시 서버도 있으며, 데이터베이스를 사용한 캐싱 구현까지. 물론 이러한 내용은 이 기사의 범위를 벗어납니다. 이 기사에서 논의할 내용은 가장 널리 사용되는 JavaScript 프레임워크인 jQuery의 데이터 캐싱 구현 원리입니다. 이는 jQuery 버전 1.2.3부터 추가된 새로운 기능입니다.
1. jQuery 데이터 캐시의 역할
jQuery 데이터 캐시의 역할은 중국어 API에 다음과 같이 설명되어 있습니다. "요소의 데이터에 액세스하고 위험을 피하는 데 사용됩니다. 순환 참조." 이 문장을 어떻게 이해해야 할까요? 아래 예를 살펴보세요. 더 좋은 예가 있으면 알려주시기 바랍니다.
(1) 순환 참조의 위험이 있는 예(getDataByName(name) 메소드의 for in 문 참고):

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

Tom> ;

마이크 "text/javascript" >
var userInfo = [
{
"name": "Tom",
"age": 21,
"phone": "020-12345678"
},
{
"이름": "마이크",
"나이": 23,
"전화": "020-87654321"
}]; function getDataByName(name)
{
for (var i in userInfo)
{
if (userInfo[i].name == name)
{
return userInfo[i] ;
break ;
}
}
}
function showInfoByName(name)
{
var info = getDataByName(name)
alert('name:' info.name 'n' 'age:' info.age 'n' 'phone:' info.phone)
}



(2) 예 순환 참조의 위험을 최적화합니다(이 예는 실제로 jQuery 캐시 구현 원칙과 유사합니다. 이 예의 초점은 이름이 객체 키와 직접 일치하도록 userInfo의 JSON 구조를 다시 작성하는 것입니다):

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

Tom a>

Mike

jQuery 데이터 캐싱의 구현은 실제로 매우 간단합니다. 캐싱 방법은 데이터의 구현 원리를 더 쉽게 이해할 수 있도록 최대한 간단하게 코드를 작성했습니다. 함수 및 테스트 코드는 다음과 같습니다.


코드 복사

코드는 다음과 같습니다

div1

div2

script type="text/javascript">
//캐시 객체 구조는 다음과 같습니다. {"uuid1":{"name1":value1,"name2":value2},"uuid2":{"name1": value1, "name2":value2}}, 각 uuid는 elem 캐시 데이터에 해당합니다. 각 캐시 객체는 여러 이름/값 쌍으로 구성될 수 있으며 value는 모든 데이터 유형이 될 수 있습니다. 예를 들어 다음과 같이 elem 아래에 있을 수 있습니다. JSON 조각 저장: $(elem).data('JSON':{"name":"Tom","age":23})
var 캐시 = {}
//expando as elem New 사용자 정의 속성과의 충돌을 방지하기 위해 여기서는 변수 suffix를 사용합니다.
var Expando = 'jQuery' new Date().getTime()
var uuid = 0; 🎜>함수 데이터(요소, 이름, 데이터)
{
//캐시를 얻거나 설정하려면 적어도 두 개의 매개변수 elem과 이름이 있는지 확인하세요.
if (elem && name)
{
//elem 태그 확장 속성을 가져옵니다.
var id = elem[expando]
if (data)
{
//캐시 데이터 설정
if ( !id)
id = elem[expando] = uuid;
//id 키 객체가 캐시에 존재하지 않는 경우(즉, 이 elem에는 데이터 캐시가 설정되지 않은 경우) 먼저 빈 객체를 만듭니다.
if (!cache[id])
cache[id] = {}
cache[id][name] = 데이터
}
else
{
//캐시 데이터 가져오기
if (!id)
return '캐시를 설정하지 않음!'
else
return 캐시[id][name]
}
}
var div = document.getElementById(' div1');
data(div, "tagName", "div")
data(div, "ID", "div1"); 🎜>alert(data(div, "tagName")) ; //div
alert(data(div, "ID")) //div1
var div2 = document.getElementById('div2');
alert(data(div2, "tagName") ); //캐시를 설정하지 않았습니다!



3. 🎜>
(1) jQuery 캐시 개체는 AJAX 응용 프로그램에서 전역적으로 페이지가 새로 고쳐지는 경우가 매우 드물기 때문에 계속해서 데이터를 조작하면 이 개체가 항상 존재하게 됩니다. 사용하면 개체가 계속 커지며 궁극적으로 프로그램 성능에 영향을 미칩니다. 따라서 우리는 이 객체를 시간 내에 정리해야 합니다. jQuery는 또한 해당 메소드인 제거데이터(name)를 제공합니다. name은 데이터 값을 설정할 때 사용한 이름 매개변수입니다.
또한 jQuery 코드에 대한 이해를 바탕으로 다음과 같은 상황에서는 데이터 캐시를 수동으로 지울 필요가 없다는 것을 알게 되었습니다.

jQuery는 객체의 가능한 캐시를 지웁니다. jQuery 관련 소스코드 참고 :


코드 복사

코드는 다음과 같습니다. remove:function (selector) { if (!selector || jQuery.filter(selector, [this]).length) {

// 메모리 누수 방지

jQuery("*", this).add([this]).each(function()
{
jQuery.event.remove(this);
jQuery.removeData(this);
}); if (this .parentNode)
this.parentNode.removeChild(this);
}
}


elem 하위 요소가 존재합니다. 데이터 캐시가 있는 경우 jQuery는 하위 개체에 대해 존재할 수 있는 데이터 캐시도 지웁니다. 왜냐하면 jQuery의 empty() 구현은 실제로 하위 요소를 삭제하기 위해 루프에서 제거()를 호출하기 때문입니다. jQuery 관련 소스코드 참조:




코드 복사

코드는 다음과 같습니다.

empty:function () { // 요소 노드 제거 및 메모리 누수 방지 jQuery(this).children().remove() // 남은 노드 제거

(this. firstChild)

this.removeChild(this.firstChild)
}


2. jQuery 복사 노드 clone() 메서드는 데이터 캐시를 복사하지 않습니다. 정확하게 말하면 jQuery는 새로 복사된 요소 캐시를 저장하기 위해 전역 캐시 개체에 새 노드를 할당하지 않습니다. jQuery는 가능한 캐시 포인팅 속성(elem의 Expando 속성)을 clone()의 빈 속성으로 대체합니다. 이 속성을 직접 복사하면 원본 요소와 새로 복사된 요소 모두 데이터 캐시를 가리키며 중간 상호 운용은 두 요소의 캐시 변수에 영향을 미칩니다. 다음 jQuery 코드는 Expando 속성을 삭제합니다(jQuery 1.3.2, 이전 버전에서는 이 방식으로 처리하지 않았으며 새 버전에서 이 메서드의 성능이 확실히 더 좋습니다).
jQuery.clean([html.replace(/ jQueryd ="(?:d |null)"/g, "").replace(/^s*/, "")])[0]; >데이터 캐시를 함께 복사하는 것은 때로는 매우 유용합니다. 예를 들어 드래그 작업에서 소스 대상 요소 노드를 클릭하면 반투명 요소 복사본이 복사되어 드래그가 시작되고 데이터 캐시가 드래그에 복사됩니다. 레이어. 드래그가 완료될 때까지 현재 드래그된 요소와 관련된 정보를 얻을 수 있습니다. 이제 jQuery 메소드는 그러한 처리를 제공하지 않습니다. 우리는 무엇을 할 수 있습니까? 첫 번째 방법은 jQuery 코드를 다시 작성하는 것입니다. 이 방법은 분명히 어리석고 비과학적입니다. 올바른 접근 방식은 소스 대상의 데이터를 복사하고 데이터를 복사된 요소로 재설정하여 data(name, value) 메서드가 실행될 때 jQuery가 전역 캐시 개체에 새 공간을 열어주는 것입니다. 구현 코드는 다음과 같습니다.

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

if ( typeof($.data( currentElement)) == '숫자')
{
var elemData = $.cache[$.data(currentElement)]
for (var k in elemData)
{
dragingDiv.data(k, elemData[k]);
}
}

위 코드에서 $.data(elem,name,data)는 3개를 포함합니다. 매개변수 elem 매개변수가 하나만 있는 경우 이 메소드는 캐시 키(예: uuid)를 반환합니다. 이 키를 사용하면 전체 캐시 개체를 가져온 다음 개체의 데이터를 새 개체에 복사할 수 있습니다.