模板引擎

渲染UI结构时遇到的问题

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

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

模板引擎的好处

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

---

art-template模板引擎的安装

在浏览器中访问http:// aui.github. io/ art-template/ zh-cn/ docs/installation.html页面，找到下载链接后，鼠标右键，选择“链接另存为”，将art-template下载到本地，然后通过<script>标签加载到网页上进行使用。

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

2. art-template使用步骤

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

---

art-template标准语法

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

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

3.标准语法-原文输出

｛｛@ value｝｝

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

4.标准语法-条件输出

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

5.标准语法-循环输出

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

6.标准语法-过滤器

｛｛value | filterName｝｝

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