Javascript_YUI.Ext 관련 모듈 모드

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로 액세스했습니다.");
}
};
}( ); // 이 대괄호는 익명 함수가 실행되고
을 반환합니다. 닫는 중괄호와 대괄호 ()가 있는 마지막 줄에 유의하세요. 이 표기법을 사용하면 익명 함수가 즉시 실행되어 myPublicProperty 및 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

이것은 의도적으로 자세하게 작성한 간단한 예입니다. 이렇게 하면 의심할 여지 없이 더 간결하게 작성할 수 있습니다. 이 패턴은 프로젝트가 더욱 복잡해지고 API가 증가함에 따라 확장됩니다. 이러한 방식으로 전역 네임스페이스를 피하고 외부에서 액세스 가능한 API 메서드를 제공하며 보호되거나 "개인" 데이터 및 메서드를 지원합니다. <script>src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script><script> <BR> YAHOO.namespace("myProject"); <BR> YAHOO.myProject.myModule = function () { <BR> //YUI实用程序的私有简写引用： <BR> var yue = YAHOO.util.Event, <BR> yud = YAHOO.util.Dom; <BR> //私有方法 <BR> var getListItems = function () { <BR> // 注意这个地方使用其他的私有变量，包括"yud"YAHOO.util.Dom的简写： <BR> var elList = yud.get("myList"); <BR> var aListItems = yud.getElementsByClassName( <BR> "draggable", //得到仅有CSS类"draggable"的项 <BR> "li", //仅返回列表项 <BR> elList //限定搜索改元素的子 <BR> ); <BR> return aListItems; <BR> }; <BR> //这个放回的对象将变成YAHOO.myProject.myModule: <BR> return { <BR> aDragObjects: [], //可对外访问的，存储DD对象 <BR> init: function () { <BR> //直到DOM完全加载好，才实现列表项可拖拽： <BR> yue.onDOMReady(this.makeLIsDraggable, this, true); <BR> }, <BR> makeLIsDraggable: function () { <BR> var aListItems = getListItems(); //我们可以拖拽的那些元素 <BR> for (var i=0, j=aListItems.length; i<j; i++) { <BR> this.aDragObjects.push(new YAHOO.util.DD(aListItems[i])); <BR> } <BR> } <BR> }; <BR> }(); <BR>//上面的代码已经执行，所以我们能立即访问init方法： <BR> YAHOO.myProject.myModule.init(); <BR> </script>[1]원문: "자바스크립트 모듈 패턴". 이것은 YUI 블로그에 있으며 일부 장소에서는 공개되지 않을 수 있습니다. 영어 재판본을 검색하거나 검색 엔진 캐시를 사용하여 볼 수 있습니다.

[2] "JavaScript 모듈 패턴 - JavaScript의 모듈 패턴" 다른 분의 번역입니다. 많이 참고했는데 읽기가 꽤 불편하네요. 한 가지, 물론 가장 큰 이유는 이 글이 YUI를 배우기 위한 가장 기본적인 글이고, 전체 YUI 모듈 모델이 이를 기반으로 하고 있기 때문입니다.