模板引擎
干啥用的？
假如说我的后台返回了一串这样的数据，让我们去渲染到界面以表格的形式显示。年龄大于18显示成年小于18显示未成年（这里就直接var来声明了）。
var arr = [
{name : "last", age : 9,message:"s6第一个王者"},
{name : "ning", age : 18,message:"s8Fmvp"},
{name : "ming", age : 16,message:"电竞铁人"},
{name : "theshy", age : 19,message:"世一上"},
{name : "otto", age :25,message:"轮椅人"},
]
如果用原生js的话我的思路是这样的：
<table>
<thead><tr><th>姓名</th><th>年龄</th><th>含金量</th></tr></thead>
<tbody id="tdd"></tbody>
</table>
var tbo=document.getElementById("tdd");
for(var i=0;i<arr.length;i++){
var tr=document.createElement("tr");
for (const key in arr[i]) {
var td=document.createElement("td");
td.innerHTML=arr[i][key];
tr.appendChild(td);
}
tbo.appendChild(tr);
}
通过循环和遍历让数据填到页面上
而模板引擎就是完成这种数据和页面分离的技术
怎么用的？
今天说的主要是art-template这种引擎的使用方法。
在使用模板引擎是需要准备几个步骤
1.导入模板引擎（和jquery一样使用前都要导入文件）
如果需要文件可以私信我，也可以自行下载。
<script src="./template-web.js"></script>
2.准备一个模板
这个模板有几个要注意的地方
- 必须是scrip标签
-
scrip标签必须有type属性，并且type属性不能为
text/javascript
最好是
text/html
(有标签提示) - 必须有一个id
<script type="text/html" id="tpl">
//这里拼接html结构
</script>
3.调用模板 生成html，template(模板的id, 需要填充到模板里面的数据)
<script>
var arr = [
{name : "last", age : 9,message:"s6第一个王者"},
{name : "ning", age : 18,message:"s8Fmvp"},
{name : "uzi", age : 16,message:"yyds"},
{name : "theshy", age : 19,message:"世一上"},
{name : "otto", age :25,message:"轮椅人"},
];
var html = template("tpl", {list : arr});
</script>
下面介绍模板引擎的循环和分支语句
循环： {
{each}} 结束语法{
{/each}}
分支： {
{if}} 的结束语法 {
{/if}}
写语法的时候 一定注意要写闭合语法
用法示例：
{{each list value}}
<tr>
<td>{{value.name}}</td>
{{if value.age > 18}}
<td>成年</td>
{{else}}
<td>小朋友</td>
{{/if}}
</tr>
{{/each}}
each后面的 list是你要便利的数组，而value就是值。
{
{ }} 这个符号既可以下愈发 也可以用于变量取值
上面的案例我们使用模板引擎做一下：
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>含金量</th>
</tr>
</thead>
<tbody id="tdd"></tbody>
</table>
<script src="./02-template/template-web.js"></script>
<!-- 2. 准备一个模板 -->
<script type="text/html" id="tpl">
{{each list value}}
<tr>
<td>{{value.name}}</td>
<!-- <td>{{value.age}}</td> -->
{{if value.age > 18}}
<td>成年</td>
{{else}}
<td>未成年</td>
{{/if}}
<td>{{value.message}}</td>
</tr>
{{/each}}
</script>
<script>
var arr = [{
name: "last",
age: 9,
message: "s6第一个王者"
},
{
name: "ning",
age: 18,
message: "s8Fmvp"
},
{
name: "uzi",
age: 16,
message: "yyds"
},
{
name: "theshy",
age: 19,
message: "世一上"
},
{
name: "otto",
age: 25,
message: "轮椅人"
},
];
var html = template("tpl", {
list: arr
});
var tbo=document.getElementById("tdd");
tbo.innerHTML+=html;
</script>
</body>
然后我们来看看效果图：
看起来没啥屌用是吧，我用原生js写比这还好理解一些，但是数据如果多了，那么我建议使用模板引擎。
（如果这篇文章有什么问题请及时联系我！）
版权声明：本文为qq_44771388原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。