JavaScript模板引擎-artTemplate-3.0

性能卓越的js模板引擎：https://github.com/aui/artTemplate

一、为什么使用JavaScript模板引擎

项目中，部分模块（filter、toolbar）业务复杂，过多依赖jQuery去铺数据，导致整体性能不高，且使用jQuery操作导致代码量和冗余度增大，后期维护不变。使用JavaScript模板引擎可以有效的实现界面与数据分离（解耦），大大提升开发效率，且重用性较高。

二、什么是JavaScript模板引擎

首先要说明，模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在JavaScript下有模板引擎，在PHP下也有模板引擎，甚至Asp开发都会用到模板引擎技术。模板引擎可以生成特定格式的文档。JavaScript模板引擎，会生成一个标准的HTML文档。

三、什么场景下使用JavaScript模板引擎

1、如果有大量的动态ajax请求数据并需要封装成视图展现给用户，现有的实现方式不满性能要求；
2、如果有大量的HTML段，是通过动态拼串生成；
3、如果在页面布局中，存在共性模块和布局，可以提取出公共模板，减少维护的数量。（当然模块化同样可以解决）

四、JavaScript模板引擎示例

artTemplate提供了两个版本的模板语法可以选择：简洁语法（{{}}）、原生语法（<% %>）。选用原生语法，因为项目中使用了AngularJS，“{{}}”被angularjs的双向数据绑定占用，且原生语法支持原生JavaScript方法！

 








QQ截图20170329135210.png



 

artTemplate 简洁语法版

表达式：

{{ 与 }}符号包裹起来的语句则为模板的逻辑表达式。

输出表达式：

对内容编码输出：{{content}}
不编码输出：{{#content}}
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

条件表达式：

 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    QQ截图20170329140311.png 
  
 
 
 
 
 

遍历表达式：

无论数组或者对象都可以用 each 进行遍历。

 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    1.png 
  
 
 
 
 

亦可以被简写：

 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    2.png 
  
 
 
 
 
 
 

模板包含表达式：

用于嵌入子模板。
{{include 'template_name'}}

子模板默认共享当前数据，亦可以指定数据：
{{include 'template_name' news_list}}

辅助方法：

使用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}}

方法：

template(id,data)

根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数，那么将返回一渲染函数。

template.compile(source, options)

将返回一个渲染函数。演示

template.render(source, options)

将返回渲染结果。

template.helper(name, callback)

添加辅助方法。例如时间格式器：演示

template.config(name, value)

更改引擎的默认配置

QQ截图20170329150747.png

使用预编译

可突破浏览器限制，让前端模板拥有后端模板一样的同步“文件”加载能力：

一、按文件与目录组织模板

template('tpl/home/main', data)

二、模板支持引入子模板

{{include '../public/header'}}