art-template介绍

一、art-template介绍

1. art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
2. 使用art-template也便于维护代码，以前我们进行数据渲染的时候是通过字符串拼接然后再通过append的方式追加到数据源id上。
3. 而用了模板引擎以后，我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。

二、安装和使用

• 第一种方式是直接从官网下载对应的js文件
• 第二种是 npm install art-template --save

三、相关代码示例

两种定义模板方式用一个就可以了
<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);
        })
    });
});