https://github.com/pandao/tiletemplate
A simple, high performance Javascript template engine.
https://github.com/pandao/tiletemplate
Last synced: about 2 months ago
JSON representation
A simple, high performance Javascript template engine.
- Host: GitHub
- URL: https://github.com/pandao/tiletemplate
- Owner: pandao
- License: mit
- Created: 2014-12-06T11:05:00.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-04T07:12:27.000Z (over 8 years ago)
- Last Synced: 2025-04-11T04:55:12.223Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://pandao.github.io/tiletemplate/
- Size: 383 KB
- Stars: 29
- Watchers: 3
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGE.md
- License: LICENSE
Awesome Lists containing this project
README
# tileTemplate
A simple, high performance Javascript template engine.
一个简单的、高性能的 Javascript 模板引擎。

> 注:测试结果会因环境而有所不同,仅供参考。
### 主要特性
- 简单小巧,精简后只有 `5K`,开启 gzip 后只有 `2.4K`;
- 原生语法,高性能预编译和渲染模板 [(性能测试)](http://pandao.github.io/tiletemplate/tests/test-speed.html "(性能测试)");
- 安全机制,过滤和转义危险语句[(安全测试)](http://pandao.github.io/tiletemplate/tests/test-xss-filter.html "(安全测试)");
- 支持各种前端模块化加载器(CommonJS / AMD / CMD 等)[( Require.js示例 ](http://pandao.github.io/tiletemplate/examples/requirejs-test.html) 、[Sea.js示例 )](http://pandao.github.io/tiletemplate/examples/seajs-test.html);
- 支持在 `Node.js` 环境下运行(`v1.6.0 起支持预编译模板文件为 CMD 模块`),同时也支持 `Express.js`;
- 支持调试,精确定位并通过控制台输出和显示错误或异常信息([查看调试](http://pandao.github.io/tiletemplate/tests/test-debug.html));
- 支持所有主流的浏览器(`IE6+`);
- 支持 `include` 和自定义标签语法;### 下载和安装
- [源码 tiletemplate.js](https://github.com/pandao/tileTemplate/tree/master/src/tiletemplate.js "源码")
- [压缩版 tiletemplate.min.js](https://github.com/pandao/tileTemplate/tree/master/dist/tiletemplate.min.js "压缩版")通过 NPM 安装:
```shell
npm install tiletemplate
```通过 Bower 安装:
```shell
bower install tiletemplate
```### 使用方法
编写模板:
```html
<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>```
预编译模板:
```javascript
var data = {
title : "标题XXX",
list : []
};// 返回一个函数
var compiler = tileTemplate.compile(document.getElementById('test-tpl').innerHTML, data);
```渲染模板:
```javascript
var data = {
title : "标题XXX",
list : []
};for (var i = 0; i < 10; i ++) {
data.list.push({
index: (i+1),
user: 'tileTemplate '+(i+1)+'',
site: 'https://github.com/pandao/tileTemplate'
});
}// 输出HTML
// document.getElementById('output').innerHTML = compiler(data);
document.getElementById('output3').innerHTML = tileTemplate.render("test-tpl", data);
```> 注:同时也支持在 [Require.js](http://pandao.github.io/tiletemplate/examples/requirejs-test.html) 和 [Sea.js](http://pandao.github.io/tiletemplate/examples/seajs-test.html) 中使用。
### 在 Node.js 使用:
```javascript
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"), {list : [...]});// 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 中使用
```javascript
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` 目前只支持原生语法。
文本输出:
```html
<%=变量%>![]()
```JS语句:
```html
<% if (list.length > 0) { %>Total: <%=list.length%>
<% } else { %>暂时没有
<% } %><% var total = list.length; %>
<%=(list.index>1?'>1':'<1')%>
...
```变量注释:
```html
<%=#变量%>
```行注释:
```html
//注释文本
//<%=(list.index>1?'>1':'<1')%>
<% /* 注释文本 */ %>```
嵌套模板(支持多级嵌套):
```html
<% include('模板id') %>
```转义字符(默认不转义字符,需要的在前面加上@):
```html
![]()
```> 作用:过滤和防止 XSS 攻击。例如:当 `avatar` 的值为 `http://xxxx/xx.jpg" onload="alert(123)`。
自定义标签语句:
```javascript
// 定义标签语句
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 '';
} else {
return content.toString();
}
});tileTemplate.tag("time", function() {
return " time: " + (new Date).getTime();
});/*
// 使用标签语句
<%=tag:em:12%>
<%=tag:em:haha%>
<%=tag:em:哈哈%>
<%=tag:time%>
*/
```> 注:自定义标签语句只能输出字符串。
### 主要方法
默认选项:
```javascript
{
debug : false, // 是否开启调试功能,默认不开启,在生产环境下,这样能获得更高的性能和速度;开发时,请开启;
cached : true, // 是否开启缓存,默认开启,性能更好
filter : true, // 是否过滤模板中的危险语句等,如alert等
openTag : "<%", // 模板开始标签
closeTag : "%>" // 模板结束标签
}
```修改和设置配置选项:
```javascript
// 使用set或config方法修改配置选项,config为别名
// 批量设置
tileTemplate.set({
openTag : "{{",
closeTag : "}}"
});tileTemplate.config({
openTag : "{{",
closeTag : "}}"
});// 单个设置
tileTemplate.set("openTag", "{{");
tileTemplate.config("openTag", "{{");
```渲染模板:
```javascript
/**
* @param {String} id 模板的 ID,或者直接传入模板内容
* @param {Object} data 传入模板的数据
* @param {String} filename 当不通过ID获取模板,而是直接传入模板,需要设置一个模板名称
* @param {Boolean} isModule 是否预编译为 CMD 模块
* @return {Function|String} html 返回模板渲染后的 HTML 或预编译模块的字符串
*/tileTemplate.render(id, data, filename, isModule);
```预编译模板:
```javascript
/**
* @param {String} tpl 模板的内容
* @param {Object} data 传入模板的数据,默认为 {}
* @param {Object} options 配置选项,参数为:include 是否为嵌套的模板,name 模板ID,isModule 是否预编译为 CMD 模块
* @return {Function|String} fn 返回预编译函数或预编译模块的字符串
*/tileTemplate.compile(tpl, data, options);
```自定义标签语句:
```javascript
/**
* @param {String} name 标签名称
* @param {Function} callback 处理标签的回调方法,参数为content,代表标签语句传入的参数
* @return {Void} void 无返回值
*/tileTemplate.tag(name, callback);
```清除某个模板的缓存:
```javascript
/**
* @param {String} id 模板的ID或者文件名
* @return {Boolean} bool 返回 true
*/tileTemplate.clear(id);
```扩展 tileTemplate:
```javascript
tileTemplate.xxx = xxxx;// 或者
tileTemplate.extend({
xxx : "xxxx"
methodXXX : function() {
//...
}
});
```### 更新日志
[查看更新日志](https://github.com/pandao/tileTemplate/blob/master/CHANGE.md)
### License
The MIT License (MIT)
Copyright (c) 2014-2016 Pandao