sitelink1  
sitelink2  
sitelink3  
sitelink4 http://1 
extra_vars4 ko 
extra_vars5 http://faidcy.tistory.com/92 
extra_vars6 sitelink1 
Module Pattern은 작년 6월에 이야기가 나온것이다..
작년 6월이라하면... 한참 ASP가지고 씨름을 하고 있는... 그야말로 초보의 생초보...

프로그램의 개념도 안가지고 있고 그저 단순히 Copy & Paste 만 죽어라 하고 있을때다..
Javascript 공부는 하고 있었지만 그 실력이라는 것은 그야말로 최하급..

그런그때 이야기가 나온것을 나는 2달전에야 이런 패턴이 있다는것을 알았고
(ExtJs 공부하면서..물론 prototype.js 1.6.0 버전에도 있다 그 전에도 있나?)
이것이 Eric씨가 A JavaScript Module Pattern 이라고 지었다는것을 어제 알았다...

아무튼 내가 얼마나 시대에 뒤떨어져 살아가는지 충분히 깨닳게 해준 글이었던거 같다.

그래서 A JavaScript Module Pattern 을 정리해 보고자 한다.

기존에 클래스를 만드는 방식은
 
01.var Hoge = function (){ 
02.    this.name = name; 
03. this.tall = tall; 
04.   
05.Hoge.prototype = { 
06.     alertA: function() { 
07.          alert(this.name);   
08.          alert(this.tall); 
09.     
10.
11.var hoge = new Hoge('홍길동','180cm'); 
12.hoge.alertA();

위와 같았다.

위와 같은 표기는 Javascript 에서 클래스를 만드는 대표적인 방법이다.
생성자와 메소드로 나뉘어서 클래스화 하면 보기에도 좋고 소스가 깔끔해진다.

하지만 Javascript 에서 무분별하게 new 연산자를 난발하는 것은 메모리를 많이 잡는다.
new 연산자로 인스턴스를 만들게 되면 prototype 오브젝트를 쓸데없이 전부 가져가게 되는 것이다.
(new 연산자의 낭비에 관해서는 다음 포스팅에)

이로인해 YUI에서는 (ExtJs도) 싱글톤 패턴을 지향한 Javascript Module Pattern 이라는 것을 쓴다.
계속 보자..

1. 네임스페이스 오브젝트를 만들자.
    YUI나 ExtJS에서는 namespace 라는 메소드가 있어 YAHOO 오브젝트와 Ext 오브젝트에 원하는 이름의 오브
   젝트를 만들어준다.
   말이 namespace 이지 그냥 빈 오브젝트이다.
   원래는

1.YAHOO.myProject.myModule = function () {

2.          return  {
3.               myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.";
4.               myPublicMethod: function () {
5.                    YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
6.               }
7.          };
8.}(); // 이곳의 괄호는 익명함수의 return 문을 실행시킨다.


마지막 줄의 괄호()는 끝임을 보강한다. 이 기호는 익명함수  return 안의 오브젝트 myPublicProperty 와 myPublicMethod를 즉시 실행시킨다. 익명함수의 return들과 같이 YAHOO.myProject.myModule의
return 오브젝트와 같다.

3. “private” 메소드 그리고 변수는 익명함수에서 return 문 앞에 쓴다.

 
01.YAHOO.myProject.myModule = function () {
02.  
03.  //"private" variables:
04.                var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";
05.  
06.  //"private" method:
07.                var myPrivateMethod = function () {
08.  YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
09.                 }
10.  
11.  return  {
12.                             myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
13.               myPublicMethod: function () {
14.                             YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
15.  
16.  //Within myProject, I can access "private" vars and methods:
17.  YAHOO.log(myPrivateVar);
18.  YAHOO.log(myPrivateMethod());
19.  
20.  //The native scope of myPublicMethod is myProject; we can
21.  //access public members using "this":
22.  YAHOO.log(this.myPublicProperty);
23.                               }
24.  };
25.}();

 



위와같이 Private 메소드와 변수를 선언할 수 있다.
코드 블럭안의 함수의 return 문에 2개 멤버의 오브젝트를 가진다.
이 멤버들은 YAHOO.myProject.myModule 에서 this.myPublicProperty 그리고 this.myPublicMethod 로 주소를 갖는다.
외부에서 접근할 수 있는 Public 멤버들의 접근은
YAHOO.myProject.myModule.myPublicProperty and YAHOO.myProject.myModule.myPublicMethod.
이다.

Private 변수는 myPrivateProperty 그리고 myPrivateMethod 로서 오직 익명 함수 그자신 안의 return 오브젝트 멤버에서 접근가능하다.
그것은 강력한 closure를 통하여 익명함수의 결과와 즉시 실행에도 불구하고 함수의 return 후에 로컬 변수의 유지를 제한한다. YAHOO.myProject.myModule이 그것들을 필요로 하는 것처럼 2개의 private변수들을 없애지 않는다.
번호 제목 글쓴이 날짜 조회 수
166 [펌] 아사페릴의 사생활 - Code Conventions for the JavaScript Programming Language 황제낙엽 2009.04.02 595
165 자바스크립트 내장 함수 활용하기 황제낙엽 2005.04.25 595
164 CORS 의 내용과 이에 대한 우회 방안들 file 황제낙엽 2021.12.05 591
163 Java 버전의 JavaScript 엔진 라이노 (Rhino) 황제낙엽 2008.07.14 588
162 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 583
161 정규식 정리 황제낙엽 2008.11.24 583
160 XP 에서 input type=text 와 input type=password 의 사이즈가 틀리게 보일때 황제낙엽 2004.08.04 583
159 자바스크립트(Javascript) escape, encodeURI, encodeURIComponent 인코딩 함수 황제낙엽 2021.04.27 582
158 팝업창을 다시 띄우지 않는 소스 황제낙엽 2005.07.16 582
157 [펌] 아사페릴의 사생활 - Javascript의 constructor 와 prototype 황제낙엽 2009.04.02 580
156 JAVASCRIPT REFERENCE 파일 file 황제낙엽 2005.11.22 576
155 비동기프로그래밍 - 콜백함수(Callback function) file 황제낙엽 2020.08.26 575
154 무지개링크 (rainbowlink) file 황제낙엽 2005.07.16 572
153 [JavaScript Tutorials] Error handling in JavaScript using try/catch/finally - The Error object and throwing your own errors (해석중) 황제낙엽 2009.04.10 571
152 State of ECMAScript 4 ('07 12) 황제낙엽 2008.07.14 569
151 Navigator 객체란? 황제낙엽 2011.02.22 568
150 익스플로러용 스크립트 디버거 (Script Debugger for Windows NT 4.0 and Later) 황제낙엽 2008.12.11 568
149 자바스크립트의 데이터 타입과 변수 황제낙엽 2008.08.06 568
148 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 567
147 감추기, 보이기 화면 예제 황제낙엽 2008.04.14 566