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

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

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

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

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

  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接收到的数据动态展示出来

  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. $(window).scrollTop(0);
  12. if(curpage>1){
  13. $('.pre-page').removeClass('disabled');
  14. }else{
  15. $('.pre-page').addClass('disabled');
  16. }
  17. if(curpage<result.page_total){
  18. $('.next-page').removeClass('disabled');
  19. }else{
  20. $('.next-page').addClass('disabled');
  21. }
  22. $("input[name=curpage]").val(curpage);
  23. }
  24. });

以上的代码这两行是关键

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

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

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

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

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

artTemplate 原生 js 模板语法

html 模版的更多相关文章

  1. 创建ABPboilerplate模版项目

    本文是根据角落的白板报的<通过ABPboilerplate模版创建项目>一文的学习总结,感谢原文作者角落的白板报. 1 准备 开发环境: Visual Studio 2015 update ...

  2. 使用boilerplate模版创建解决方案

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 话不多说,让我们开始干吧!对于还没有接触ABP框架或者接触时间还不是很长的小伙伴来说,我建议还是使用官方建议的做法,那就是到ABP ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（29）-T4模版

    系列目录 本节不再适合本系统,在58,59节已经重构.请超过本节 这讲适合所有的MVC程序 很荣幸,我们的系统有了体验的地址了.演示地址 之前我们发布了一个简单的代码生成器,其原理就是读取数据库的表结 ...

  4. 构建自己的PHP框架--构建模版引擎(1)

    前段时间太忙,导致好久都没有更新博客了,今天抽出点时间来写一篇. 其实这个系列的博客很久没有更新了,之前想好好规划一下,再继续写,然后就放下了,今天再捡起来继续更新. 今天我们来说一下,如何构建自己的 ...

  5. asp.net读取模版并写入文本文件

    本文要介绍的是ASP.NET怎样读写文本文件,但更重要的是实现的过程.使用的工具是Visual Studio 2015 ,.NET版本是4.6.1 .一共建立的2个项目,HoverTreePanel和 ...

  6. [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)

    Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义:   文本:由0个或 ...

  7. C++ 模版

    函数模版 #include <iostream> using namespace std; template<typename T> T add(T t1, T t2) { r ...

  8. Python 【第十一章】 Django模版

    1.直接传值 urls.py """mysite URL Configuration The `urlpatterns` list routes URLs to view ...

  9. Django模版语言 格式化显示 后台datatime()时间

    Django模版语言 格式化显示 后台datatime()时间 场景描述:

  10. Smarty模版引擎的原理

    Smarty是一个使用php写出来的模版引擎,用来将原本与html代码混杂在一起PHP代码逻辑分离,实现前后端分离. Smarty模板优点: 1. 速度:采用Smarty编写的程序可以获得最大速度的提 ...

随机推荐

  1. 设计工作-Axure

    1,百度百科 http://baike.baidu.com/view/3332366.htm?fromtitle=axure&fromid=5056136&type=syn 2,官方网 ...

  2. oracle 10g函数大全--其他函数

    DUMP(w[,x[,y[,z]]]) [功能]返回数据类型.字节长度和在内部的存储位置. [参数] w为各种类型的字符串(如字符型.数值型.日期型……) x为返回位置用什么方式表达,可为:8,10, ...

  3. http://www.cnblogs.com/shortboy/p/4429368.html

    http://www.cnblogs.com/shortboy/p/4429368.html

  4. 支付宝支付系统繁忙,请稍后再试(ALI64)错误解决

    解决方法:将商户支付參数的seller邮箱换成与partner同样的数字串,依然无法支付请检查所给參数

  5. PowerDesigner 将表的字段name属性设置到comment凝视

    1.首先copy以下的vbs脚本.并将其另存为name2comment.vbs '*********************************************************** ...

  6. ajax乱码解决总结

    第一,javascript沿用java的字符处理方式,内部是使用unicode来处理所有字符的,第二,utf-8是每个汉字(unicode字符)用3个字节来存储.第三,用utf-8来send数据是不会 ...

  7. java泛型 7 泛型的基本介绍和使用

    现在开始深入学习Java的泛型了,以前一直只是在集合中简单的使用泛型,根本就不明白泛型的原理和作用.泛型在java中,是一个十分重要的特性,所以要好好的研究下. 一.泛型的基本概念 泛型的定义:泛型是 ...

  8. 基于Jekyll的博客模板

    代码地址如下:http://www.demodashi.com/demo/13147.html 效果 环境配置 环境 Windows 10 Git Bash 安装ruby 下载rubyinstalle ...

  9. C语言-十进制转换为二进制函数

    char * itobs(int num, char * str) { int i; * sizeof(int); ; i >= ; i--, num >>= ) { str[i] ...

  10. C# DateTime的11种构造函数

    别的也不多说没直接贴代码 using System; using System.Collections.Generic; using System.Globalization; using Syste ...