art-template介绍

一、art-template介绍

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

二、安装和使用

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

三、相关代码示例

 1 两种定义模板方式用一个就可以了
 2 <div class="span_2 list_box">
 3     
 4 </div>
 5 
 6     <!-- 定义模板：原始语法 --><!---下面的list为js文件中渲染数据对象的属性名，curr为遍历数组元素对象时当前属性值，i为当前索引-->
 7     <script type="text/html" id="list_temp2">
 8     <% for (var i = 0, len = list.length; i < len; i++) { var curr=list[i]; %>
 9     <div class="col_1_of_single1 span_1_of_single1">
10             <a href="/html/single.html">
11              <img src="<%= curr.img_url %>" class="img-responsive" alt=""/>
12              <h3><%= curr.title %></h3>
13              <p><%= curr.desc %></p>
14              <h4><%= curr.price %></h4>
15              </a>  
16         </div> 
17         <% } %>
18     </script>
19     <!-- 定义模板：标准语法（简洁语法） -->
20     <script type="text/html" id="list_temp">
21     <!--这个list是js渲染数据对象的属性名，curr是遍历数组元素时用于代替list的，index是索引，即curr【index】为当前值代替list-->
22     {{ each list curr index }}
23     <div class="col_1_of_single1 span_1_of_single1">
24             <a href="/html/single.html">
25              <img src="{{ curr.img_url2 }}" class="img-responsive" alt=""/>
26              <h3>{{ curr.title }}</h3>
27              <p>{{ curr.desc }}</p>
28              <h4>{{ curr.price }}</h4>
29              </a>  
30         </div> 
31         {{ /each }}
32     </script>
33 
34 <!--js文件中使用requirejs引入需要的模块包括art-template模块（取的名字为template，这个模块是在config文件中配置好的一个art-template短名称），rap2模拟假数据，jquery获取假数据以及将数据渲染至html文件中的.list_box中-->
35 require(["config"], function(){
36   require(["jquery", "template", "header", "footer"], function($, template, header){
37     <!--jquery中方法动态获取列表页面数据（模拟假数据）-->
38         $.getJSON("http://rap2api.taobao.org/app/mock/25320/api/list", function(data){
39     <!--这个template是art-templatede中有的函数，他有2个参数，第一个是script标签的id，第二个参数是模板中需要循环遍历的对象和其值-->
40             const html = template("list_temp2", {list : data.res_body.data});
41             $(".list_box").html(html);
42         })
43     });
44 });

一、art-template介绍

猜你喜欢