jQuery 객체 확장 시 멤버 변수 확장 방법 및 it_jquery 구현 방법

먼저 코드를 살펴보겠습니다.

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

jQuery.fn.extend(
{
myOwnMember: 3,
getMyOwnMember: function () { return this.myOwnMember; },
setMyOwnMember: function (v) { this.myOwnMember = v; return this.myOwnMember; }
}
)

$("body").myOwnMember; //3
$("body").getMyOwnMember();
$("body" ).setMyOwnMember(4); //4
$("body").getMyOwnMember() //3

이 코드는 myOwnMember를 확장합니다. jQuery 객체에 대해 getMyOwnMember 및 setMyOwnMember 함수는 각각 myOwnMember 값을 반환하고 설정하는 데 사용됩니다. 하지만 setMyOwnMember가 작동하지 않는 것을 볼 수 있습니다. getMyOwnMember를 다시 실행하면 초기 값이 반환됩니다. 왜 이런가요? 그 이유는 $("body")가 매번 새로운 객체를 생성하므로 $("body")의 myOwnMember가 매번 초기 값이기 때문입니다. 코드를

으로 변경하면 코드를 복사합니다. 코드는 다음과 같습니다.

jQuery .fn.extend (
{
myOwnMember: 3,
getMyOwnMember: function () { return this.myOwnMember; },
setMyOwnMember: function (v) { this.myOwnMember = v; return this .myOwnMember; }
}
);

var body = $("body")
body.myOwnMember() // 3
body.setMyOwnMember(4); //4
body.getMyOwnMember(); //4

$("body")만 있기 때문에 이것이 우리가 원하는 효과입니다. 한 번 생성되면 이후의 모든 참조는 body 변수를 통해 이루어집니다. 그러나 이 방법은 전역 범위에서 body 변수를 참조하는 것이 불가능하기 때문에 여전히 문제가 있습니다. 이 경우에는 여전히 $("body")를 사용합니다. jQuery 객체 확장 변수의 값은 어떻게 저장하나요? 해결책은 변수를 jQuery 객체에 저장하지 않고 dom 노드에 저장하는 것입니다. dom 노드에 생성된 jQuery 객체 수에 관계없이 모두 동일한 dom 노드를 가리킵니다. 따라서 코드를 다음과 같이 변경합니다.

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

jQuery.fn.extend(
{
getMyOwnMember: function () { return this[0].myOwnMember; },
setMyOwnMember: function (v) { this[0].myOwnMember = v; return this[0].myOwnMember; }
}
);

$("body").getMyOwnMember(); //정의되지 않음
$("body").setMyOwnMember(4 ); //4
$("body").getMyOwnMember() //4