JavaScript模板引擎：tileTemplate

tileTemplate 是一個簡單的、高性能的Javascript模板引擎。

注：測試結果會因環境而有所不同，僅供參考。

    主要特性

• 簡單小巧，精簡后只有4.58K，開啟gzip后只有2.3K；

• 原生語法，高性能預編譯和渲染模板 (性能測試)；

• 安全機制，過濾和轉義危險語句(安全測試)；

• 支持各種模塊化標準（CommonJS / AMD / CMD 等）( Require.js示例 、Sea.js示例 )；

• 支持在 Node.js 環境下運行；

• 支持調試，精確定位并通過控制臺輸出和顯示錯誤或異常信息（查看調試）；

• 支持所有主流的瀏覽器（IE6+）；

• 支持 include 和自定義標簽語法；

    下載和安裝

• 源碼 tiletemplate.js

• 壓縮版 tiletemplate.min.js

    通過npm安裝：

npm install tiletemplate

    通過bower安裝：

bower install tiletemplate

使用方法

    編寫模板：

<!-- type可以任意定義 text/xxxx -->
<script id="test-tpl" type="text/tileTemplate">
    <h1><%=title%></h1>
    <ul> 
        <% for (i = 0, len = list.length; i < len; i ++) { %>
            <li>
                用戶: <%=list[i].user%>
                網站：<a href="<%=list[i].site%>"><%=list[i].site%></a>
            </li>
        <% } %>
    </ul>
</script>

    預編譯模板：

// 返回一個函數
var compiler = tileTemplate.compile(document.getElementById('test-tpl').innerHTML);

    渲染模板：

var data = {
    title : "標題XXX",
    list : []
}; 

for (var i = 0; i < 10; i ++) {
    data.list.push({
        index: (i+1),
        user: '<strong style="color:red">tileTemplate '+(i+1)+'</strong>',
        site: 'https://github.com/pandao/tileTemplate'
    }); 
};

// 輸出HTML
// document.getElementById('output').innerHTML = compiler(data);
document.getElementById('output3').innerHTML   = tileTemplate.render("test-tpl", data);

注：同時也支持在 Require.js 和 Sea.js 中使用。

在Node.js使用：

var tileTemplate = require("../src/tiletemplate.node");

// 通過npm安裝的
// var tileTemplate = require('tiletemplate');

// 設置基本目錄
tileTemplate.config("basePath", __dirname + "/tpl");

// tileTemplate.render(文件名/模板內容, 數據, 編碼);
// console.log(tileTemplate.render("Hello <%=str%>", {str:"wolrd!"}));

// 預編譯某個模板，用于循環渲染
//var compiler = tileTemplate.compile(tileTemplate.readFile("list.tile"));

var html = tileTemplate.render("test.tile.html", data);
var http = require('http');

http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end(html);
}).listen(8888);

console.log('Server running at http://127.0.0.1:8888/');

注：tileTemplate.readFile(文件名, 編碼) 方法只能在 Node.js 下使用。

主要語法

    tileTemplate 目前只支持原生語法。

    文本輸出：

<%=變量%>
<img src="<%=avatar%>" />

    JS語句：

<% if (list.length > 0) { %>
<p>Total: <%=list.length%> </p>
<% } else { %>
<p>暫時沒有</p> 
<% } %>

<% var total = list.length; %>

<%=(list.index>1?'>1':'<1')%>
...

    變量注釋：

<%=#變量%>

    行注釋：

//注釋文本
//<%=(list.index>1?'>1':'<1')%>
<% /* 注釋文本 */ %>
<!-- HTML式注釋 -->

    嵌套模板（支持多級嵌套）：

<% include('模板id') %>

    轉義字符（默認不轉義字符，需要的在前面加上@）：

<img src="<%=@avatar%>" />

作用：過濾和防止XSS攻擊。例如：當avatar的值為http://xxxx/xx.jpg" onload="alert(123)。

    自定義標簽語句：

# 定義標簽語句
tileTemplate.tag("em", function(content) {         
    if(content == 12) {
        var img = "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_thumb.gif";
        return '<img src="'+img+'" alt="em'+content+'"/>';
    } else {
        return content.toString();
    }
});

tileTemplate.tag("time", function() {
    return " time: " + (new Date).getTime();
}); 

#使用標簽語句
<%=tag:em:12%>
<%=tag:em:haha%>
<%=tag:em:哈哈%>    
<%=tag:time%>

注：自定義標簽語句只能輸出字符串。

項目主頁：http://www.baiduhome.net/lib/view/home/1418265145105