一、特性
- 性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍,
- 支持运行时调试,可精确定位异常模板所在语句,
- 对 NodeJS Express 友好支持,
- 安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板),
- 支持
include
语句,可在浏览器端实现按路径加载模板, - 支持预编译,可将模板转换成为非常精简的 js 文件,
- 模板语句简洁,无需前缀引用数据,
- 支持所有流行的浏览器。
二、上手
1、编写模板
使用一个type="text/html"的script标签存放模板:
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
</script> 2、渲染模板
var data = {
title: ‘标签‘,
list: [‘A, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘]
};
var html = template(‘test‘, data);
document.getElementById(‘content‘).innerHTML = html;
三、模板语法
1、简洁语法
推荐使用,语法简单实用,利于读写。
{{if admin}}
{{include ‘admin_content‘}}
{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}
2、使用
引用简洁语法的引擎版本,例如:
<script src="dist/template.js"></script> 3、表达式
{{
与}}
符号包裹起来的语句则为模板的逻辑表达式。 ①、输出表达式: 对内容编码的输出:{{content}} 不编码的输出:{{#content}} 注:编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。 ②、条件表达式:
{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}
④、遍历表达式: 无论数组或者对象都可以用 each 进行遍历。
{{each list as value index}} <li>{{index}} - {{value.user}}</li> {{/each}}
亦可被简写:
{{each list}}
<li>{{$index}} - {{$value.user}}</li>
{{/each}}
⑤、模板包含表达式
用于嵌入子模板。
{{include ‘template_name‘}}
子模板默认共享当前数据,亦可以指定数据:
{{include ‘template_name‘ news_list}}
4、铺助方法
使用template.helper(name, callback)
注册公用辅助方法:
template.helper(‘dateFormat‘, function (date, format) {
// ..
return value;
});
模板中使用的方式:
{{time | dateFormat:‘yyyy-MM-dd hh:mm:ss‘}}
支持传入参数与嵌套使用:
{{time | say:‘cd‘ | ubb | link}}、
四、方法
template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)
查找模板。
如果没有 data 参数,那么将返回一渲染函数。
template.compile
(source, options)
将返回一个渲染函数。
template.render
(source, options)
将返回渲染结果。
template.helper
(name, callback)
添加辅助方法。
例如时间格式器:
template.config
(name, value)
更改引擎的默认配置。
字段 | 类型 | 默认值 | 说明 |
---|---|---|---|
openTag | String | ‘{{‘ |
逻辑语法开始标签 |
closeTag | String | "}}" |
逻辑语法结束标签 |
escape | Boolean | true |
是否编码输出 HTML 字符 |
cache | Boolean | true |
是否开启缓存(依赖 options 的 filename 字段) |
compress | Boolean | false |
是否压缩 HTML 多余空白字符 |
五、使用预编译
可突破浏览器限制,让前端模板拥有后端模板一样的同步“文件”加载能力:
1、按文件与目录组织模板
template(‘tpl/home/main‘, data)
2、模板支持引入子模板
{{include ‘../public/header‘}}
基于预编译:
①、可将模板转换成为非常精简的 js 文件(不依赖引擎)
②、使用同步模板加载接口
③、支持多种 js 模块输出:AMD、CMD、CommonJS
④、支持作为 GruntJS 插件构建
⑤、前端模板可共享给 NodeJS 执行
⑥、自动压缩打包模板
时间: 2024-11-05 17:19:47