性能卓越的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>
</pre>
<h6>artTemplate 简洁语法版</h6>
<h6>表达式:</h6>{{ 与 }}符号包裹起来的语句则为模板的逻辑表达式。
<h6>输出表达式:</h6>对内容编码输出:{{content}}
不编码输出:{{#content}}
编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。
<h6>条件表达式:</h6><pre>
</pre>
<h6>遍历表达式:</h6>无论数组或者对象都可以用 each 进行遍历。
<pre>
</pre>
亦可以被简写:
<pre>
</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'}}
支持传入参数与嵌套使用:
{{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>更改引擎的默认配置
<h4>使用预编译</h4>
可突破浏览器限制,让前端模板拥有后端模板一样的同步“文件”加载能力:
一、按文件与目录组织模板
template('tpl/home/main', data)
二、模板支持引入子模板
{{include '../public/header'}}