자바스크립트 네임스페이스 패턴

개인적으로 현재 주된 운영환경이 리액트나 뷰js를 사용하지 않는 환경으로 주로 네임스펭스 패턴으로 페이지마다 클래스를  만들어 사용하고 있는데 개인적으로 심플하고 이해하기 쉬워서 예제처럼 틀에 맞춰서 잘 사용하고 있다.

 

javascript 에서 함수 혹은 변수객체를 다룰때 중복된 name 사용으로 인한 문제를 방지하기 위해 주로 namespace 방법이 사용된다. 이는 global 영역에 객체 고유의 영역을 지정하고 변수와 함수 할당을 해당 namespace 하위로 두게 하여 중복된 name 으로 인한 오류를 피하는 방법이다.

 

각 페이지마다 매개변수로 window객체와 document객체를 받는 즉시실행함수를 선언하고

(function(W,D){  ..  }(window,document)); 

그 안에 네임스페이스페턴에 맞춰 글로벌 영역인 window에 객체를 지정한 뒤 객체의 속성과 매서드를 정의하는 형태로 스크립트 파일을 생성하고 있다.

 

// window, document 객체를 받아서 즉시실행 함수가 실행됨
(function(W,D){
	// `namespace 패턴`, window객체에 글로벌 객체를 선언 
	W.myApp = W.myApp || {};

	$(document).ready(function(){
		myApp.event.setUIEvent();

		myApp.request.doReqMyDataList(0,10,myApp.ui.gridMyDataList);
	});
	
	//UI 내용작성 
	myApp.ui = {			
			currentPage : 1,
			
			previewData : function(){
				console.log("프리뷰");
			},

			gridMyDataList : function(list){
				console.log("데이터 리스트 그리기");
				console.log(list);
			},
	};
	
	//AJAX 내용작성
	myApp.request = {
			doReqMyDataList : function(startIdx,resultCnt,callback){
				var options = {
						isBeforSend : false,
						params : {
							startIdx : startIdx,
							resultCnt : resultCnt
						}
				};
				
				
				$ajax.requestApi(contextPath + "/api/dataList.do",options,function(res){
					switch(parseInt(res.errCd)){
						case 0 : 
							if(res.result.length > 0){
								callback(res.result);
							}
							break;
						case -100 : 
								console.log(res.errMsg);
							break;
						default : 
							break;
					}
				});
			}
			
	};
	
	//EVENT 힌들러
	myApp.event = {			
			setUIEvent : function(){
				$("#encoding_type").off().on("change",function(){
					myApp.ui.previewData();
				});
			}
	};
	
	myApp.data = {
			inputCoord : [
		        { value : '5180', label : 'TM 서부 (5180)' },
		        { value : '5181', label : 'TM 중부 (5181)' },
		        { value : '5183', label : 'TM 동부 (5183)' },
		        { value : '5184', label : 'TM 동해 (5184)' },
		        { value : '5185', label : 'TM 서부 (5185)' },
		        { value : '5186', label : 'TM 중부 (5186)' },
		        { value : '5187', label : 'TM 동부 (5187)' },
		        { value : '5188', label : 'TM 동해 (5188)' },
		        { value : '4326', label : '경위도 WGS84 (4326)' },
		        { value : '4166', label : '경위도 WGS84 (4166)' },
		        { value : '5178', label : 'KATEC (5178)' }
		    ]
	};
	
}(window,document)); // 즉시함수 실행 시 인자로 indow, document 객체를 넘겨준다.

 

자세한 내용은 링크를 참조.

참고 : https://devyj.tistory.com/9

즉시실행함수 (Immediately-invoked function expression)