性能卓越的js模板引擎：https://github.com/aui/artTemplate
<h4>一、为什么使用JavaScript模板引擎</h4>项目中，部分模块（filter、toolbar）业务复杂，过多依赖jQuery去铺数据，导致整体性能不高，且使用jQuery操作导致代码量和冗余度增大，后期维护不变。使用JavaScript模板引擎可以有效的实现界面与数据分离（解耦），大大提升开发效率，且重用性较高。
<h4>二、什么是JavaScript模板引擎</h4>首先要说明，模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在JavaScript下有模板引擎，在PHP下也有模板引擎，甚至Asp开发都会用到模板引擎技术。模板引擎可以生成特定格式的文档。JavaScript模板引擎，会生成一个标准的HTML文档。
<h4>三、什么场景下使用JavaScript模板引擎</h4>1、如果有大量的动态ajax请求数据并需要封装成视图展现给用户，现有的实现方式不满性能要求；
2、如果有大量的HTML段，是通过动态拼串生成；
3、如果在页面布局中，存在共性模块和布局，可以提取出公共模板，减少维护的数量。（当然模块化同样可以解决）
<h4>四、JavaScript模板引擎示例</h4>artTemplate提供了两个版本的模板语法可以选择：简洁语法（{{}}）、原生语法（<% %>）。选用原生语法，因为项目中使用了AngularJS，“{{}}”被angularjs的双向数据绑定占用，且原生语法支持原生JavaScript方法！
<pre>
QQ截图20170329135210.png
</pre>
<h6>artTemplate 简洁语法版</h6>
<h6>表达式：</h6>{{ 与 }}符号包裹起来的语句则为模板的逻辑表达式。
<h6>输出表达式：</h6>对内容编码输出：{{content}}
不编码输出：{{#content}}
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
<h6>条件表达式：</h6><pre>
QQ截图20170329140311.png
</pre>
<h6>遍历表达式：</h6>无论数组或者对象都可以用 each 进行遍历。
<pre>
1.png
</pre>
亦可以被简写：
<pre>
2.png
</pre>
<h6>模板包含表达式：</h6>用于嵌入子模板。
{{include 'template_name'}}
子模板默认共享当前数据，亦可以指定数据：
{{include 'template_name' news_list}}
<h6>辅助方法：</h6>
使用template.helper(name, callback)注册公用辅助方法：
template.helper('dateFormat', function (date, format) {
// ..
return value;
});
模板中使用的方式：
{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}
支持传入参数与嵌套使用：
QQ截图20170329150747.png
{{time | say:'cd' | ubb | link}}
<h5>方法：</h5><h6>template(id,data)</h6>
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数，那么将返回一渲染函数。
<h6>template.compile(source, options)</h6>将返回一个渲染函数。<a href="http://aui.github.io/artTemplate/demo/compile.html">演示</a>
<h6>template.render(source, options)</h6>将返回渲染结果。
<h6>template.helper(name, callback)</h6>添加辅助方法。例如时间格式器：<a href="http://aui.github.io/artTemplate/demo/helper.html">演示</a>
<h6>template.config(name, value)</h6>更改引擎的默认配置
QQ截图20170329150747.png
<h4>使用预编译</h4>
可突破浏览器限制，让前端模板拥有后端模板一样的同步“文件”加载能力：
一、按文件与目录组织模板
template('tpl/home/main', data)
二、模板支持引入子模板
{{include '../public/header'}}
网友评论