模板引擎的总结

目录

 

模板引擎的总结

1.模板引擎的基本概念

1.1什么是模板引擎？

2.art-template模板引擎

3. art-template模板引擎的基本使用

---

模板引擎的总结

1.模板引擎的基本概念

渲染UI结构时遇到的问题

var rows = []
$.each(res.data, function (i, item) { // 循环拼接字符串
rows.push('<li class="list-group-item">'+ item.content +'<span class="badge
cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：'+
item.username +'</span></li>')
})
$('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构

上述代码是通过字符串拼接的形式，来渲染UI结构。
如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非
常麻烦。

1.1什么是模板引擎？

模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

模板引擎的好处（了解）

① 减少了字符串的拼接操作
② 使代码结构更清晰
③ 使代码更易于阅读与维护

2.art-template模板引擎

art-template 是一个简约、超快的模板引擎。中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html

3. art-template模板引擎的基本使用

3.1art-template的使用步骤（重要）
① 导入 art-template
② 定义数据
③ 定义模板
④ 调用 template 函数
⑤ 渲染HTML结构

3.2art-template标准语法（重要）

art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种 {{ }} 语法在 art-template
中被称为标准语法。

3.2-1标准语法 - 输出  (重要)

{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

1）标准语法 – 原文输出

{{@ value }}    //标准语法 – 原文输出

代码展示：

如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正
常渲染。

2） 标准语法 – 条件输出

如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出。

{{if value}} 按需输出的内容 {{/if}}
{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

代码展示：

3）标准语法 – 循环输出

如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使
用 $value 进行访问。

4）标准语法 – 过滤器

过滤器的本质，就是一个 function 处理函数。

{{value | filterName}}
过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){/*return处理的结果*/}

代码展示--没有添加过滤器前

代码展示--添加过滤器后

案例：

<div>注册时间：{{regTime | dateFormat}}</div>

定义一个格式化时间的过滤器 dateFormat 如下：

template.defaults.imports.dateFormat = function(date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d // 注意，过滤器最后一定要 return 一个值
}