JavaScript 템 플 릿 엔진 안내
8008 단어 JavaScript
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 이지 만 그 자체 의 특징 이 있 습 니 다. 공식 문서 에 서 는 다음 과 같이 설명 합 니 다.
하지만 더 스 트 는 오 랜 만 에 업 데 이 트 된 것 처럼 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>
이 템 플 릿 엔진 이 실현 하 는 대체적인 원 리 는:
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.