壹、使用javascript 模板引擎
用javascript預編譯模版,就是動態修改模板文件使之成為壹個可用的靜態HTML文件。 我平時會使用artTemplate,性能很好而且易上手。
編寫模板
使用壹個type="text/html"的script標簽存放模板:
<script?id="test"?type="text/html"><h1>{{title}}</h1>
<ul>
{{each?list?as?value?i}}
<li>索引?{{i?+?1}}?:{{value}}</li>
{{/each}}
</ul>
</script>
渲染模板
var?data?=?{
title:?'標簽',
list:?['文藝',?'博客',?'攝影',?'電影',?'民謠',?'旅行',?'吉他']
};
var?html?=?template('test',?data);
document.getElementById('content').innerHTML?=?html;
二、使用CoffeeScript
CoffeeScript支持類似於Python的跨行字符串,這樣很輕易的就能保持HTML結構的可讀性,而不需要使用“+”或者采用拼數組的形式。
str="""<div?class="dialog">
<div?class="title"><img?src="close.gif"?alt="關閉"?/>關閉
</div> <div?class="content"><img?src="delete.jpg"?alt=""?/>
</div> <div?class="bottom"><input?id="Button2"?type="button"?value="確定"?class="btn"/>
<input?id="Button3"?type="button"?value="取消"?class="btn"/>
</div></div>
"""