JavaScript 템 플 릿 엔진 안내

원본 주소:  Roc's Blog   http://rocwang.me/js-template/
JavaScript 템 플 릿 엔진 안내
현상
좋 습 니 다. 비극 적 인 것 은 자 바스 크 립 트 의 전단 템 플 릿 엔진 이 소 털 처럼 많아 서 눈 이 어 지 럽 습 니 다. 그래서 또 다른 사람 이 만 들 었 습 니 다 템 플 릿 엔진 선택 기.그러나 대체적으로 js 의 템 플 릿 엔진 은 두 가지 로 나 눌 수 있다. 하 나 는 '끼 워 넣 기' 이다. 이것 은 js 를 템 플 릿 에 직접 써 서 복잡 한 렌 더 링 논 리 를 실현 할 수 있다 는 뜻 이다.다른 하 나 는 '논리 없 음 (Logic - less)' 이다. 이런 템 플 릿 엔진 의 철학 은 템 플 릿 이 논리 와 가능 한 한 분리 되 어야 하기 때문에 템 플 릿 에 js 코드 를 임의로 넣 을 수 없고 템 플 릿 엔진 자체 가 제공 하 는 메커니즘 을 이용 하여 간단 한 기능 을 실현 할 수 밖 에 없다.
저 는 몇 사람 이 비교적 재 미 있 거나 유행 하 는 js 템 플 릿 엔진 (대부분 Logic - less 타 입) 을 선 택 했 습 니 다. 다음은 일일이 소개 하 겠 습 니 다.
mustache
말하자면 mustache 는 언어 와 무관 한 템 플 릿 시스템 규범 으로 여러 가지 언어의 실현 이 있 는데 js 를 포함한다.그 가 쓴 템 플 릿 에서 대량으로 사용 { 되 었 기 때문에 거꾸로 보면 수염 같 아서 mustache 라 고 이름 을 지 었 다.데모 보 자:
템 플 릿:

<h1>{{header}}</h1>
{{#bug}}
{{/bug}}

{{#items}}
  {{#first}}
    <li><strong>{{name}}</strong></li>
  {{/first}}
  {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/link}}
{{/items}}

{{#empty}}
  <p>The list is empty.</p>
{{/empty}}

데이터:

{
  "header": "Colors",
  "items": [
      {"name": "red", "first": true, "url": "#Red"},
      {"name": "green", "link": true, "url": "#Green"},
      {"name": "blue", "link": true, "url": "#Blue"}
  ],
  "empty": false
}

렌 더 링 결과:

<h1>Colors</h1>
<li><strong>red</strong></li>
<li><a href="#Green">green</a></li>
<li><a href="#Blue">blue</a></li>

mustache 는 logic - less 이기 때문에 템 플 릿 에 if, for 구조 가 없고 데이터 의 값 을 통 해 분기 와 순환 을 실현 하 는 것 이 특징 입 니 다.이런 분리 가 가 져 온 장점 은 템 플 릿 이 뚜렷 하고 유지 하기 쉽다 는 것 이다.
handlebars
handlebars 는 수염 스타일 입 니 다. 이름 에서 알 수 있 듯 이 mustache 와 관련 이 있 을 것 입 니 다.네, handlebars 의 템 플 릿 은 mustache 와 호 환 되 어 직접 사용 할 수 있 으 며 handlebars 는 더 많은 기능 을 제공 합 니 다.
handlerbars 의 가장 큰 특징 은 템 플 릿 을 미리 컴 파일 할 수 있다 는 것 이다.컴 파일 과정 은 브 라 우 저 에서 도 가능 하 며, node. js 를 통 해 서버 에서 도 진행 할 수 있 습 니 다.이렇게 하면 템 플 릿 렌 더 링 시의 성능 을 크게 향상 시 키 고 handlebars 가 브 라 우 저 를 실행 할 때 라 이브 러 리 의존 도 를 줄 일 수 있다 는 것 이 장점 이다.
또한 handlebars 는 템 플 릿 에서 새로운 문법 구 조 를 지원 합 니 다.
hogan
hogan 은 트 위 터 에서 온 오픈 소스 템 플 릿 엔진 으로 품질 도 나 쁘 지 않 을 것 이다.handlebars 와 마찬가지 로 hogan 은 mustache 의 규범 을 호 환 하여 mustache 의 템 플 릿 을 직접 사용 할 수 있 고 템 플 릿 에 대한 컴 파일 도 지원 합 니 다.
icanhaz
icanhaz 는 또 다른 mustache 기반 템 플 릿 엔진 입 니 다. icanhaz 의 큰 특징 은 템 플 릿 코드 를 자동 으로 검색 하고 연결 할 수 있 습 니 다. 그러면 렌 더 링 함 수 를 명시 적 으로 호출 하지 않 아 도 됩 니 다.
Demo：
템 플 릿:

<script id="user" type="text/html">
  <li>
    <p class="name">Hello I'm {{ name }}</p>
    <p><a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p>
  </li>
</script>

렌 더 링 코드:

// I Can Haz User?
var user = ich.user(user_data_object)

demo 에서 icanhaz 가 자동 으로 가 져 온 템 플 릿 은 id 에 따라 ich 에서 같은 이름 의 대상 을 생 성하 여 호출 할 수 있 습 니 다.
dust
dust 의 문법 은 호 환 되 지 않 는 mustache 이지 만 그 자체 의 특징 이 있 습 니 다. 공식 문서 에 서 는 다음 과 같이 설명 합 니 다.

비동기 / 흐름 식 조작

브 라 우 저 / node 호 환

강 화 된 mustache / cttemplate 문법

깨끗 하고 밑바닥 API

고성능

템 플 릿 조합 가능

linkedin 은 정식 전단 템 플 릿 엔진 http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more 으로 도 사용 합 니 다.
하지만 더 스 트 는 오 랜 만 에 업 데 이 트 된 것 처럼 0.3 버 전에 머 물 렀 고, 최근 업 데 이 트 는 1 년 전 이 었 다.
John Resig’s Micro-Templating
John Resig 는 jQuery 의 창시자 입 니 다. 이 큰 소 는 작은 템 플 릿 엔진 을 썼 습 니 다. 아주 재 미 있 습 니 다.

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
    var cache = {};

    this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
        cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

        // Generate a reusable function that will serve as a template
        // generator (and which will be cached).
        new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +

        // Convert the template into pure JavaScript
        str
            .replace(/[\r\t
]/g, " ")
            .split("<%").join("\t")
            .replace(/((^|%>)[^\t]*)'/g, "$1\r")
            .replace(/\t=(.*?)%>/g, "',$1,'")
            .split("\t").join("');")
            .split("%>").join("p.push('")
            .split("\r").join("\\'")
        + "');}return p.join('');");

    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
    };
})();

템 플 릿 의 예:

<script type="text/html" id="item_tmpl">
    <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">
    <div class="grid_1 alpha right">
        <img class="righted" src="<%=profile_image_url%>"/>
    </div>
    <div class="grid_6 omega contents">
        <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
    </div>
    </div>
</script>

템 플 릿 에 js 코드 도 삽입 할 수 있 습 니 다:

<script type="text/html" id="user_tmpl">
    <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
    <% } %>
</script>

이 템 플 릿 엔진 이 실현 하 는 대체적인 원 리 는:

들 어 오 는 템 플 릿 의 정적 텍스트 를 특정한 식별 자 에 따라 몇 개의 세 션 으로 나 누고 배열 에 누 릅 니 다

템 플 릿 에 있 는 js 코드 를 분석 하고 관련 정적 텍스트 를 누 르 기 전에 실행 하여 렌 더 링 논리

를 실현 합 니 다.

템 플 릿 의 변 수 를 with 를 통 해 전 송 된 데이터 대상 의 대응 값 으로 전개 하고 그룹 에 눌 러 넣 기

마지막 으로 join 함 수 를 통 해 최종 렌 더 링 결 과 를 출력 합 니 다

그리고 캐 시 와 프 리 컴 파일 도 지원 합 니 다. 교묘 하 죠?