자바스크립트 배포 및 패키징

자바스크립트 배포 및 패키징

라이브러리 작성 후 마지막으로 해야 할 일은 보통 작성된 코드를 패키징하고 사용자들에게 배포하는 일일 것입니다.

하지만 스크립트 언어 특성상 배포된 코드의 전역변수 이름과 기존 코드의 전역변수 이름이 동일한 경우 나중에 로드된 코드가 이전 코드를 모두 덮어 버리는 현상이 발생하게 됩니다.

즉, CSS 코드와 마찬가지로 코드를 Cascading 해버린다는 뜻이며, 또한 이런 이유로 배포된 라이브러리가 정상적으로 동작하지 않게 됩니다.

이를 해결하기 위한 방법의 하나가 네임스페이스를 이용한 방법이며, 이는 현재까지 가장 널리 쓰이는 방법이기도 합니다.

아래 코드는 패키징에서 배포까지의 작업을 나열한 것입니다.

1. var NAVER = window.NAVER || {};
2. window.NAVER.ajax = window.NAVER.ajax || {};
3.  
4.  
5. window.NAVER.ajax = (function(doc, win){
6.    
7.     var xhr = getXhr()
8.       , version = '1.0.x'
9.       , agent = window.navigator.userAgent.toLowerCase();
10.    
11.     return new (function(){
12.        
13.         var t = function(){
14.            
15.             this.version = version;
16.        
17.             return this;
18.         };
19.        
20.         t.prototype = {
21.             get: get,
22.             post: post
23.         };
24.  
25.         return t;
26.  
27.     }())();
28.    
29.     function getXhr(){
30.  
31.         if (!window.XMLHttpRequest) return new ActiveXObject(agent.indexOf('msie 5') > -1 ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
32.         else if (window.XMLHttpRequest) return new window.XMLHttpRequest;
33.         else return null;
34.     }
35.  
36.  
37.     function get(){
38.         return this;
39.     }
40.  
41.  
42.     function post(){
43.         return this;
44.     }
45.  
46.  
47. })(document, window);
48.  
49.  
50. alert(window.NAVER.ajax.get().version); // 1.0.x

위와 같은 방법으로 패키징하며, 사용자들에 배포하게 됩니다.