模板引擎是什么？art-template怎么使用？
模板引擎
干啥用的？
假如说我的后台返回了一串这样的数据，让我们去渲染到界面以表格的形式显示。年龄大于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>
<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写比这还好理解一些，但是数据如果多了，那么我建议使用模板引擎。
（如果这篇文章有什么问题请及时联系我！）