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

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

예를 들어 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() 함수를 호출할 수 있다.

동적 HTML 페이지에서 jQuery 사용팁:proxy

jQuery 를 대부분의 웹 페이지들은 다음과 같은 코드를 갖는다.

• $( document ).ready( handler ) 
• $().ready( handler ) (this is not recommended) 
• $( handler )

개인적으로 많이 사용하는 비동기 방식의 조건부 리소스 로더인 yepnope 을 같이 사용하는 경우 역시 다음과 같은 코드를 갖는다.

이경우 아주 불편한 문제가 발생되는데 모든 jQuery 관련 스크립트들은 반듯이 위와 같이 ready() 해당하는 부분에 위치해야 하다는 것이다. HTML 페이지가 프로그램에 의하여 동적으로 생성되고 스크립트 역시 그러하다면 ...어려운 문제가 된다. 이해를 돕기위하여 개인적으로 동적 HTML 페이지를 생성할 때 sitemesh 라는 것을 사용하여 기본적인 레이아웃을 구성하고 내용 부문은 데이터베이스에서 가져와 구성하는데 이때 HTML 소스 여러 곳에서 필요에 따라 jQuery 를 사용할 필요성이 발생된다.

 

이 경우 간단한 해결방법은 jQuery 의 proxy() 를 사용하는 것이다. 다음의 코드를 보자.

jobs 배열에 실행할 함수들이 넣어지고 DOM 객체들이 모두 로드되면 ready 함수가 실행된다. 이때 proxy 함수를 사용하여 jobs 에 넣어진 함수들을 순차적으로 실행하는 것이다. 그다지 필요없는 기능일 수도 있지만 동적으로 HTML 페이지를 생성하는 경우라면 아주 유용하게 사용할 수 있것이다.