模板引擎是什么？art-template怎么使用？

最新推荐文章于 2024-05-15 01:42:28 发布

南郭菌！

最新推荐文章于 2024-05-15 01:42:28 发布

阅读量1.5k

点赞数 2

分类专栏： js学习文章标签： js html javascript

本文链接：https://blog.csdn.net/qq_44771388/article/details/116062446

版权

js学习专栏收录该内容

22 篇文章 1 订阅

订阅专栏

模板引擎

干啥用的？

假如说我的后台返回了一串这样的数据，让我们去渲染到界面以表格的形式显示。年龄大于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写比这还好理解一些，但是数据如果多了，那么我建议使用模板引擎。

（如果这篇文章有什么问题请及时联系我！）

南郭菌！

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
7
评论
模板引擎是什么？art-template怎么使用？

模板引擎干啥用的？假如说我的后台返回了一串这样的数据，让我们去渲染到界面以表格的形式显示。年龄大于18显示成年小于18显示未成年（这里就直接var来声明了）。 var arr = [ {name : "last", age : 9,message:"s6第一个王者"}, {name : "ning", age : 18,message:"s8Fmvp"}, {name : "ming", age : 16,message:"电竞铁
复制链接

扫一扫