jQuery 6부 읽기: 캐시 데이터 소개

많은 학생들은

코드 복사와 같은 프로젝트의 HTMLElement 속성에 데이터를 저장하는 것을 좋아합니다. 코드는 다음과 같습니다.

Test

<script> <br>div.getAttribute('data'); // 일부 데이터 <br></ script&gt ; <BR></div> <BR>페이지의 div에 사용자 정의 속성 "data"와 값 "some data"를 추가합니다. 후속 JS 코드에서 이를 얻으려면 getAttribute를 사용하십시오. <BR>jQuery에서는 데이터를 저장/삭제하기 위해 1.2.3부터 data/removeData 메소드를 제공하고 있습니다. 1.6.1 코드 조각 <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="38220" class="copybut" id="copybut38220" onclick="doCopy('code38220')"><U>코드 복사 </U></a></span> 코드는 다음과 같습니다. </div><div class="codebody" id="code38220"> <BR>jQuery.extend( { <BR>cache: {}, <BR>// 주의해서 사용하세요. <BR>uuid: 0, <BR>... <BR>}) <BR></div> <BR>은 정적 필드를 추가합니다. jQuery.cache/jQuery.uuid/jQuery.expando 등을 포함한 jQuery/Methods에 다음은 캐싱에 사용되는 <BR>jQuery.cache 빈 개체를 소개합니다. 그 구조는 더 복잡합니다. <BR>jQuery.uuid는 고유한 숫자를 증가시킵니다. <BR>Math.random을 사용하여 생성된 jQuery.expando 문자열(숫자가 아닌 문자는 제거됨) HTMLElement 또는 JS 객체의 속성 이름 역할을 합니다. <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="16194" class="copybut" id="copybut16194" onclick="doCopy('code16194')"><U>코드 복사</U></a></span> 코드는 다음과 같습니다.</div><div class="codebody" id="code16194"> <BR>expando: "jQuery"( jQuery.fn .jquery Math .random() ).replace( /D/g, "" ), <BR></div> <BR>jQuery.noData JS 객체는 지정된 HTMLElement에 대한 데이터 메서드를 비활성화합니다. 임베디드, 애플릿 등이 있습니다. <BR>jQuery.hasData는 HTMLElement 또는 JS 객체에 데이터가 있는지 확인하는 데 사용됩니다. 참 또는 거짓을 반환합니다. 즉, 속성을 추가하기 위해 jQuery.data 메서드를 호출하면 true를 반환합니다. <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="55715" class="copybut" id="copybut55715" onclick="doCopy('code55715')"><U>코드 복사</U></a></span> 코드는 다음과 같습니다.</div><div class="codebody" id="code55715"> <BR><div>aa</div> <br> <script> <br>var div = document.getElementsByTagName('div')[0] <br>$.hasData(div); // false <br>$.data(div, 'name' ,'jack '); // true <br></script>

jQuery.acceptData는 요소가 데이터를 허용할지 여부를 결정하는 데 사용됩니다. true 또는 false 를 반환합니다. jQuery.data에서 사용됩니다.
jQuery.data 클라이언트 프로그래머에게 제공되는 메소드이기도 합니다.
1, 하나의 매개변수를 전달하고, 지정된 요소, 즉 thisCache에 첨부된 모든 데이터를 반환합니다. jQuery.data(el); // thisCache
2, 두 개의 매개변수를 전달하고, 지정된 속성값을 반환합니다. jQuery.data (el, 'name');
3, 세 개의 매개변수 전달, 속성 및 속성 값 설정 jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', { });
4, 4개의 매개변수를 전달합니다. 네 번째 매개변수인 pvt는 jQuery 라이브러리 자체에만 제공됩니다. 즉, jQuery._data 메서드에 true를 전달합니다. jQuery의 이벤트 모듈은 jQuery.data에 크게 의존하기 때문에 실수로 다시 작성하는 것을 방지하기 위해 이 버전에 추가되었습니다.
jQuery.removeData는 데이터를 삭제합니다.
위는 jQuery 데이터 캐싱 모듈에 대한 전반적인 개요입니다. 다음은 jQuery.data 메소드에 대한 자세한 설명입니다. jQuery.data는 JS 객체와 HTMLElement의 두 가지 유형의 객체에 대한 캐싱을 제공합니다.

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

// JS 객체에 대한 캐시 제공
var myObj = {}
$.data(myObj, 'name', 'jack')
$.data(myObj, ' name'); // jack
// HTMLElement

