David Kees씨가 Prototype을 이용한 JavaScript 파일 로딩에 대한 글을 썼습니다. 이는 DOM 엘리먼트가 사용가능한 이벤트 스크립트를 이용해 로딩 기능 기술을 구현한 것입니다.

그는 아쉬운 점을 해소하기 위해 그 기술을 사용했습니다:

이 사이트의 달력은 블로그에 관련된 정보를 보여주는 페이지에서만 나타납니다. 달력은 페이지를 모두 리로드하지 않고도 달만 바꿀 수 있도록 JavaScript로 개선되었습니다. 저는 이러한 개선기능들이 달력이 있는 어디서든 사용가능하게 하기 위해 두 가지 옵션을 생각해냈습니다:

  1. JavaScript를 필요로 하는 모든 페이지에 JavaScript 파일을 포함하는 코드를 직접 적는다. 좋은 방법이고, 예전부터 잘 되던 방식이지만, 사람들이 때때로 JavaScript가 필요한 새 페이지에 파일을 포함하는 것을 생각 못하거나 깜빡해버리는 경향이 있다.
  2. JavaScript가 필요해질 때 자동으로 파일을 포함할 수 있는 방법을 찾는다. JavaScript가 필요한 새 페이지를 추가할 때 파일을 포함하는 걸 기억해낼 필요가 없지만, 페이지가 로드되었을 때 JavaScript를 조금 더 오래 실행해야 한다.

다음은 구현 예제 코드입니다:

[code:js]
document.observe("dom:loaded", function() {
    var calendar = $("calendar");
    if(calendar) {
        var script = new Element("script", { type: "text/javascript", src: "/path/to/calendar.js" });
        document.observe("calendar:loaded", function() { new Calendar(calendar); });
        $$("head")[0].insert(script);
    }
});

from Lazily load functionality via Unobtrusive Scripts on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1

댓글을 달아 주세요

  1. addr | edit/del | reply 2008.05.20 11:57

    비밀댓글입니다