最近工作內容慢慢接近我的理想化(web前端),所以關注比較多的是前端性能!後台同事介紹使用ajax模板引擎,提高渲染速度!
下面介紹幾款JavaScript 模板引擎
1. Mustache
基於javascript 實現的模板引擎,類似於Microsoft's jQuery template plugin,但更簡單易用!
2. doT.js
doT.js 包含為瀏覽器和Node.js 準備的JavaScript 模板引擎。
3. jSmart
jSmart 是著名的PHP 模板引擎Smarty 的JavaScript 移植版本。
4. dom.js
dom.js 是一款可用在客戶端和服務器端的JavaScript 模板引擎
5. jade
Jade是受Haml的影響以JavaScript實現用於node的高性能模板引擎。
6. Hogan.js
來自Twitter 的JavaScript 模板引擎。
7. Handlebars
Handlebars 是一個JavaScript 的頁面模板庫
8. artTemplate
artTemplate 是新一代javascript 模板引擎,它在v8 中的渲染效率可接近javascript 性能極限,在chrome 下渲染效率測試中分別是知名引擎Mustache 與micro tmpl 的25 、 32 倍。引擎支持調試。若渲染中遇到錯誤,調試器可精確定位到產生異常的模板語句,解決前端模板難以調試的問題。
獨有模板編譯工具,它能把前端模板編譯成不依賴模板引擎運行的JS文件,讓前端模板可以突破瀏覽器的限制,實現像後端模板一樣按文件與目錄的方式組織、按需加載、include嵌套等。這一切都在2kb(gzip) 中實現!
也許你會覺得這個插件名似曾相識,沒錯!這個也是artDialog的作者糖餅
博客地址:http://www.planeart.cn/
引用引擎
複製代碼代碼如下:
<script src="js/template.js"></script>
編寫模板
複製代碼代碼如下:
<script id="test" type="text/html">
//使用一個type="text/html"的script標籤存放模板:
<h1><%=title%></h1>
<ul>
<%
for(i=0;i<list.length;i++){%>
<li>itemL <%=i+1%>:<%=list[i]%></li>
<%}%>
</ul>
//模板邏輯語法開始與結束的界定符號為<% 與%>,若<%後面緊跟=號則輸出變量內容
</script>
渲染模板
複製代碼代碼如下:
var data = {
title: '標籤',
list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html=template.render("test",data);
document.getElementById('content').innerHTML = html;