Javascript 모듈화 해서 사용하기

common.js 등의 파일로 공통함수를 작성 할 때, 가독성을 높이기 위해 객체를 모듈화 하여 사용하는 기본 템플릿.

 

1. Class 처럼 생성자로 초기화 하여 사용하기

   
   

   commonUtil.js

   // 생성자
   const CommonUtil = function(obj) {
     for(let key in obj) {
       this[key] = obj[key];
     }
     this.init(obj);
   };
   
   // 공통변수
   CommonUtil.prototype = {
     commonData : {},
     userInfo: null,
     PAGING_SIZE: 10	
   };
   
   CommonUtil.prototype.init = function(obj) {
     // TODO
     //this.submit();
   };
   
   CommonUtil.prototype.submit = function(url, param) {
   
     var form = document.createElement("form");
     form.setAttribute("method", "post");
     form.setAttribute("action", url);
     document.body.appendChild(form);
   
     // 옵션
     var input_id = null;
     for (var i = 0; i < param.length; i++) {
       input_id = document.createElement("input");
       input_id.setAttribute("type", "hidden");
       input_id.setAttribute("name", param[i].id);
       input_id.setAttribute("value", param[i].value);
       form.appendChild(input_id);
     }
   
     form.submit();
   };

    

   init.html

   <script src="/resources/js/commonUtil.js"></script>
   <script type="text/javascript">
   var commonUtil;
   
   $(document).ready(function() {
   
     // 변수 세팅
     commonUtil = new CommonUtil(
       userInfo: {uid: 'userid', uname: 'Hailey', grade: 'A'}
     });
   
     commonUtil.submit(userInfo);
   });
   
   </script>

    

    

2. 선언하여 바로 사용하기

   
   

   commonUtil2.js 

   var commonUtil = (function() {
     // attribute
     var userInfo = {};
     
     // private function ...
     
     return {
       init: function(obj){
         this.userInfo = obj.userInfo;
       },
       submit: function(obj){
       },
       
       /** 
         selector: 콤보박스 셀렉터
       , start: 시작 값
       , end: 종료 값
       , init: 기본 값
       , order: desc, asc
       , diff: 증감
       */
       appendOptionNum: function(selector, start, end, init, order, diff){
         var $target = $(selector);
         if( !$target ) return;
         if( !$target.is("select") ) return;
   
         if(!init) init = start;
         if(!diff) diff = 1;
   
         if( order == 'desc' ){
           for (var i = start; i >= end ; i-=diff) {
             $(selector).append( '<option value="'+i+'" '+(init==i?'selected':'')+'>'+i+'</option>' );
           }
   
         }else{
           for (var i = start; i <= end ; i+=diff) {
             $(selector).append( '<option value="'+i+'" '+(init==i?'selected':'')+'>'+i+'</option>' );
           }
         }
       },
   
       appendMonths: function(selector){
         var $target = $(selector);
         if( !$target ) return;
         if( !$target.is("select") ) return;
   
         commonUtil.appendOptionNum(selector, 1, 12);
       },
       
       ajaxSync: function(url, jsonData, callback, fallback) {
         var config = {
           url : url,
           async : false,
           type : "POST",
           data : jsonData ? JSON.stringify(jsonData) : null,
           dataType : "json",
           contentType : "application/json; charset=utf-8",
           success : callback,
           error : fallback
         };
   
         $.ajaxSetup(config);
         $.ajax();
   
         config = {
           url : null,
           type : "GET",
           data : null,
           async : true,
           dataType : null,
           contentType : "application/x-www-form-urlencoded",
           success : null
         };
         $.ajaxSetup(config);
       }
   
     }
   })();

    

   init2.html 

   <script src="/resources/js/commonUtil.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {
     commonUtil.init(obj);
     commonUtil.search(userInfo);
     
     commonUtil.userInfo // undefined ! return 으로 정의해줘야 사용가능.
   });
   
   </script>