자바 패키지 기법을 활용한 자바스크립트 컴포넌화

자바의 패키지 분류 방식을 자바 스크립트에 적용하는 것은 많은 도움이 된다. 자바 스크립트는 자체적으로 패키지 개념은 가지고 있지 않지만 객체의 프로퍼티를 활용하면 쉽게 패키지 개념을 구현할 수 있다.

예를 들어 common.ui 라는 이름의 패키지를 정의하고 싶다면,

var common = window.common = window.common || { };
common.ui = {};

개인적으로는 다음과 같이 JQuery.extend 함수를 사용하는 것을 더 선호한다.

$.extend(common, {ui:common.ui||{}});

그럼 더 나아가서 다음과 같은 패키지 구조를 생각한다.



 먼저 common.ui.core.js , common.ui.data.js 스크립트 파일을 생성한다.

common.ui.core.js

;(function($, undefined) {
 var common = window.common = window.common || { },
 extend = $.extend;

 extend(common, { 
  ui: common.ui || {} 
 });
})(jQuery);

common.ui.data.js

;(function($, undefined) {
 var ui = common.ui,
 extend = $.extend;

 extend(ui, { 
  data: common.ui.data || {} 
 });
})(jQuery);

이제 common.ui 패키지에 kendo 프레임워크의 DataSource 객체를 미리 정의된 프로퍼티 값으로 생성하는 datasource 라는 함수를 추가하여 보자. 기존의 common.ui.core.js 파일에 추가하여도 되고 별도의 파일을 생성하여도 무관한다.

;(function($, undefined) {
 var ui = common.ui,
 extend = $.extend;
 
 function handleAjaxError(xhr) {
  // do something
 }

 var DEFAULT_DATASOURCE_SETTING = {
  transport:{
   read:{
    type :POST,
    dataType : JSON
   }     
  },
  serverPaging: true,
  error:handleAjaxError, 
  pageSize: 10  
 };

 function datasource(url, options){  
  options = options || {};  
  var settings = extend(true, {}, DEFAULT_DATASOURCE_SETTING , options ); 
  if( defined(url) ){
   settings.transport.read.url = url;   
  }  
  var dataSource =  DataSource.create(settings);
  return dataSource;
 };

 
 extend (ui, {
  datasource : common.ui.datasource || datasource
 });

})(jQuery);

이제 HTML 에서 자바스크립트 파일을 선언하고 common.ui.datasource() 함수를 호출할 수 있다.