{"id":19490896,"url":"https://github.com/pandao/tiletemplate","last_synced_at":"2025-10-08T07:14:28.461Z","repository":{"id":24238680,"uuid":"27631522","full_name":"pandao/tileTemplate","owner":"pandao","description":"A simple, high performance Javascript template engine.","archived":false,"fork":false,"pushed_at":"2016-12-04T07:12:27.000Z","size":392,"stargazers_count":29,"open_issues_count":0,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T04:55:12.223Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pandao.github.io/tiletemplate/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pandao.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-06T11:05:00.000Z","updated_at":"2024-07-09T09:48:53.000Z","dependencies_parsed_at":"2022-08-30T20:00:58.231Z","dependency_job_id":null,"html_url":"https://github.com/pandao/tileTemplate","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pandao%2FtileTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pandao%2FtileTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pandao%2FtileTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pandao%2FtileTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pandao","download_url":"https://codeload.github.com/pandao/tileTemplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250882637,"owners_count":21502341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T21:14:42.513Z","updated_at":"2025-10-08T07:14:23.408Z","avatar_url":"https://github.com/pandao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tileTemplate \r\n\r\nA simple, high performance Javascript template engine.\r\n\r\n一个简单的、高性能的 Javascript 模板引擎。 \r\n\r\n![](http://pandao.github.io/tiletemplate/tests/test-speed.png)\r\n\r\n\u003e 注：测试结果会因环境而有所不同，仅供参考。\r\n\r\n### 主要特性\r\n\r\n- 简单小巧，精简后只有 `5K`，开启 gzip 后只有 `2.4K`；\r\n- 原生语法，高性能预编译和渲染模板 [（性能测试）](http://pandao.github.io/tiletemplate/tests/test-speed.html \"(性能测试)\")；\r\n- 安全机制，过滤和转义危险语句[（安全测试）](http://pandao.github.io/tiletemplate/tests/test-xss-filter.html \"(安全测试)\")；\r\n- 支持各种前端模块化加载器（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)；\r\n- 支持在 `Node.js` 环境下运行（`v1.6.0 起支持预编译模板文件为 CMD 模块`），同时也支持 `Express.js`；\r\n- 支持调试，精确定位并通过控制台输出和显示错误或异常信息（[查看调试](http://pandao.github.io/tiletemplate/tests/test-debug.html)）；\r\n- 支持所有主流的浏览器（`IE6+`）；\r\n- 支持 `include` 和自定义标签语法；\r\n\r\n### 下载和安装\r\n\r\n- [源码   tiletemplate.js](https://github.com/pandao/tileTemplate/tree/master/src/tiletemplate.js \"源码\")\r\n- [压缩版 tiletemplate.min.js](https://github.com/pandao/tileTemplate/tree/master/dist/tiletemplate.min.js \"压缩版\")\r\n\r\n通过 NPM 安装：\r\n\n```shell\r\nnpm install tiletemplate\n```\r\n\r\n通过 Bower 安装：\r\n\n```shell\r\nbower install tiletemplate\n```\r\n\r\n### 使用方法\r\n\r\n编写模板：\r\n\n```html\r\n\u003c!-- type可以任意定义 text/xxxx --\u003e\r\n\u003cscript id=\"test-tpl\" type=\"text/tileTemplate\"\u003e\r\n    \u003ch1\u003e\u003c%=title%\u003e\u003c/h1\u003e\r\n    \u003cul\u003e \r\n        \u003c% for (i = 0, len = list.length; i \u003c len; i ++) { %\u003e\r\n            \u003cli\u003e\r\n\t\t\t\t用户: \u003c%=list[i].user%\u003e\r\n\t\t\t\t网站：\u003ca href=\"\u003c%=list[i].site%\u003e\"\u003e\u003c%=list[i].site%\u003e\u003c/a\u003e\r\n\t\t\t\u003c/li\u003e\r\n        \u003c% } %\u003e\r\n    \u003c/ul\u003e\r\n\u003c/script\u003e\n```\r\n\r\n预编译模板：\r\n\n```javascript\r\nvar data = {\r\n    title : \"标题XXX\",\r\n    list  : []\r\n}; \n\r\n// 返回一个函数\r\nvar compiler = tileTemplate.compile(document.getElementById('test-tpl').innerHTML, data);\n```\r\n\r\n渲染模板：\r\n\n```javascript\r\nvar data = {\r\n    title : \"标题XXX\",\r\n    list : []\r\n}; \r\n\r\nfor (var i = 0; i \u003c 10; i ++) {\r\n    data.list.push({\r\n        index: (i+1),\r\n        user: '\u003cstrong style=\"color:red\"\u003etileTemplate '+(i+1)+'\u003c/strong\u003e',\r\n        site: 'https://github.com/pandao/tileTemplate'\r\n    });\t\r\n}\r\n\r\n// 输出HTML\r\n// document.getElementById('output').innerHTML = compiler(data);\r\ndocument.getElementById('output3').innerHTML   = tileTemplate.render(\"test-tpl\", data);\n```\r\n\r\n\u003e 注：同时也支持在 [Require.js](http://pandao.github.io/tiletemplate/examples/requirejs-test.html) 和 [Sea.js](http://pandao.github.io/tiletemplate/examples/seajs-test.html) 中使用。\r\n\r\n### 在 Node.js 使用：\r\n\n```javascript\r\nvar tileTemplate = require(\"../src/tiletemplate.node\");\r\n\r\n// 通过 NPM 安装的\r\n// var tileTemplate = require('tiletemplate');\r\n\r\n// 设置基本目录\r\ntileTemplate.config(\"basePath\", __dirname + \"/tpl/\");\r\n\r\n// tileTemplate.render(文件名/模板内容, 数据, 编码);\r\n// console.log(tileTemplate.render(\"Hello \u003c%=str%\u003e\", {str:\"wolrd!\"}));\r\n\r\n// 预编译某个模板，用于循环渲染\r\n//var compiler = tileTemplate.compile(tileTemplate.readFile(\"list\"), {list : [...]});\r\n\r\n// v1.5.0 版本起无需填写扩展名，默认为 tile.html，可另行配置\r\nvar html = tileTemplate.render(\"test\", data);\r\nvar http = require('http');\r\n\r\nhttp.createServer(function (request, response) {\r\n    response.writeHead(200, {'Content-Type': 'text/html'});\r\n    response.end(html);\r\n}).listen(8888);\r\n\r\nconsole.log('Server running at http://127.0.0.1:8888/');\n```\r\n\r\n\u003e 注：`tileTemplate.readFile(文件名, 编码)` 方法只能在 `Node.js` 下使用。\r\n\r\n### 在 Express.js 中使用\r\n\n```javascript\r\nvar express\t\t = require('express');\r\nvar app\t\t\t = express(); \r\nvar tileTemplate = require(\"tiletemplate\");\r\n\r\n// 初始化Express支持\r\ntileTemplate.expressInit(app, __dirname + \"/tpl/\");\r\n\r\napp.get('/', function (req, res) { \r\n\tres.render('index', data);   // v1.5.0 版本起无需填写扩展名，默认为 tile.html，可另行配置\r\n});\r\n\r\nvar server = app.listen(3000, function() {\r\n    console.log('Listening on port %d', server.address().port);\r\n});\n```\r\n\r\n### 主要语法\r\n\r\n`tileTemplate` 目前只支持原生语法。\r\n\r\n文本输出：\r\n\n```html\r\n\u003c%=变量%\u003e\r\n\u003cimg src=\"\u003c%=avatar%\u003e\" /\u003e\n```\r\n\r\nJS语句：\r\n\n```html\r\n\u003c% if (list.length \u003e 0) { %\u003e\r\n\u003cp\u003eTotal: \u003c%=list.length%\u003e \u003c/p\u003e\r\n\u003c% } else { %\u003e\r\n\u003cp\u003e暂时没有\u003c/p\u003e\t\r\n\u003c% } %\u003e\r\n\r\n\u003c% var total = list.length; %\u003e\r\n\r\n\u003c%=(list.index\u003e1?'\u003e1':'\u003c1')%\u003e\r\n...\n```\r\n\r\n变量注释：\r\n\n```html\r\n\u003c%=#变量%\u003e\n```\r\n\r\n行注释：\r\n\n```html\r\n//注释文本\r\n//\u003c%=(list.index\u003e1?'\u003e1':'\u003c1')%\u003e\r\n\u003c% /* 注释文本 */ %\u003e\r\n\u003c!-- HTML式注释 --\u003e\n```\r\n\r\n嵌套模板（支持多级嵌套）：\r\n\n```html\r\n\u003c% include('模板id') %\u003e\n```\r\n\r\n转义字符（默认不转义字符，需要的在前面加上@）：\r\n\n```html\r\n\u003cimg src=\"\u003c%=@avatar%\u003e\" /\u003e\n```\r\n\r\n\u003e 作用：过滤和防止 XSS 攻击。例如：当 `avatar` 的值为 `http://xxxx/xx.jpg\" onload=\"alert(123)`。\r\n\r\n自定义标签语句：\r\n\n```javascript\r\n// 定义标签语句\r\ntileTemplate.tag(\"em\", function(content) {         \r\n    if(content == 12) {\r\n\t\tvar img = \"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_thumb.gif\";\r\n        return '\u003cimg src=\"'+img+'\" alt=\"em'+content+'\"/\u003e';\r\n    } else {\r\n        return content.toString();\r\n    }\r\n});\r\n\r\ntileTemplate.tag(\"time\", function() {\r\n    return \" time: \" + (new Date).getTime();\r\n}); \r\n\n/*\r\n// 使用标签语句\r\n\u003c%=tag:em:12%\u003e\r\n\u003c%=tag:em:haha%\u003e\r\n\u003c%=tag:em:哈哈%\u003e    \r\n\u003c%=tag:time%\u003e\n*/\n```\r\n\r\n\u003e 注：自定义标签语句只能输出字符串。\r\n\r\n### 主要方法\r\n\r\n默认选项：\r\n\n```javascript\r\n{\r\n    debug    : false,  // 是否开启调试功能，默认不开启，在生产环境下，这样能获得更高的性能和速度；开发时，请开启；\r\n    cached   : true,   // 是否开启缓存，默认开启，性能更好\r\n    filter   : true,   // 是否过滤模板中的危险语句等，如alert等\r\n    openTag  : \"\u003c%\",   // 模板开始标签\r\n    closeTag : \"%\u003e\"    // 模板结束标签\r\n}\n```\r\n\r\n修改和设置配置选项：\r\n\n```javascript\r\n// 使用set或config方法修改配置选项，config为别名\r\n// 批量设置\r\ntileTemplate.set({\r\n    openTag : \"{{\",\r\n    closeTag : \"}}\"\r\n});\r\n\r\ntileTemplate.config({\r\n    openTag : \"{{\",\r\n    closeTag : \"}}\"\r\n});\r\n\r\n// 单个设置\r\ntileTemplate.set(\"openTag\", \"{{\");\r\ntileTemplate.config(\"openTag\", \"{{\");\n```\r\n\r\n渲染模板：\r\n\n```javascript\r\n/**\n * @param  {String}           id            模板的 ID，或者直接传入模板内容\r\n * @param  {Object}           data          传入模板的数据\r\n * @param  {String}           filename      当不通过ID获取模板，而是直接传入模板，需要设置一个模板名称\n * @param  {Boolean}          isModule      是否预编译为 CMD 模块\n * @return {Function|String}  html          返回模板渲染后的 HTML 或预编译模块的字符串\n */\r\n\r\ntileTemplate.render(id, data, filename, isModule);\n```\r\n\r\n预编译模板：\n\r\n```javascript\r\n/**\n * @param  {String}           tpl      模板的内容\r\n * @param  {Object}           data     传入模板的数据，默认为 {}\r\n * @param  {Object}           options  配置选项，参数为：include 是否为嵌套的模板，name 模板ID，isModule 是否预编译为 CMD 模块\n * @return {Function|String}  fn       返回预编译函数或预编译模块的字符串\n */\r\n\r\ntileTemplate.compile(tpl, data, options);\n```\r\n\r\n自定义标签语句：\r\n\n```javascript\n/**\r\n * @param  {String}     name       标签名称\r\n * @param  {Function}   callback   处理标签的回调方法，参数为content，代表标签语句传入的参数\n * @return {Void}\t    void       无返回值\n */\r\n\r\ntileTemplate.tag(name, callback);\n```\r\n\r\n清除某个模板的缓存：\r\n\n```javascript\n/**\n * @param  {String}     id         模板的ID或者文件名\n * @return {Boolean}    bool       返回 true\n */\r\n\r\ntileTemplate.clear(id);\n```\r\n\r\n扩展 tileTemplate：\r\n\n```javascript\r\ntileTemplate.xxx = xxxx;\n\r\n// 或者\r\ntileTemplate.extend({\r\n\txxx : \"xxxx\"\r\n\tmethodXXX : function() {\n\t   //...\r\n\t}\r\n});\n```\r\n\r\n### 更新日志\r\n\r\n[查看更新日志](https://github.com/pandao/tileTemplate/blob/master/CHANGE.md)\r\n\r\n### License\r\n\r\nThe MIT License (MIT)\r\n\r\nCopyright (c) 2014-2016 Pandao\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandao%2Ftiletemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpandao%2Ftiletemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandao%2Ftiletemplate/lists"}