使用后台开发语言的都很了解语言的动态性给开发带来的好处，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. 防止木马利用iframe框架来调用外域JS代码

    <!--防止木马利用iframe框架来调用外域JS代码,不过滤自己网站的域名的框架网页开始--><SCRIPT LANGUAGE="JavaScript"> ...

  2. C# SendMail 发送邮件

    最近因为用的发送邮件的地方,就查询了资料,总结以下几个方法 1.利用新浪邮箱发送 2.利用公司邮箱发送 3.利用CDO发送,这种方式要引用Interop.ADODB.dll(http://www.no ...

  3. mahout运行测试与数据挖掘算法之聚类分析（一）kmeans算法解析

    在使用mahout之前要安装并启动hadoop集群 将mahout的包上传至linux中并解压即可 mahout下载地址: 点击打开链接 mahout中的算法大致可以分为三大类: 聚类,协同过滤和分类 ...

  4. 马化腾从CFIDO到QQ(CFIDO BBS回忆录)

    微博上看到一个和马化腾貌似挺熟的人,聊起了和马化腾的交往,偶然间提到了这个CFIDO东西,搜索了一下,发现是远古的一个bbs.然后还看到一篇以网友的视角写的当时的一些回忆.我觉得挺好玩的,然后看到文章 ...

  5. java.lang.NoClassDefFoundError: com.doodlemobile.gamecenter.Platform

    这时候能够尝试一下下面方法: 右击"项目名"--->"Build path"----->"configure build path&quo ...

  6. perl学习笔记——正则表达式

    正则表达式 简单模式:匹配$_中的内容,只需要将模式写在一对斜线(/)中就可以了. 如:#!/usr/bin/env perl use 5.010; $_="yabba dabba doo& ...

  7. UnicodeEncodeError: ‘gbk’ codec can’t encode character u’\u200e’ in position 43: illegal multibyte sequence

    [问题] python中已获取网页: http://blog.csdn.net/hfahe/article/details/5494895 的html源码,其时UTF-8编码的. 提取出其标题部分: ...

  8. sql server 常用函数 及 方法

    返回受上一语句影响的行数: @@ROWCOUNT 语法@@ROWCOUNT 返回类型integer 注释任何不返回行的语句将这一变量设置为 0 ,如 IF 语句. 示例下面的示例执行 UPDATE 语 ...

  9. unity, 弹出panel一定要放在UI Hierarchy的底端

    如上图,buyPanel放在最底端,为的是它弹出时屏蔽所有其它UI的消息.

  10. 红茶一杯话Binder （传输机制篇_下）

    红茶一杯话Binder (传输机制篇_下) 侯 亮 1 事务的传递和处理 从IPCThreadState的角度看,它的transact()函数是通过向binder驱动发出BC_TRANSACTION语 ...