模板引擎

数据结构简单的时候可使用模版引擎。实际上就是一个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>