자바스크립트 모듈 패턴분석_자바스크립트 스킬

Douglas Crockford는 이 규칙을 구현하는 유용한 싱글톤 패턴을 가르쳤으며 그의 패턴이 YUI 기반 애플리케이션에 도움이 될 것이라고 생각합니다. 더글라스는 이를 모듈 패턴이라고 부릅니다. 다음과 같이 작동합니다.

네임스페이스 개체 만들기: YUI를 사용하는 경우 YAHOO.namespace() 메서드를 사용할 수 있습니다. YAHOO.namespace("myProject"); 이렇게 하면 빈 myProject 개체가 할당됩니다. YAHOO의 구성원입니다(myProject가 이미 존재하는 경우 덮어쓰지 않습니다). 이제 YAHOO.myProject의 구성원을 추가할 수 있습니다.
익명 함수 반환 값을 네임스페이스 객체에 할당합니다.
YAHOO.myProject.myModule = function () {
return {
myPublicProperty: "저는 YAHOO.myProject.myModule.myPublicProperty라고 합니다. ";
myPublicMethod: function () {
YAHOO.log("YAHOO.myProject.myModule.myPublicMethod로 액세스했습니다.");
}
};
}( ; The myPublicMethod의 개체입니다. 이 익명 함수가 반환되자마자 반환된 개체는 YAHOO.myProject.myModule로 액세스됩니다.

익명 함수에서는 return 문 앞에 "private" 메서드와 변수를 추가합니다. 지금까지는 myPublicProperty와 myPublicMethod를 YAHOO.myProject.myModule에 직접 할당했습니다. 또한 이 패턴은 return 문 앞에 일부 코드를 배치할 때 향상된 유틸리티를 지원합니다.
YAHOO.myProject.myModule = function () {
//"Private" 변수:
var myPrivateVar = "YAHOO.myProject.myModule 내에서만 접근할 수 있습니다."
// Private 메소드:
var myPrivateMethod = function () {
YAHOO.log("YAHOO.myProject.myModule 내에서만 액세스할 수 있습니다.")
}

return {
myPublicProperty: "YAHOO.myProject.myModule.myPublicProperty로 액세스할 수 있습니다."
myPublicMethod: function () {
YAHOO.log("YAHOO.myProject.myModule.myPublicMethod로 액세스할 수 있습니다." );
//myProject에서 개인 변수 및 메소드에 액세스할 수 있습니다.
YAHOO.log(myPrivateVar);
YAHOO.log(myPrivateMethod())
//myPublicMethod의 기본 범위는 myProject입니다. "this"를 사용하여 공개 멤버에 액세스할 수 있습니다.
YAHOO.log(this.myPublicProperty);
}
};
}()
위 코드에서는 익명 함수에서 두 개의 멤버가 있는 객체를 반환합니다. YAHOO.myProject.myModule 내에서는 각각 this.myPublicProperty 및 this.myPublicMethod를 사용하여 액세스할 수 있습니다. YAHOO.myProject.myModule 외부에서 공개 멤버는 YAHOO.myProject.myModule.myPublicProperty 및 YAHOO.myProject.myModule.myPublicMethod를 사용하여 액세스할 수 있습니다.
개인 변수 myPrivateProperty 및 myPrivateMethod는 익명 함수 자체 또는 반환된 개체의 멤버만 액세스할 수 있습니다. 익명 함수는 즉시 실행되고 종료되지만, 함수에 로컬인 변수는 함수가 반환된 후에도 유지된다는 규칙인 클로저의 힘에 의해 여전히 유지됩니다. YAHOO.myProject.myModule에 필요한 두 개의 개인 변수는 삭제되지 않습니다.

이 패턴을 연습해보세요. 이 패턴의 일반적인 적용 사례를 살펴보겠습니다. 목록이 있고 목록의 일부 항목을 끌 수 있다고 가정해 보겠습니다. 드래그가 적용되는 항목에는 드래그 CSS 클래스가 있습니다.

1개

2개

3개 items Item