Javascript_javascript 기술의 모듈 모드

Douglas Crockford는 이 규칙을 구현하는 유용한 싱글톤 패턴을 가르쳤으며 그의 패턴이 YUI 기반 애플리케이션에 도움이 될 것이라고 생각합니다. 더글라스는 이를 모듈 패턴이라고 부릅니다. 다음과 같이 작동합니다.
1. 네임스페이스 객체 생성: YUI를 사용하는 경우 YAHOO.namespace() 메서드를 사용할 수 있습니다. YAHOO.namespace("myProject"); 이는 A인 빈 myProject 객체를 할당합니다. YAHOO 회원(myProject가 이미 존재하는 경우 덮어쓰지 않음) 이제 YAHOO.myProject의 구성원을 추가할 수 있습니다.
2. 네임스페이스 객체에 익명 함수 반환 값 할당:

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

YAHOO.myProject.myModule = function () {
return {
myPublicProperty: "YAHOO.myProject.myModule.myPublicProperty로 액세스됩니다.
myPublicMethod: function ( ) {
YAHOO.log("YAHOO.myProject.myModule.myPublicMethod로 액세스했습니다.");
}
}(); // 이 대괄호는 익명 함수를


닫는 중괄호와 괄호()가 있는 마지막 줄에 주목하세요. 이 표기법을 사용하면 익명 함수가 즉시 실행되어 myPublicProperty 및 myPublicMethod가 포함된 개체가 반환됩니다. 이 익명 함수가 반환되자마자 반환된 개체는 YAHOO.myProject.myModule로 액세스됩니다.

3. 익명 함수에서 return 문 앞에 "private" 메서드와 변수를 추가합니다. 지금까지는 myPublicProperty와 myPublicMethod를 YAHOO.myProject.myModule에 직접 할당했습니다. 또한 이 패턴은 return 문 앞에 일부 코드를 배치할 때 향상된 유틸리티를 지원합니다.

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

YAHOO.myProject.myModule = 함수() {

//"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에서 액세스할 수 있습니다. private 변수 및 메소드
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이 요구하는 한 두 개의 개인 변수는 삭제되지 않습니다.

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

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

• 항목 1개 < /li>
  
• 2개 항목
;

<script> <br>YAHOO.namespace("myProject") <br>YAHOO.myProject.myModule = function () { <br>// YUI 유틸리티: <br>var yue = YAHOO.util.Event, <br>yud = YAHOO.util.Dom; <br>//Private 메소드 <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>}()//위 코드가 실행되었으므로 init 메소드에 즉시 액세스할 수 있습니다: <br></script>


이것은 의도적으로 자세히 설명한 것입니다. 이런 식으로 하면 의심할 여지 없이 더 컴팩트하게 만들 수 있을 것입니다. 이 패턴은 프로젝트가 더욱 복잡해지고 API가 증가함에 따라 확장됩니다. 이러한 방식으로 전역 네임스페이스를 피하고 외부에서 액세스 가능한 API 메서드를 제공하며 보호되거나 "개인" 데이터 및 메서드를 지원합니다.

[1]원문:
《자바스크립트 모듈 패턴》

. 이것은 YUI 블로그에 있으며 일부 장소에서는 공개되지 않을 수 있습니다. 영어 재판본을 검색하거나 검색 엔진 캐시를 사용하여 볼 수 있습니다.
• [2]"JavaScript 모듈 패턴 - JavaScript를 위한 모듈 패턴"
• 다른 사람의 번역입니다. 많이 참고했는데 읽기 불편한 것 같습니다. 이 글을 쓴 이유는 물론 이 글이 YUI를 배우기 위한 가장 기본적인 글이기 때문입니다. 전체 YUI 모듈 모델은 이에 기초하고 있습니다.
• 원본 주소: http://dancewithnet.com/2007/12/04/a-javascript-module-pattern/