html 模版

    使用后台开发语言的都很了解语言的动态性给开发带来的好处，PHP，aspx，jsp页面都可以直接使用相应的语法和变量，输出的事就交给解释器或编译器了，用起来方便快捷，但需要额外的解释工作；

      例如php模板，需要php解析后，再由apache输出；aspx需要专用dll解析后，由IIS输出；jsp需要虚拟机解析后，由tomcat输出；

     总之，就是web服务器无法接识别并输出这些动态语言的文件格式，但对html都直接识别输出给浏览器，如果直接用html来做网页内容的展示，就少了一层解析工作，从客户端发起请求，到网页输出，不可置疑html一定是最快的，这就是为什么大并发网站都会将动态内容静态化的一个重要原因；

     html有打开效率高的先天优势，但也有一个先天缺陷-不支持动态语言，这也是html模板语言出现的原因，让网站即享受html高效，又享受内容的动态化；

    看一看这个代金券列表的html

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!doctype html>   
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>代金券列表</title>  
  6.     <meta name="keywords" content="美容,美发">  
  7.     <meta name="description" content="国内专业的美容、美发用品一站式购物平台">          
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
  9.     <meta name="apple-mobile-web-app-capable" content="yes">  
  10.     <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  11.     <meta name="format-detection" content="telephone=no">  
  12.     <link rel="stylesheet" type="text/css" href="../css/reset.css">  
  13.     <link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">  
  14.     <link rel="stylesheet" type="text/css" href="../css/main.css">  
  15.     <link rel="stylesheet" type="text/css" href="../css/child.css">  
  16.     <link rel="stylesheet" type="text/css" href="../css/voucher_list.css">  
  17. </head>  
  18. <body id="home-320">  
  19.     <header id="header"></header>   
  20.     <div class="content">  
  21.         <div class="product-cnt">  
  22.             <div id="product_list"></div>  
  23.             <div class="pagination mt10" id="page">  
  24.                 <a href="javascript:void(0);" class="pre-page disabled">上一页</a>  
  25.                 <select name="page_list" style="padding: 7px 4px;  vertical-align: top;"></select>  
  26.                 <a href="javascript:void(0);" class="next-page ">下一页</a>  
  27.             </div>  
  28.         </div>  
  29.     </div>  
  30.     <div class="footer" id="footer"></div>  
  31.     <input type="hidden" name="page" value="5">  
  32.     <input type="hidden" name="curpage" value="1">  
  33.     <input type="hidden" name="hasmore">  
  34. </body>  
  35. <script type="text/html" id="home_body">  
  36.     <div style="text-align: center; margin-bottom: 10px;">您当前可用积分<%=member_points%></div>  
  37.     <% if( recommend_voucher ) { %>  
  38.         <ul class="ncp-voucher-list">  
  39.             <% for(var i = 0;i<recommend_voucher.length;i++) { %>  
  40.                 <li>  
  41.                     <div class="ncp-voucher">  
  42.                         <div class="cut"></div>  
  43.                         <div class="info">  
  44.                             <a href="#" class="store"><%=recommend_voucher[i].voucher_t_storename%></a>  
  45.                             <p class="store-classify"></p>  
  46.                             <div class="pic"><img src="<%=recommend_voucher[i].voucher_t_customimg%>" /></div>  
  47.                         </div>  
  48.                         <dl class="value">  
  49.                             <dt>￥<em><%=recommend_voucher[i].voucher_t_price%></em></dt>  
  50.                             <dd>购物满<%=recommend_voucher[i].voucher_t_limit%>元可用</dd>  
  51.                             <dd class="time">有效期至<%=recommend_voucher[i].voucher_t_end_date%></dd>  
  52.                         </dl>  
  53.                         <div class="point">  
  54.                             <% if(recommend_voucher[i].voucher_t_points != 0) { %>  
  55.                                 <p class="required">需<em><%=recommend_voucher[i].voucher_t_points%></em>积分</p>  
  56.                             <% } else { %>  
  57.                                 <p class="required"><em>免费领取</em></p>  
  58.                             <% } %>      
  59.                             <p><em><%=recommend_voucher[i].voucher_t_giveout%></em>人已领取</p>  
  60.                         </div>  
  61.                         <div class="button"><a target="_blank" href="javascript:void(0);" nc_type="exchangebtn" data-param='<%=recommend_voucher[i].voucher_t_id;%>' data-store='<%=recommend_voucher[i].voucher_t_store_id;%>' class="ncp-btn ncp-btn-red">立即领取</a></div>  
  62.                     </div>  
  63.                 </li>  
  64.             <% } %>  
  65.         </ul>  
  66.     <% } else { %>  
  67.         <div class="no-record">  
  68.             暂无记录  
  69.         </div>  
  70.         <% if(store_id) {%>  
  71.             <a  class="more" href="voucher_list.html">去其他店铺看看</a>  
  72.         <% } %>  
  73.     <% } %>  
  74. </script>  
  75. <script type="text/javascript" src="../js/config.js"></script>  
  76. <script type="text/javascript" src="../js/zepto.min.js"></script>  
  77. <script type="text/javascript" src="../js/touch.js"></script>  
  78. <script type="text/javascript" src="../js/template.js"></script>  
  79. <script type="text/javascript" src="../js/common.js"></script>  
  80. <script type="text/javascript" src="../js/tmpl/common-top.js"></script>  
  81. <script type="text/javascript" src="../js/tmpl/footer.js"></script>  
  82. <script src="../js/simple-plugin.js" type="text/javascript"></script>  
  83. <script type="text/javascript" src="../js/voucher_list.js"></script>  
  84. <script type="text/javascript" src="../js/tmpl/footer.js"></script>  
  85. </html>  

模板内容<script type="text/html" id="home_body"></script>内，通过以下js来将ajax接收到的数据动态展示出来

 

 

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. $.ajax({  
  2.             url:ApiUrl+"/index.php?act=voucher&curpage="+curpage+"&page="+page,  
  3.             type:'get',  
  4.                 data:{key:key,store_id:store_id},  
  5.             dataType:'json',  
  6.             success:function(result){  
  7.                 var html = template.render('home_body', result.datas);  
  8.                                 $("input[name=hasmore]").val(result.hasmore);  
  9.                 $("#product_list").empty();  
  10.                 $("#product_list").append(html);  
  11.   
  12.                 $(window).scrollTop(0);  
  13.   
  14.                 if(curpage>1){  
  15.                     $('.pre-page').removeClass('disabled');  
  16.                 }else{  
  17.                     $('.pre-page').addClass('disabled');  
  18.                 }  
  19.   
  20.                 if(curpage<result.page_total){  
  21.                     $('.next-page').removeClass('disabled');  
  22.                 }else{  
  23.                     $('.next-page').addClass('disabled');  
  24.                 }  
  25.   
  26.                 $("input[name=curpage]").val(curpage);  
  27.             }  
  28.         });  

以上的代码这两行是关键

 

把json数据传给模板函数，得到html字符串

var html = template.render('home_body', result.datas);

将html字符串写入html展示区
$("#product_list").append(html);

模板渲染的过程：js->ajax->后台->json->模板->html

这样即可以html的效率和动态都可以享用了；

artTemplate 原生 js 模板语法

posted on 2017-02-20 14:10  蒂其之死  阅读(1517)  评论(0)  编辑  收藏  举报

导航