<script>var el = document.getElementById ('xx' ); <br>$.data(el, 'name', 'jack') <br>$.data(el, 'name'); 🎜><br> <br>내부 구현에도 차이가 있습니다. <br>1. JS 객체에 대한 캐시 제공 시 데이터가 JS 객체에 직접 저장됩니다. 캐시는 JS 객체입니다. 이때 JS 객체에 비밀리에 속성이 추가되며(jQuery16101803968874529044와 유사) 속성 값도 JS 객체입니다. 예를 들어<br> </div> <br><br><br>코드 복사<div class="codetitle"> <span><a style="CURSOR: pointer" data="19399" class="copybut" id="copybut19399" onclick="doCopy('code19399')"> 코드는 다음과 같습니다.<u></u> </a>var myObj = {}; 🎜>$ .data(myObj, 'name', 'jack'); </span>console.log(myObj) </div> <div class="codebody" id="code19399"> <br>myObj의 구조는 다음과 같습니다<br><br><br> </div> <br>코드 복사<br><div class="codetitle"> <span> 코드는 다음과 같습니다.<a style="CURSOR: pointer" data="46102" class="copybut" id="copybut46102" onclick="doCopy('code46102')"><u> </u>myObj = { </a>jQuery16101803968874529044 : { </span>name : 'jack ' </div>} <div class="codebody" id="code46102">} <br><br><br>문자열 "jQuery16101803968874529044"는 데이터 내에서 id로 명명됩니다(HTMLElement 요소의 ID가 아님). 실제로는 jQuery.expando입니다. 위에서 언급했듯이 jQuery.js가 페이지에 도입된 후 무작위로 생성됩니다. <br>2. HTMLElement에 캐싱을 제공하면 HTMLElement에 직접 저장되지 않습니다. 대신 jQuery.cache에 저장됩니다. 캐시는 jQuery.cache입니다. 이때 먼저 HTMLElement에 속성을 추가하고(jQuery16101803968874529044와 유사), 속성값은 숫자(1, 2, 3 증가)이다. 즉, HTMLElement에 일부 숫자만 저장되고 데이터가 직접 삽입되지는 않습니다. 이전 버전의 IE에서는 메모리 누수의 위험이 있을 수 있기 때문입니다. HTMLElement는 jQuery.cache와 어떻게 연결되나요? 아니면 신분증. 방금 속성 값 번호가 ID라고 언급했습니다. 예를 들어<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="65992" class="copybut" id="copybut65992" onclick="doCopy('code65992')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code65992"> <br><div id="xx "> </div> <br><script> <br>var el = document.getElementById('xx'); <br>$.data(el, 'name', 'jack'); <br>console.log(el[jQuery.expando]); // 1 <br>console.log(jQuery.cache) // {1 : {name:'jack'}} <br></script> 🎜>

el에는 jQuery.expando 속성이 추가되고 값은 id이며 이 ID는 1에서 증가합니다. id는 jQuery.cache의 속성(키)으로 사용됩니다. 이러한 방식으로 HTMLElement는 jQuery.cache에 연결됩니다. 사진과 같이

jQuery.data에도 jQuery._data에서만 사용되는 네 번째 매개변수인 pvt가 있다는 사실을 알고 계셨나요?

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

// 내부용
_data: function( elem, name, data ) {
return jQuery.data( elem, name, data, true )
},

jQuery._data는 명명에서 지정합니다. Private이므로 jQuery를 사용하는 클라이언트 프로그래머는 이 메서드를 호출하면 안 됩니다. jQuery의 API 문서에도 이를 공개하지 않습니다.
jQuery의 데이터 캐싱 모듈은 1.2.3에서 1.6.1까지 거의 모든 버전에서 변경되었습니다. jQuery._data는 클라이언트 프로그래머가 기본 모듈을 덮어쓰거나 다시 쓰는 것을 방지하기 위해 제안되었습니다. 예를 들어, 모듈이 다시 작성되면 jQuery 이벤트 모듈의 이벤트 핸들러는 jQuery.data를 사용하여 저장됩니다. 그러면 이벤트 모듈이 마비됩니다. 따라서 pvt 매개변수와 jQuery._data 메소드가 특별히 추가되었습니다.
그러나 고의로 파괴하고 싶다면 여전히 파괴할 수 있습니다. 다음과 같습니다

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

테스트< ;/div>
<script> <br>$('#xx').click(function(){ <br>alert('click'); <br>}); <br>// 문 1 <br>$.data($('#xx')[0], 'events', '', true) <br>// 문 2 <br>//$._data( $('#xx')[0], 'events', ''); <br></script>

div[id=xx]를 클릭하면 클릭 이벤트가 실행되지 않습니다. .
jQuery.data 설정(집합) 데이터 캐시 과정 전체가 이렇으니 이해해주세요. 데이터를 가져오는 과정은 이해하기 쉽습니다. 반복되지 않습니다.
마지막으로 zChian.js에 zChain.data/removeData 메소드를 추가하겠습니다. 왜냐하면 "미니 버전"이고 HTMLElement에 데이터 캐싱만 추가하기 때문입니다. 주의하시기 바랍니다.

관련:

http://msdn.microsoft.com/en-us/library/Bb250448
http://bugs.jquery.com/ticket/6807
zChain-0.6.js