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

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

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

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

?

1 2 3 4 5 6 7 8 9 10

<script type="text/javascript"> yepnope([{   load: [ '/js/jquery/1.10.2/jquery.min.js' ],              complete: function() {       // 코드.     } }]); </script>

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

 

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script type="text/javascript"> var jobs = [];   $(document).ready(function(){      // code    var initilizer, _i, _len;    for (_i = 0, _len = jobs.length; _i < _len; _i++) {      initilizer = jobs[_i];      $.proxy(initilizer, this)();    }   }); </script>   <script type="text/javascript"> jobs.push(function(){   // code 1 }); </script>

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