模板引擎 | 模板

数据结构简单的时候可以使用模版引擎。实际上就是一个API。

artTemplate：https://aui.github.io/art-template/

使用步骤：

准备一个存放数据的盒子（不是必须的，使用body也可以）
引入template-web.js文件
定义模板（具体语法可以去官网查看），一定要指定script的id和type属性
调用template函数，为模板分配数据，template函数有两个参数一个返回值

1）参数1：模板的id

2）参数2：分配的数据，必须是一个JS对象的形式

3）一个返回值：是数据和模板标签组合好的结果

将 “拼接” 好的结果放到准备好的盒子中（不是必须的，console出来也可以看结果）

定义模板时的script标签一定好指定 id 和 type

tempalte函数语法：var html = template(模板id, Object);

代码举栗：

 1     <!-- 1. 定义一个模板，要指定script的id和type属性 -->
 2     <script id="moban" type="text/html">
 3         <h1>{{title}}</h1>
 4         <ul>
 5             <li>
 6                 <p>{{chenghu}}</p>
 7                 <p>{{liuyan}}</p>
 8             </li>
 9         </ul>
10     </script>
11
12
13     <script src="./assets/template-web.js"></script>
14
15     <script>
16         // 调用template函数
17         // 两个参数，一个返回值
18         // 参数1：模板的id
19         // 参数2：要显示的数据，必须是JS对象的形式
20         // 返回值：数据和模板拼接好的结果
21         var html = template('moban', {
22             title: '留言板123',
23             chenghu: '张三',
24             liuyan: 'hahahahahaha哈哈哈'
25         });
26         console.log(html);
27         document.body.innerHTML = html;
28     </script>