jQuery 객체 데이터 캐시 캐시 원리 소개 및 jQuery.data 메소드의 차이점_jquery

데이터 캐싱을 구현하기 위해 jQuery.data(..)를 사용하는 방법에 대한 많은 온라인 튜토리얼이 있지만 사용자가 일반적으로 사용하는 두 가지가 있습니다: data([key],[value]) 및 jQuery.data(element,[key] ,[값].]) 둘의 차이점을 명확하게 설명하는 기사가 거의 없어서 사용하고 연구하여 모든 사람과 공유했습니다.

$("").data([key],[value])와 jQuery.data(element,[key],[value])의 차이점
두 함수가 모두 사용됩니다. 요소는 우리가 일반적으로 데이터 캐싱이라고 부르는 것이며 둘 다 jQuery 개체를 반환합니다. 둘 다 사용할 때 정말 충격을 받았습니다. 사실 알 필요는 없지만 사용했을 때 충격을 받았습니다. 먼저 예제를 살펴보고, 소스코드를 기반으로 분석해 보겠습니다.

Js 코드:

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

test2

test3

test

aaaa

<script> $(document ).ready(function(){ <br>$("#test").click(function(){ <br>alert("JQUERY"); <br>var e=$("div") ;// 두 개의 jquery 객체가 정의되었습니다. <br>var w=$("div"); //e는 w와 동일하지 않습니다. <br>//먼저 data([key],[value]) 사용법을 사용합니다. e).data("a","aaaa");//e와 w에 각각 동일한 키를 사용하여 데이터를 저장합니다. <br>$(w).data("a","wwww");// 참조 다른 개체에 저장되어 있지만 이전 항목을 덮어쓰는 경우 <br>alert($(e).data("a"));//답을 추측하셨나요? 조금 예상치 못한가요? <br>alert(e===w)//false <br>alert($(w).data("a"));//이것도 wwww입니다. <br>//jQuery를 사용하세요. .data (요소,[키],[값]) <br>$.data(e,"b","cccc");//e와 w에 각각 동일한 데이터를 저장합니다. <br> $.data(w,"b","dddd");//다른 객체에 저장되어 있지만 이전 항목을 덮어쓰는지 확인하세요. <br>alert($.data(e,"b") ); //답을 추측할 수 있어야 합니다. cccc <br>alert($.data(w,"b"));//이 출력 dddd <br>}); 🎜>< /script> <br><br> <br>위의 예를 살펴본 후 data([key],[value]) 및 jQuery.data(element,[key],[value ]) 전혀 똑같지 않나요? 그들 사이에 어떤 관계가 있습니까? data([key],[value])가 이전 키의 동일한 값을 덮어쓰는 이유는 무엇입니까? <br><br>그리고 jQuery.data(element,[key],[value])는 다른 객체에 바인딩되어 있는 한 덮어쓰기를 발생시키지 않습니다. 그렇습니까? 소스 코드를 연구해 봅시다. <br> </div>먼저 jQuery.data(element,[key],[value]) 소스 코드를 살펴보세요. <br>Js 코드: <br><br><br><br><br>코드 복사<br><div class="codetitle"><span> 코드는 다음과 같습니다. <a style="CURSOR: pointer" data="90610" class="copybut" id="copybut90610" onclick="doCopy('code90610')"><div class="codebody" id="code90610"> <br>jQuery.extend({ <br>cache: {}, <br>// 주의해서 사용하세요. <br>uuid: 0, <br>// 페이지의 각 jQuery 복사본에 대해 고유합니다. <br>// rinlinejQuery <br>와 일치하도록 숫자가 아닌 항목이 제거됨 <br>expando: "jQuery" ( jQuery.fn.jquery Math.random() ).replace( /D/g, "" ), <br>.... <br>data: function( elem, name, data, pvt /* 내부 사용 전용 */ ) { <br>// 데이터를 추가할 수 있는지 여부, 그렇지 않은 경우 직접 반환 <br>if ( !jQuery.acceptData( elem ) ) { <br>return; <br>} <br>var privateCache, thisCache, ret, <br>//jQuery.expando 이는 jquery 객체가 생성될 때 생성되는 고유한 문자열입니다. 🎜>internalKey = jQuery.expando, <br>getByName = typeof name === "string", <br>// IE6-7은 DOM 개체와 JS 개체 전체에서 개체를 가비지 수집할 수 없기 때문에 DOM 요소와 JS 개체는 다르게 처리되어야 합니다. 참조 속성 <br>isNode = elem.nodeType, <br>// DOM 요소인 경우 전역 jQuery.cache를 사용합니다. <br>// JS 개체인 경우 개체에 직접 연결합니다. <br>cache = isNode ? jQuery.cache : elem, <br>// 캐시가 이미 존재하는 경우에만 JS 개체에 대한 ID를 정의하면 <br>// 캐시가 없는 DOM 노드와 동일한 경로에서 코드가 바로가기가 가능합니다. <br> id = isNode ? elem[ 내부 키 ] : elem[ 내부 키 ] && 내부 키, <br>isEvents = name === "events" <br>// 데이터 없이 작업을 수행할 때 불필요한 작업을 더 이상 수행하지 마세요. object <br>// 개체에 데이터가 없으면 <br>if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data) ) &&를 직접 반환합니다. getByName && data === undefine ) { <br>return; <br>} <br>// ID가 없으면 생성합니다. <br>if ( !id ) { <br>// DOM 노드만 필요 데이터 <br>// 전역 캐시에 저장되므로 각 요소에 대한 새로운 고유 ID <br>if ( isNode ) { <br>// DOM 요소인 경우 요소에 고유 ID를 생성하고 사용합니다. jQuery.expando <br>//나중에 jQuery.expando를 기반으로 ID를 찾을 수 있도록 elem 요소에 속성 값을 id로 저장합니다. <br>elem[ InternalKey ] = id = jQuery.uuid; <br>} else { <br>//JS 객체는 jQuery.expando를 직접 사용하는데, 왜 id가 필요한가요? <br>// 다른 속성과의 충돌을 피하세요! <br>id = InternalKey; <br>} <br>} <br>//// 키에 값이 포함되어 있는지 액세스하려고 할 때 jQuery.cache[id] 값이 존재하지 않으면 <br> // jQuery.cache[id] 값을 빈 객체로 초기화합니다. {} <br>if ( !cache[ id ] ) { <br>cache[ id ] = {} <br>if ( !isNode ) { <br> 캐시[ id ].toJSON = jQuery.noop; <br>} <br>} <br>// 키/값 쌍 대신 객체를 jQuery.data에 전달할 수 있습니다. <br>// 기존 캐시에 복사됨 <br>// 데이터는 객체와 함수를 수신하기 위한 것입니다. 얕은 복사 <br>if ( typeof name === "object" || typeof name === "function" ) { <br>if ( pvt ) { <br>cache[ id ] = jQuery.extend( 캐시[ id ], 이름 ) <br>} else { <br>cache[ id ].data = jQuery.extend( 캐시[ id ].data , name ); <br>} <br>} <br>/ 모든 데이터를 저장하는 매핑 객체인 Storage 객체 <br>privateCache = thisCache = 캐시[ id ]// jQuery data() 가 저장됩니다. 내부 데이터와 사용자 정의 <br>// 데이터 간의 키 충돌을 피하기 위해 객체의 내부 데이터 <br>// 캐시에 별도의 객체가 있습니다. <br>// jQuery 내부 데이터는 별도의 객체(thisCache. data= =thisCache[ InternalKey ]) <br>//On, 내부 데이터와 사용자 정의 데이터의 충돌을 피하기 위해 <br>if ( !pvt ) { <br>// 프라이빗 데이터를 저장하는 객체가 존재하지 않습니다. , 하나 만들기 {} <br>if ( !thisCache.data ) { <br>thisCache.data = {}; <br>} <br>// thisCache를 개인 데이터 객체로 교체 <br>thisCache = thisCache.data ; <br>} <br>// 데이터가 정의되지 않은 경우 데이터 매개변수가 전달된 다음 데이터가 name 속성에 저장된다는 의미입니다. <br>if ( data !== undefine ) { <br> // jQuery.camelCase( name ) 함수가 전달되면 객체/함수이므로 변환이 이루어지지 않습니다. <br>//전달된 이름만 문자열로 변환됩니다. 따라서 최종적으로 저장되는 것은 키/값 쌍입니다. <br>thisCache[ jQuery.camelCase( name ) ] = data <br>} <br>//이제부터 다음 코드는 데이터를 처리합니다. 이름) 데이터가 비어 있으면 반환 값 데이터를 찾습니다. <br>if ( isEvents && !thisCache[ name ] ) { <br>return privateCache.events; <br>} <br>// name이 문자열인 경우 데이터를 반환합니다. <br>// 그렇지 않은 경우 전체 저장소를 반환합니다. object <br>if ( getByName ) { <br>// 먼저 있는 그대로의 속성 데이터를 찾습니다. <br>ret = thisCache[ name ] <br>// null|정의되지 않은 속성 데이터에 대한 테스트 <br> if ( ret == null ) { <br>// camelCased 속성을 찾으세요. <br>ret = thisCache[ jQuery.camelCase( name ) ] <br>} <br>} else { <br>ret = thisCache ; 🎜>} <br>반환 <br>}, <br>.....<br>});<br>사진을 보세요<br><img src="http://files.jb51.net/file_images/article/201304/201347154622592.jpg?201337154725" alt="jQuery 객체 데이터 캐시 캐시 원리 소개 및 jQuery.data 메소드의 차이점_jquery" > <br>jQuery.data(element,[key],[value]) 소스 코드를 보면 각 요소마다 고유한 {key:value가 있음을 알 수 있습니다. } object 데이터가 저장되므로, 새로 생성된 객체가 동일한 키를 가지고 있더라도 새로운 객체가 다른 {key:value} 객체에 저장되기 때문에 기존 객체의 키에 해당하는 값을 덮어쓰지 않습니다. <br><br> 다음으로 각각(콜백)을 사용하는 데이터([키],[값])의 소스 코드를 분석해야 합니다. 분석에 앞서 각각의 사용법과 소스 코드를 살펴보겠습니다. (콜백). <br><br>Js 코드: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="68584" class="copybut" id="copybut68584" onclick="doCopy('code68584')"><u>코드 복사 </u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code68584"> <br> <div id="test2" onclick="test()">test2</div> <br><div id="abc3" onclick="test()">test3</div> <div id="test" onclick="test()">test</div> <br><p id="ttt">aaaa</p> <br><script> $(document ).ready(function(){ <br>$("#test").click(function(){ <br>alert("JQUERY"); <br>var i=0; <br>$ ("# abc3").each(function() { <br>alert( i);//1개만 출력합니다. <div id="abc3"> <br>}이 하나뿐이므로 <br>alert("- ---"); <br>var j=0; <br>$("div").each(function() { <br>alert( j);//출력 1, 2, 3개; <br>}); <br>}); <br></script> 이제 다음과 같이 각 메소드의 구체적인 구현을 살펴보겠습니다. jQuery.prototype = {
each: function( callback, args ) {
return jQuery.each( this, callback, args )
}
}
반환되는 내용을 볼 수 있습니다. 전역 Each 메소드와 자체 jQuery 객체가 매개변수로 제공됩니다. 전역 Each 메소드의 구체적인 구현은 다음과 같습니다.
// args는 내부 멤버
each에 대한 호출로 사용됩니다. ( object, callback, args ) {
var name, i = 0, length = object.length; // object가 jQuery 객체인 경우 길이는 비어 있지 않습니다.
if ( args ) {
if ( 길이 = == 정의되지 않음 ) {
for ( 객체의 이름 )
if ( callback.apply( 객체[ 이름 ], args ) === false )
break
} else
for ( ; i if ( callback.apply( object[ i ], args ) === false )
break
// 다음은 } else {
if ( 길이 === 정의되지 않음 ) {
for ( 객체의 이름 )
if ( callback.call( 객체[ 이름 ], 이름, 객체[ 이름 ] ) === false )
break;
} else
// i는 인덱스 값을 나타내고, value는 DOM 요소를 나타냅니다.
for ( var value = object[0];
i < length && 콜백. call( value, i , value ) !== false;
value = object[ i] ){}
}
return object
}


for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[ i] ){} 이 코드에서는 object[0]이 가져옵니다. jQuery 객체 첫 번째 DOM 요소에 대해 for 루프를 통해
는 전체 jQuery 객체의 해당 DOM 요소를 순회하고 callback.call(value,i,value)을 통해 콜백의 this 객체를 가리킵니다. value 객체를 전달하고 두 개의 매개변수를 전달합니다. i는 인덱스 값을 나타내고 value는 DOM 요소를 나타냅니다. 이는 function(index, elem) { }과 유사한 메서드입니다. 그래서 우리는 $("").each(function(index, elem){ });
data([key],[value])
Js 코드의 소스 코드를 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

jQuery.fn.extend({
data: function( key, value) {
var parts, part, attr, name, l,
elem = this[0],
i = 0,
data = null;
// 모든 값 가져오기 ​​
if ( key === undefine ) {
.....//키 없이 사례 처리 , 여기에서는
return data;
}
// 여러 값을 설정합니다. ​​
if ( typeof key === "object" ) {
return this. Each(function() {
jQuery.data( this, key );
})
}
parts = key.split( ".", 2 ); ] = parts[1] ? "." parts[1] : "";
part = parts[1] "!"
return jQuery.access( this, function( value ) {
if ( 값 === 정의되지 않음 ) {
. //값이 없을 때 반환 값을 얻는 경우입니다.
parts[1] = value; 🎜>//$("div").data("a","aaa"))를 사용하는 경우 아래의 각 호출 전의 this는 $("div"),
this.each에서 반환된 개체를 참조합니다. (function() { //참고, 여기서는 일치하는 각 요소를 함수를 실행하기 위한 컨텍스트로 사용합니다.
var self = jQuery( this );
self.triggerHandler( "setData" part, parts );
// 여기 요소에 저장된 데이터는 기본적으로 data(요소, [키], [값])에 위임됩니다.
//이전 분석을 참조하세요.
//다음 데이터(this, key, value)는 페이지의

배열에 해당하는 전체 jQuery 개체
//$("div")에서 해당 DOM 요소를 각각 순회하는 것을 의미합니다.
jQuery.data( this, key, value );//이 문은 루프에서 여러 번 실행됩니다. 즉, 데이터가 저장됩니다.< ;/스팬>
//핵심 문장은 이렇습니다. 하지만 위에서는 각각(functipn(){})에 있다는 점을 분명히 확인하세요.
self.triggerHandler( "changeData" 부분,
})
}, null, value,args.length > 1, null, false ); //요소에 저장된 데이터를 제거합니다. 구체적인 구현은 다음과 같습니다.
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
}); }
});


data([key],[value]) 소스코드에 대해 잘 모르시는 분들을 위해 예제를 통해 따라해보겠습니다.
Js 코드:

코드 복사

코드는 다음과 같습니다.

test2

test3

id=" test" onclick="test()">test

aaaa

<script> ).ready (function(){ </div>$("#test").click(function(){ <div class="codebody" id="code89542">alert("JQUERY"); <br>var i=0; <br>$("# abc3") .each(function() { <br>alert( i);//1만 출력; <div id="abc3"> <br>}이 하나만 있기 때문에 1만 출력); <br>alert( "---- "); <br>var j=1; <br>$("div").each(function() {//각 일치 요소를 컨텍스트로 사용하여 이 함수를 실행합니다<br>$.data (this, "a","wwww");//여기서는 $("div")를 참조합니다. <br>//일치하는 각 요소를 개별적으로 탐색하고 각 개체에 대한 키/값을 저장합니다. {} <br>alert(j );//3개의 <div> 요소가 있으므로 각각 1, 2, 3을 출력합니다. <br>}) <br>alert($("#test").data("a")) ; //wwww로 돌아가기, <br>//아직 저장하지 않았는데, 이 div 노드에 값이 있는지 확인하는 것이 당연합니다. >//값이 있어야 합니다. 위 루프는 div의 Dom 노드에 저장되므로 <br>alert($("#test")===$("div"));//false는 증명합니다. 새로 생성된 두 개체가 동일하지 않습니다. <br>alert($("div").data("a"));//Return wwww, <br>//여기에서도 마찬가지입니다. "="wwww"가 div 노드에 저장되었습니다. 키 값이 정확합니다. <br>}); <br>}); <br></script>


이제 데이터를 확인하세요. ([key],[value]) jQuery를 사용하면 이미 data(element,[key],[value])를 이해하지 못한 경우 다시 읽어보고 인내심을 갖고 이해하세요. 실제로 표면적으로는 매우 다르게 보입니다. 하지만 본질적으로 여전히 연관성이 있습니다. 이제 원리를 이해했으므로 안심하고 사용할 수 있습니다. jQuery.data(element,[key],[value])는 데이터를 매개변수 요소 노드에만 바인딩합니다. data([key],[value])
예를 들어 $("div").data("a","aaaa")는 div 노드와 일치하는 각 요소에 데이터를 바인딩합니다.
추가로 이 글의 분석에는 jquery-1.7.2.js의 소스코드를 사용했습니다. 다운로드 주소:
http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js