美文网首页其它
使用art-template模板引擎渲染数据

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

作者: 422ccfa02512 | 来源:发表于2018-08-15 22:28 被阅读991次

    一:什么是art-template

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

    二:art-template特性

    1. 拥有接近 JavaScript 渲染极限的的性能
    2. 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
    3. 支持 Express、Koa、Webpack
    4. 支持模板继承与子模板
    5. 浏览器版本仅 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种方式:

    1. 在命令行中使用如下命令
    npm install art-template --save
    
    1. 也可以在浏览器中实时编译,进入链接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);
            })
        });
    });
    

    相关文章

      网友评论

        本文标题:使用art-template模板引擎渲染数据

        本文链接:https://www.haomeiwen.com/subject/ohqsbftx.html