jQuery 구현 원리의 시뮬레이션 코드 -2 데이터 part_jquery

물론 이 데이터는 속성을 통해 접근해야 하지만, 속성이 여러 개인 경우에는 어떻게 될까요? , 여러 속성을 정의하시겠습니까? , 속성의 이름은 무엇입니까? 다른 속성과 충돌합니까?
jQuery에서는 DOM 객체를 위해 확장된 프라이빗 데이터를 객체로 표현할 수 있고, 여러 데이터를 이 객체의 여러 속성으로 표현할 수 있습니다. 이 확장된 데이터 객체를 기존의 다른 속성과 충돌하지 않고 DOM 객체를 통해 찾을 수 있도록 jQuery에서 확장된 객체의 속성 이름을 나타내는 Expando 상수를 사용하고 Expando의 값을 계산합니다. 이 속성의 값은 확장 개체를 찾는 데 사용되는 키 값입니다.
예를 들어, Expando의 값을 "jQuery1234"로 정의한 다음 "jQuery1234"라는 속성을 각 DOM 객체에 추가할 수 있습니다. 이 속성의 값은 키가 될 수 있습니다(예: 1000).
jQuery 객체의 캐시는 모든 객체 확장 객체를 저장하는 데 사용됩니다. 이 객체는 사전으로 간주될 수 있으며 속성 이름은 키 값이며 해당 값은 확장 데이터 객체입니다.
즉, jQuery 객체의 캐시에는 멤버 1000이 있을 것이고, 이 멤버가 참조하는 객체는 DOM 객체 1000번의 프라이빗 확장 객체입니다. 회원 1000의 개인 데이터가 이 개체에 저장됩니다.
DOM 객체가 확장된 데이터를 가져와야 하는 경우 먼저 객체의 Expando 속성을 통해 키 값을 얻은 다음 이 키 값을 사용하여 jQuery.cache에서 자체 확장 객체를 얻은 다음 데이터를 읽고 씁니다. 확장 개체.

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

///
// 일반 메소드
function now() {
return (new Date).getTime();
}
// 확장된 속성 이름 데이터, 기존 속성과의 충돌을 피하기 위해 동적 생성
var Expando = "jQuery" now(), uuid = 0, windowData = {}
jQuery.cache =
jQuery.expando = Expando ;
// 데이터 관리, DOM 객체에 대한 개인 데이터를 저장하고 저장된 데이터를 읽을 수 있습니다.
jQuery.fn.data = function (key, value) {
// Read
if (value === 정의되지 않음) {
return jQuery.data(this[0], key);
}
else { //
this.each(
function () {
jQuery.data(this, key, value);
}
);
}
}
// 데이터 제거 및 객체에 저장된 데이터 삭제
jQuery.fn .removeData = function (key) {
return this.each(function () {
jQuery.removeData(this, key);
})
}

//저장 data for the element
jQuery.data = function (elem, name, data) { // #1001
// 데이터를 저장할 요소의 키 값을 가져옵니다
var id = elem[expando], 캐시 = jQuery.cache, thisCache
// ID가 없으면 값을 얻을 수 없습니다.
if (!id && typeof name === "string" && data === undefine) {
return null ;
}
// 요소의 고유 ID를 계산합니다.
// 요소의 고유 키 값을 계산합니다.
if (!id) {
id = uuid
}
// 저장되지 않은 경우
if (!cache[id]) {
elem[expando] = id // 요소에 키 값을 저장합니다.
cache[id] = {}; // 요소에 해당하는 값을 저장하기 위해 캐시에 객체를 생성합니다.
// 이 요소의 데이터 객체를 가져옵니다.
thisCache = 캐시[id]// 정의되지 않은 값으로 명명된 캐시 재정의 방지 ​​
// 값 저장
if (data !== undefine) {
thisCache[name] =
}
// Return 해당 값
return typeof name = == "string" ? thisCache[name] : thisCache;
}
//저장된 데이터 삭제
jQuery.removeData = function(elem, name) / #1042
var id = elem[expando], 캐시 = jQuery.cache, thisCache = 캐시[id]
// 요소 데이터의 특정 섹션을 제거하려는 경우
if (name ) {
if (thisCache) {
// 캐시 데이터 섹션 제거
delete thisCache[name]
// 모든 데이터를 제거한 경우 요소의 캐시를 제거합니다
if (jQuery.isEmptyObject(thisCache) ) {
jQuery.removeData(elem);
}
}
// 그렇지 않으면 요소의 모든 데이터를 제거하려고 합니다
} else {
delete elem[jQuery.expando];
// 데이터 캐시를 완전히 제거합니다.
delete 캐시[id];
}
// 객체가 비어 있는지 확인합니다.
jQuery.isEmptyObject = function ( obj) {
// 요소의 속성을 탐색하고, 속성이 필요한 경우에만 false를 반환하고, 그렇지 않으면 true를 반환합니다.
for (obj의 var name) {
return false;
}
return true;
}
// 함수인지 확인
jQuery.isFunction = function (obj) {
var s = toString.call( obj);
return toString.call(obj) == "[object Function]";
}



다음 스크립트는 확장 데이터를 저장하거나 읽을 수 있습니다. 개체.

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

// 数据操작품
$("#msg").data("name", "Hello, world.");
alert($("#msg").data("이름"));
$("#msg").removeData("이름");
alert($("#msg").data("이름"));