html 模版
使用后台开发语言的都很了解语言的动态性给开发带来的好处，PHP，aspx，jsp页面都可以直接使用相应的语法和变量，输出的事就交给解释器或编译器了，用起来方便快捷，但需要额外的解释工作；
例如php模板，需要php解析后，再由apache输出；aspx需要专用dll解析后，由IIS输出；jsp需要虚拟机解析后，由tomcat输出；
总之，就是web服务器无法接识别并输出这些动态语言的文件格式，但对html都直接识别输出给浏览器，如果直接用html来做网页内容的展示，就少了一层解析工作，从客户端发起请求，到网页输出，不可置疑html一定是最快的，这就是为什么大并发网站都会将动态内容静态化的一个重要原因；
html有打开效率高的先天优势，但也有一个先天缺陷-不支持动态语言，这也是html模板语言出现的原因，让网站即享受html高效，又享受内容的动态化；
看一看这个代金券列表的html
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>代金券列表</title>
- <meta name="keywords" content="美容,美发">
- <meta name="description" content="国内专业的美容、美发用品一站式购物平台">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <link rel="stylesheet" type="text/css" href="../css/reset.css">
- <link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="../css/main.css">
- <link rel="stylesheet" type="text/css" href="../css/child.css">
- <link rel="stylesheet" type="text/css" href="../css/voucher_list.css">
- </head>
- <body id="home-320">
- <header id="header"></header>
- <div class="content">
- <div class="product-cnt">
- <div id="product_list"></div>
- <div class="pagination mt10" id="page">
- <a href="javascript:void(0);" class="pre-page disabled">上一页</a>
- <select name="page_list" style="padding: 7px 4px; vertical-align: top;"></select>
- <a href="javascript:void(0);" class="next-page ">下一页</a>
- </div>
- </div>
- </div>
- <div class="footer" id="footer"></div>
- <input type="hidden" name="page" value="5">
- <input type="hidden" name="curpage" value="1">
- <input type="hidden" name="hasmore">
- </body>
- <script type="text/html" id="home_body">
- <div style="text-align: center; margin-bottom: 10px;">您当前可用积分<%=member_points%></div>
- <% if( recommend_voucher ) { %>
- <ul class="ncp-voucher-list">
- <% for(var i = 0;i<recommend_voucher.length;i++) { %>
- <li>
- <div class="ncp-voucher">
- <div class="cut"></div>
- <div class="info">
- <a href="#" class="store"><%=recommend_voucher[i].voucher_t_storename%></a>
- <p class="store-classify"></p>
- <div class="pic"><img src="<%=recommend_voucher[i].voucher_t_customimg%>" /></div>
- </div>
- <dl class="value">
- <dt>￥<em><%=recommend_voucher[i].voucher_t_price%></em></dt>
- <dd>购物满<%=recommend_voucher[i].voucher_t_limit%>元可用</dd>
- <dd class="time">有效期至<%=recommend_voucher[i].voucher_t_end_date%></dd>
- </dl>
- <div class="point">
- <% if(recommend_voucher[i].voucher_t_points != 0) { %>
- <p class="required">需<em><%=recommend_voucher[i].voucher_t_points%></em>积分</p>
- <% } else { %>
- <p class="required"><em>免费领取</em></p>
- <% } %>
- <p><em><%=recommend_voucher[i].voucher_t_giveout%></em>人已领取</p>
- </div>
- <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>
- </div>
- </li>
- <% } %>
- </ul>
- <% } else { %>
- <div class="no-record">
- 暂无记录
- </div>
- <% if(store_id) {%>
- <a class="more" href="voucher_list.html">去其他店铺看看</a>
- <% } %>
- <% } %>
- </script>
- <script type="text/javascript" src="../js/config.js"></script>
- <script type="text/javascript" src="../js/zepto.min.js"></script>
- <script type="text/javascript" src="../js/touch.js"></script>
- <script type="text/javascript" src="../js/template.js"></script>
- <script type="text/javascript" src="../js/common.js"></script>
- <script type="text/javascript" src="../js/tmpl/common-top.js"></script>
- <script type="text/javascript" src="../js/tmpl/footer.js"></script>
- <script src="../js/simple-plugin.js" type="text/javascript"></script>
- <script type="text/javascript" src="../js/voucher_list.js"></script>
- <script type="text/javascript" src="../js/tmpl/footer.js"></script>
- </html>
模板内容<script type="text/html" id="home_body"></script>内，通过以下js来将ajax接收到的数据动态展示出来
- $.ajax({
- url:ApiUrl+"/index.php?act=voucher&curpage="+curpage+"&page="+page,
- type:'get',
- data:{key:key,store_id:store_id},
- dataType:'json',
- success:function(result){
- var html = template.render('home_body', result.datas);
- $("input[name=hasmore]").val(result.hasmore);
- $("#product_list").empty();
- $("#product_list").append(html);
- $(window).scrollTop(0);
- if(curpage>1){
- $('.pre-page').removeClass('disabled');
- }else{
- $('.pre-page').addClass('disabled');
- }
- if(curpage<result.page_total){
- $('.next-page').removeClass('disabled');
- }else{
- $('.next-page').addClass('disabled');
- }
- $("input[name=curpage]").val(curpage);
- }
- });
以上的代码这两行是关键
把json数据传给模板函数，得到html字符串
var html = template.render('home_body', result.datas);
将html字符串写入html展示区
$("#product_list").append(html);
模板渲染的过程：js->ajax->后台->json->模板->html
这样即可以html的效率和动态都可以享用了；
artTemplate 原生 js 模板语法
html 模版的更多相关文章
- 创建ABPboilerplate模版项目
本文是根据角落的白板报的<通过ABPboilerplate模版创建项目>一文的学习总结,感谢原文作者角落的白板报. 1 准备 开发环境: Visual Studio 2015 update ...
- 使用boilerplate模版创建解决方案
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 话不多说,让我们开始干吧!对于还没有接触ABP框架或者接触时间还不是很长的小伙伴来说,我建议还是使用官方建议的做法,那就是到ABP ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（29）-T4模版
系列目录 本节不再适合本系统,在58,59节已经重构.请超过本节 这讲适合所有的MVC程序 很荣幸,我们的系统有了体验的地址了.演示地址 之前我们发布了一个简单的代码生成器,其原理就是读取数据库的表结 ...
- 构建自己的PHP框架--构建模版引擎(1)
前段时间太忙,导致好久都没有更新博客了,今天抽出点时间来写一篇. 其实这个系列的博客很久没有更新了,之前想好好规划一下,再继续写,然后就放下了,今天再捡起来继续更新. 今天我们来说一下,如何构建自己的 ...
- asp.net读取模版并写入文本文件
本文要介绍的是ASP.NET怎样读写文本文件,但更重要的是实现的过程.使用的工具是Visual Studio 2015 ,.NET版本是4.6.1 .一共建立的2个项目,HoverTreePanel和 ...
- [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)
Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义: 文本:由0个或 ...
- C++ 模版
函数模版 #include <iostream> using namespace std; template<typename T> T add(T t1, T t2) { r ...
- Python 【第十一章】 Django模版
1.直接传值 urls.py """mysite URL Configuration The `urlpatterns` list routes URLs to view ...
- Django模版语言 格式化显示 后台datatime()时间
Django模版语言 格式化显示 后台datatime()时间 场景描述:
- Smarty模版引擎的原理
Smarty是一个使用php写出来的模版引擎,用来将原本与html代码混杂在一起PHP代码逻辑分离,实现前后端分离. Smarty模板优点: 1. 速度:采用Smarty编写的程序可以获得最大速度的提 ...
随机推荐
- SQL Server在存储过程中编写事务处理代码的三种方法
SQL Server中数据库事务处理是相当有用的,鉴于很多SQL初学者编写的事务处理代码存往往存在漏洞,本文我们介绍了三种不同的方法,举例说明了如何在存储过程事务处理中编写正确的代码.希望能够对您有所 ...
- Chrome插件——一键保存网页为PDF1.0发布
最新版本:V1.1 下载地址:http://download.csdn.net/detail/bdstjk/5722317 发布时间:2013-7-8 版本号:1.1.7.80 更新内容: 1.增加检 ...
- 测试网站页面网速的Python脚本
一.测试网站页面网速脚本 [root@salt ~]# cat check_url.py #!/usr/bin/python # coding: UTF-8 import StringIO,pycur ...
- Android基础新手教程——4.1.3 Activity登堂入室
Android基础新手教程--4.1.3 Activity登堂入室 标签(空格分隔): Android基础新手教程 本节引言: 好的,在学习了两节的Activity后相信大家已经知道怎样去使用Acti ...
- Codeforces 553B Kyoya and Permutation
problem 题意 本题题意不太easy看懂. 给定一个序列,我们能够把这个序列变成一些循环置换的和.然而这样的置换的方法是不止一种的.我们定义一种standard cyclic represent ...
- Node.js meitulu图片批量下载爬虫 1.05版（Final最终版）
//====================================================== // https://www.meitulu.com图片批量下载Node.js爬虫1. ...
- 可伸缩Web架构与分布式系统（2）
开源软件近年来已变为构建一些大型网站的基础组件.并且伴随着网站的成长,围绕着它们架构的最佳实践和指导准则已经显露.这篇文章旨在涉及一些在设计大型网站时需要考虑的关键问题和一些为达到这些目标所使用的组件 ...
- [Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统)
转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17. http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html ...
- jsp+servlet实现文件上传
上传(上传不能使用BaseServlet) 1. 上传对表单限制 * method="post" * enctype="multipart/form-data" ...
- ubuntu cp(copy) command
e.g. #cp –p –R /opt/lampp/drv ~/test Ubuntu_Linux命令:cp(copy)复制文件或目录 功能: 复制文件或目录 www.2cto.com 说 ...