- 授权协议: MIT
- 开发语言: JavaScript
- 操作系统: 跨平台
- 软件首页: https://pandao.github.io/tiletemplate/
- 软件文档: https://github.com/pandao/tileTemplate
软件介绍
tileTemplate 是一个简单的、高性能的Javascript模板引擎。
注：测试结果会因环境而有所不同，仅供参考。
主要特性
简单小巧，精简后只有4.58K，开启gzip后只有2.3K；
原生语法，高性能预编译和渲染模板 (性能测试)；
安全机制，过滤和转义危险语句(安全测试)；
支持各种模块化标准（CommonJS / AMD / CMD 等）( Require.js示例 、Sea.js示例 )；
支持在 Node.js 环境下运行，同时也支持Express.js (v1.5.0+)；
支持调试，精确定位并通过控制台输出和显示错误或异常信息（查看调试）；
支持所有主流的浏览器（IE6+）；
支持 include 和自定义标签语法；
下载和安装
通过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"));
// v1.5.0 版本起无需填写扩展名，默认为 tile.html，可另行配置
var html = tileTemplate.render("test", 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 下使用。
在Express.js中使用
var express = require('express');
var app = express();
var tileTemplate = require("tiletemplate");
// 初始化Express支持
tileTemplate.expressInit(app, __dirname + "/tpl/");
app.get('/', function (req, res) {
res.render('index', data); // v1.5.0 版本起无需填写扩展名，默认为 tile.html，可另行配置
});
var server = app.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});主要语法
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%>注：自定义标签语句只能输出字符串。
