ajax---模板引擎

 目录：

1.渲染UI结构时遇到的问题

2.什么是模板引擎

3.模板引擎的好处

4. art-template的安装

5.使用传统方式渲染UI结构

6. art-template的使用步骤

 

7. art-template标准语法--输出

8.标准语法-条件输出

9.标准语法-过滤器

 

 

 

 

 

 

1.渲染UI结构时遇到的问题

上述代码是通过字符串拼接的形式。来渲染UI结构。

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

 

2.什么是模板引擎

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

 

 

 

3.模板引擎的好处

减少了字符串的拼接操作

使代码结构更清晰

使代码更易阅读与维护

 

 

4. art-template的安装

在浏览器中访问http://aui.github.io/art-template/zh-cn/docs/installation.html页面,找到下载链接后，鼠标右键，选择“链接另存为”，

将art-template下载到本地，然后，通过<script>标签加载到页面上进行使用。

 

 

5.使用传统方式渲染UI结构

 

 

 

 

 

6. art-template的使用步骤

• 导入art-template
• 定义数据
• 定义模板
• 调用template函数
• 渲染HTML结构

 

 

 

 

 

7. art-template标准语法--输出

1.什么是标准语法

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

 

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

 

8.标准语法-原文-输出

 

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

 

 

 

8.标准语法-条件输出

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

 

 

 

 

 

8.标准语法-循环输出

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

 

 

 

 

 

9.标准语法-过滤器

 

 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

定义过滤器的基本语法如下：

 

 

 

 

定义格式化事件的过滤器案例

 

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