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.open-open.com/lib/view/home/1418265145105