FrontendModuleRequire.js

Require.js Plugin

,

Require.js 플러그인 텍스트 로딩과 HTML 템플릿 관리

require.js는 몇 가지 플러그인을 제공한다. 이 중 text 플러그인은 JS 파일 외에도 CSS와 HTML같은 텍스트 파일도 불러올 수 있게 한다. 간단히 다음과 같이 사용한다.

1
2
3
4
5
define([  
    'text!/template.html' // 플러그인은 플러그인 이름 뒤에 !를 붙인다.
], function (templateHTML) {
    //
});

이를 사용하면 현재 페이지에 노출되진 않지만 갖고 있어야 되는 HTML 조각들(Fragments)을 동적으로 관리할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
require([  
    'jquery',
    'text!/sections/layer1.html',
    'text!/sections/layer2.html',
    'text!/sections/layer3.html'
], function ($, layer1html, layer2html, layer3html) {
    var $body = $(document.body),
        $layer1 = $(layer1html),
        $layer2 = $(layer2html),
        $layer3 = $(layer3html);

    $body.append($layer1);
});

위 HTML에 해당하는 CSS 파일도 동적으로 가져올 수 있지만 CSS는 한 번만 정의하면 페이지에 적용할 수 있고 , 용량도 작은 편이기 때문에 전통적인 방법으로 관리하는 것이 더 합리적이다.

공유하기