(5) JS 학습 노트 - JQuery 캐시 메커니즘

역사적 배경
개발 과정에서 항상 편리하기 때문에 상태 표지를dom 노드, 즉 HTML Element에 썼는데 단점:

순환 인용

데이터 직접 노출, 안전성?

사용자 정의 속성 탭을 추가하는 것은 브라우저에 무의미하다

데이터를 추출할 때 HTML 노드를 조작해야 한다

기본 목적:
낮은 결합 방식을 사용하여 DOM과 캐시 데이터를 연결할 수 있다
jQuery는 현재 두 가지를 지원합니다.
 •$("ele").data() 
 

 1     jQuery.fn.extend({

 2         data: function( elem, name, data ) {

 3             return jQuery.access( this, function( value )){

 4                 //   each   ，         dom  

 5                 this.each(function() {

 6                     

 7                 }  

 8             }

 9         }

10         },

11         ........

 
 •jQuery.data( element, key, value ) 
 

1     jQuery.extend({

2         acceptData: Data.accepts,

3         hasData: function( elem ){},

4        //     data_user.access       ，    elem  jQuery  

5         data: function( elem, name, data ) {

6             return data_user.access( elem, name, data );

7         },

8         ........

 
차이점:
 •jQuery.data( element, key, value ) 
모든 요소는 자신의 {key:value} 대상이 데이터를 저장하기 때문에 새 대상은 키가 같아도 원래 존재하는 대상 키에 대응하는value를 덮어쓰지 않습니다. 새 대상은 다른 {key:value} 대상에 저장되어 있기 때문입니다.
 •$("div").data("a","aaaa")
이것은 데이터를div 노드와 일치하는 요소에 귀속시킨다
 DEMO

<div id="test">data test</div>



var t1=$("#test");

var t2=$("#test");



//=======   =========  $(''").data()  

t1.data('a',1111);

t2.data('a',2222);



t1.data('a')  //  222222，   

t2.data('a')  //  222222



//=======   =========  $.data()  



$.data(t1,"b","1111")

$.data(t2,"b","2222")



$.data(t1,"b")   //  111111，    

$.data(t2,"b")   //  222222

Data 클래스의 설계

1 function Data() {

2     Object.defineProperty(this.cache = {}, 0, {

3         get: function() {

4             return {};

5         }

6     });

7     this.expando = jQuery.expando + Math.random();

8 }

 1     Data.uid = 1;

 2     Data.accepts = jQuery.acceptData;

 3 

 4     Data.prototype = {

 5         key: function() {},

 6         set: function() {},

 7         get: function() {},

 8         remove: function() {},

 9         hasData: function() {},

10         access: function() {}

11     }

12 

13 

14     var data_priv = new Data();

15     var data_user = new Data();

해결:
expando:
현재 데이터 캐시의 UUID 값을 노드의 속성으로 작성하여 지정된 요소에 연관된 다리를 형성하기 때문에 요소 자체에 이러한 속성이 있을 가능성이 적기 때문에 충돌을 무시할 수 있습니다.
모든 노드의dom[expando]의 값은 자체적으로 증가하는 변수 id로 설정하여 전체 국면의 유일성을 유지합니다
uid:
모든 uid는 elem 캐시 데이터에 대응합니다. 캐시 대상은 여러 개의namevalue (이름 값 쌍) 로 구성되고,value는 모든 데이터 형식이 될 수 있습니다. 
데이터를dom와 직접 연결하지 않기 위해서, 데이터를cache 대상에 저장하여 unlock=Data를 생성합니다.uid++; unlock 태그 번호는 unlock 태그 번호를 속성 값으로 $body 노드cache 캐시 대상에게 foo 데이터,this를 저장할 수 있는 새로운 공간을 부여합니다.cache[ unlock ] = {}; 마지막으로foo 데이터를cache에걸고cache[data]=value;