zoukankan      html  css  js  c++  java

  • 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 模板语法
  • 相关阅读:
    原码, 反码, 补码 详解
    二进制与十进制间的转换方法(图文教程)
    题目要求：将a，b两个数的值进行交换，并且不使用任何的中间变量。
    【转】面向对象的7个基本设计原则
    【转】UML类图符号 6种关系说明以及举例
    关于try catch
    关于异常
    java File类中的mkdir()和mkdirs()有什么区别
    反射中getMethods 与 getDeclaredMethods 的区别
    【转】Java利用反射机制访问私有化构造器
  • 原文地址：https://www.cnblogs.com/yelongsan/p/6419269.html
Copyright © 2011-2022 走看看