使用后台开发语言的都很了解语言的动态性给开发带来的好处，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. canvas如何兼容IE8

    大家都知道canvas是个非常好玩的东西,但是IE9以下的浏览器不支持,有时候业务需求必须用到canvas,且又要求兼容IE8浏览器,那怎么办呢? 1.添加对html5的支持:<!--[if I ...

  2. HTMLTestRunner美化

    https://www.cnblogs.com/findyou/p/6925733.html 参考这个,美化的不错,进入了汉化,及加入了一些样式,

  3. MacBook安装office

    已更新至最新版Microsoft Office 2016 v16.13.18052304,完美支持macOS High Sierra 10.13.4,破解方法很简单,先安装Microsoft_Offi ...

  4. ubuntu14.04 server 安装docker

    安装docker服务 $ curl -sSL https://get.docker.com/ | sh   $ ocker run hello-world 测试docker是否安装成功 ubuntu ...

  5. Netty 中文教程 （二） Hello World ！详解

    1.HelloServer 详解 HelloServer首先定义了一个静态终态的变量---服务端绑定端口7878.至于为什么是这个7878端口,纯粹是笔者个人喜好.大家可以按照自己的习惯选择端口.当然 ...

  6. jQuery UI加入效果

    1.设计源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. Ubuntu 11.04 (Natty) 已经停止支持 但可以使用old-releases源了

    Ubuntu 11.04 (Natty) 已经停止支持,但可以使用old-releases源了,先备份源列表文件: sudo cp /etc/apt/sources.list /etc/apt/sou ...

  8. JUDE工具类图制作

    1. 类图图形元素 2. 连接线条 线的关系解释如下: 3. 创建一个类

  9. BOS中定区关联客户

    1. 首先发布crm服务 第一步:创建动态的web项目crm,导入hessian的jar 第二步:创建一个crm数据库和t_customer表 第三步:在crm项目的web.xml中配置spring的 ...

  10. MySQL学习总结（五）表数据查询

    查询数据记录,是指从数据库对象表中获取所要查询的数据记录,该操作可以说是数据最基本的操作之一,也是使用频率最高.最重要的数据操作. 1.单表数据记录查询 1.1.简单数据查询 SELECT field ...