자바스크립트 강좌 10 - 모듈 과 네임스페이스

9. 자바스크립트 모듈 과 네임스페이스

 

1. 모듈 과 네임스페이스

1 - 1. 초기에는 간단한 스크립트에만 사용되던 언어가, 점차 웹 기술이 발전되며, 더욱 길고 복잡한 하나의 어플리케이션 형태가 되어 버렸습니다.

또한, 잘 만들어진 외부 프레임웍(Jquery, Prototype 등..)들이 하나하나 등장 하기 시작 했으며, 오늘날 대부분의 웹어플리케이션에서 기본 라이브러리로 도입하고 있습니다.

마지막으로 이와 같은 프레임웍에서 쓰이는 코드는 이 장에서 배우게 될 모듈구현 코드에 근간을 두고 있습니다.

1 - 2. 네임스페이스 생성 

모듈 작성시 중복 전역변수에 대한 문제는 가장 먼저 주의해야할 점중 하나 입니다.

자바스크립트는 타 OOP 언어와는 달리 언어적으로 네임스페이스 기능을 제공하고 있지 않습니다. 하지만 이를 해결하기 위한 방법으로 객체를 활용합니다.

1 - 3. 모듈사용 유 / 무 검사

1 - 4. 즉시 실행 함수 생성

1 - 5. 네임스페이스에서 심벌 가져오기

1 - 6. private, public 심벌

1 - 7. private 네임스페이스와 유효 범위로서의 클로저 

P.S 위의 [1 - 6], [1 - 7]에 대한 내용은 다른 섹션처럼 간단한 예제로 정리할 수 있는 부분이 아니기 때문에
개별 포스트로 정리하도록 하겠습니다.





2. 예제 코드

1. /*
2.  
3. 1. [1 - 2] 예제 코드
4.  
5. */
6.  
7. // 해당 네임스페이스가 존재하지 않는다면 새로 생성해서 반환한다.
8. function getNameSpace(ns)
9. {
10.     var ns = ns ? ns.split('.') : ''
11.       , parent = createObject(window, ns[0]);
12.  
13.     ns = ns.splice(1);
14.  
15.     for (var i = 0, length = ns.length; i < length; i++) {
16.         parent = createObject(parent, ns[i]);
17.     }
18.  
19.     return parent;
20. }
21.  
22. function createObject(p, n) {
23.     return p[n] = typeof p[n] === 'undefined' ? {} : p[n];
24. }
25.  
26. getNameSpace('a.b.c');
27.  
28. alert(a); // object
29. alert(a.b); // object
30. alert(a.b.c); // object
31.  
32. a.b.c = { name: 'a.b.c' };
33.  
34. alert(a.b.c.name); // 'a.b.c'

 

1. /*
2.  
3. 2. [1 - 4] 예제 코드
4.  
5. */
6.  
7. // 자바스크립트 실행시 아래와 같은 코드로 즉시 실행 함수를 만들어 각 모듈을 구성해 줍니다.
8. // 또한 모듈을 구성하는 가장 좋은 방법은 아래와 같이 정의된 직후 호출되는 익명함수속에 코드를 작성하는
   방법이 있습니다.
9.  
10.  
11. var o = (function(){
12.    
13.     // private valiade
14.     var x = 'x'
15.       , fn = function(){
16.         return this;
17.     };
18.  
19.     fn.prototype.getX = function(){
20.         return x;
21.     }
22.  
23.     return fn;
24.  
25. })();
26.  
27. alert(new o().getX()); // x
28.  
29. /*
30.  
31. 2. [1 - 5] 예제 코드
32.  
33. */
34.  
35. /*
36.  
37. 네임스페이스를 작성하다보면 코드 작성시 이름이 너무 길어지는 불편함을 볼 수 있습니다.
38.  
39. 위와 같은 불편함을 해소하기 위해 아래와 같이 각 네임스페이스에 대한 심볼을 구성해 주는 방법이 있습니다.
40.  
41. */
42.  
43. var o = window.a = function(){
44.     return this;
45. };
46.  
47.  
48. var o = {}
49.   , fn = function(){ return this; };
50.  
51. o.fn = fn.prototype = {
52.     x: 'x'
53. }
54.  
55.  
56. alert(o.fn.x); // x

 

참고서적: (자바스크립트 핵심 가이드)