使用art-template模板引擎渲染数据

_kyle

发布于 2020-08-24 12:00:43

1.7K0

发布于 2020-08-24 12:00:43

文章被收录于专栏：kyle的专栏kyle的专栏

一：什么是art-template

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。使用art-template也便于维护代码，以前我们渲染数据是以模板字符串的形式在js文件中写入的html内容，如果html内容需要修改，我们需要在js中修改。而用了模板引擎以后，我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。

二：art-template特性

拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点(Webpack Loader)
支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 6KB 大小

三：art-template与其他模板引擎运行速度对比

模板引擎运行速度对比

四：关于art-template的一些学习网站

https://github.com/aui/art-template（art-template完整文档）
https://aui.github.io/art-template/zh-cn/index.html（art-template中文文档）

五：安装art-template，有以下2种方式：

在命令行中使用如下命令

npm install art-template --save

也可以在浏览器中实时编译，进入链接ctrl+s保存文件至项目目录中：lib/template-web.js（gzip: 6kb这个源码是压缩过的）

六：art-template语法

art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。（例如再使用循环时，标准语法只能使用each循环遍历，而原始语法还可以使用for，while等循环）
标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始语法
<% 语句 %>
<% for(var i=0;i<list.length;i++)%{> <%}>

<%=  表达式 %>
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

<% %>与<%= %>这个的区别需要注意<% %>这个跟语句，若要跟表达式，则使用<%= %>

七：定义模板

因为浏览器不支持文件系统，所以 template(filename, data)不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，我们则使用<script id="tpl-user" type="text/html"></script>定义模板，如下所示：

<script id="tpl-user" type="text/html">
{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}
</script>

八：art-template使用示例：

两种定义模板方式用一个就可以了
<div class="span_2 list_box">
    
</div>

    <!-- 定义模板：原始语法 --><!---下面的list为js文件中渲染数据对象的属性名，curr为遍历数组元素对象时当前属性值，i为当前索引-->
    <script type="text/html" id="list_temp2">
    <% for (var i = 0, len = list.length; i < len; i++) { var curr=list[i]; %>
    <div class="col_1_of_single1 span_1_of_single1">
            <a href="/html/single.html">
             <img src="<%= curr.img_url %>" class="img-responsive" alt=""/>
             <h3><%= curr.title %></h3>
             <p><%= curr.desc %></p>
             <h4><%= curr.price %></h4>
             </a>  
        </div> 
        <% } %>
    </script>
    <!-- 定义模板：标准语法（简洁语法） -->
    <script type="text/html" id="list_temp">
    <!--这个list是js渲染数据对象的属性名，curr是遍历数组元素时用于代替list的，index是索引，即curr【index】为当前值代替list-->
    {{ each list curr index }}
    <div class="col_1_of_single1 span_1_of_single1">
            <a href="/html/single.html">
             <img src="{{ curr.img_url2 }}" class="img-responsive" alt=""/>
             <h3>{{ curr.title }}</h3>
             <p>{{ curr.desc }}</p>
             <h4>{{ curr.price }}</h4>
             </a>  
        </div> 
        {{ /each }}
    </script>

<!--js文件中使用requirejs引入需要的模块包括art-template模块（取的名字为template，这个模块是在config文件中配置好的一个art-template短名称），rap2模拟假数据，jquery获取假数据以及将数据渲染至html文件中的.list_box中-->
require(["config"], function(){
  require(["jquery", "template", "header", "footer"], function($, template, header){
    <!--jquery中方法动态获取列表页面数据（模拟假数据）-->
        $.getJSON("http://rap2api.taobao.org/app/mock/25320/api/list", function(data){
    <!--这个template是art-templatede中有的函数，他有2个参数，第一个是script标签的id，第二个参数是模板中需要循环遍历的对象和其值-->
            const html = template("list_temp2", {list : data.res_body.data});
            $(".list_box").html(html);
        })
    });
});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html