jQuery의 데이터 저장소와 expando 속성 사용

Question

jQuery를 사용하여 코드를 개발 중이며 특정 DOM 요소와 관련된 데이터를 저장해야합니다. 에 대해 다른 질문이 많이 있는데,은 html 요소로 임의의 데이터를 저장하는 것이지만, 다른 옵션보다 한 가지 옵션을 선택하는 이유에 더 관심이 있습니다.

극히 단순화 된 인수를 위해 "행"이라는 속성을 테이블의 각 행에 "흥미로운"것으로 저장하려고합니다.) (jQuery의 데이터를 사용하는 것입니다

$('.interesting-line').each(function(i) { this.lineNumber = i; }); 

옵션 2 :

옵션 1은 각 DOM 요소에의 expando 속성 (나는 용어 ​​'의 expando'올바르게 사용하고 희망)를 설정하는 것입니다 기능은 요소와 속성을 연관 :

$('.interesting-line').each(function(i) { $(this).data('lineNumber', i); }); 

내 샘플 코드의 다른 단점을 무시, 당신은 다른 이상 속성을 저장하는 하나 개의 수단을 선택하는 이유가 강한 이유는?

Answer 1

플러그인을 제작하는 경우 $.data을 사용해야합니다. 속성을 자주 저장해야하고 DOM을 쿼리 할 필요가 거의없는 경우 $.data을 사용하십시오.

var domElement = $('.interesting-line[lineNumber=' + lineNumber + ']').get(0); 

이 훨씬 더 :

내가 DOM은 DOM 요소 자체에 사용자 지정 특성을 저장하는쪽으로 경향이 내 모든 클라이언트 응용 프로그램에 대한 있도록 나중에 속성을 [] 선택기를 사용하여 조회 할 수 있습니다 가졌어요 각 항목에 대해 .data()이라는 호출 된 집합을 반복하는 것보다 읽기 쉽습니다. DOM 요소에서 작동하는 다른 타사 라이브러리와 종종 상호 작용하므로이 메커니즘을 통해 DOM 요소에 빠르고 쉽게 액세스하면 코드를 읽을 수 있습니다.

lineNumbers을 요소에 매핑하는 룩업 테이블을 저장하는 것만 큼 쉽지만 expando 속성 기법은 나중에 정리해야하는 DOM 요소에 대한 참조를 저장하지 않으므로 비교시 메모리가 누출되는 위험이 적습니다. 그것을받은 후

업데이트 5 년 후 그냥이 읽기 [잘 자격] downvote : 위의 파업을 텍스트를 무시하십시오. jQuery는 이 아니요 확장 속성 집합을 기반으로 DOM을 쿼리하고 잠시 동안 그렇게하지 않았습니다. 따라서 $.data을 사용하십시오. 실용적인 용도가 없다면 DOM을 오염시킬 이유가 없습니다.

Answer 2

$.data을 사용하면 DOM이 수정되지 않습니다. $.data을 사용해야합니다. 플러그인을 만드는 경우 $.data 구조에 다른 키/값 쌍으로 각 속성을 저장하는 대신 객체의 속성을 $.data에 저장해야합니다.

Answer 3

$.data을 사용하면 메모리 누출을 방지 할 수 있습니다.

IE에서 DOM 요소의 expando 속성에 javascript 개체를 할당하면 해당 링크를 통과하는주기가 가비지 수집되지 않습니다. javascript 객체가 dom 객체에 대한 참조를 보유하면 전체주기가 누설됩니다. 폐쇄로 인해 DOM 객체에 대한 숨겨진 참조로 끝나는 것은 완전히 가능합니다. 따라서 실현하지 못하면 누출 될 수 있습니다.

이러한주기가 형성되지 않도록 jQuery 데이터 스토어가 설정됩니다. 이 방법을 사용하면 메모리가 누출되지 않습니다. DOM 요소에 기본 요소 (문자열)를 넣기 때문에 예제가 누출되지 않습니다. 그러나 더 복잡한 객체를 놓으면 위험 할 수 있습니다.

$.data을 사용하면 걱정할 필요가 없습니다.