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编写的程序可以获得最大速度的提 ...
随机推荐
- Kubernetes连接外部数据源
Kubernetes架构下比较核心的问题是数据如何persistance,虽然提供了Persistent volumn的方式,但是对于像数据库之类的产品在kubernetes集群环境中运行和管理还是很 ...
- ubuntu16.04画图软件kolourpaint
1.安装kolourpaint sudo apt-get install kolourpaint4 -y 在里面搜索“kolourpaint”这个软件名.
- 'telnet' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
Win7或者win8等是默认没有安装telnet功能,所以你直接用telnet命令是用不了的: 下面介绍在win8下面如何操作:“控制面板”-->“程序”(在左下角)-->程序和功能--- ...
- Spark（一）-- Standalone HA的部署
首先交代一下集群的规模和配置 集群有六台机器,均是VM虚拟机,每台256M的内存(原谅楼主物理机硬件不太给力) 主机名分别是cloud1~cloud6 每台机器上都装有jdk6,和hadoop-2.2 ...
- windowsclient开发--使用、屏蔽一些快捷键
每一个windowsclient都有自己的一些快捷键,有的是windows系统提供的. 今天就要与大家分享一下.在windowsclient开发过程中对按键的处理. ESC按键 Duilib这个库中, ...
- centos 6.5 python2.6.6 zbar 安装
经过数次折腾,终于搞明白了这个zbar的安装顺序. 1.先安装http://zbar.sourceforge.net/download.html 下的zbar, 2.python 安装z ...
- php 基础入门篇之前言
本人文笔不好,言辞简陋.没有华丽的语句,也没有精致的词语.仅仅是想给大家说一下,和大家一块学习,共同进步.学一点技术,找个吃饭的手段!接下来我会梳理一下知识,算是温故知新,同一时候也算是和大家一起在学 ...
- .NET--百度百科
.NET是 Microsoft XML Web services 平台.XML Web services 允许应用程序通过 Internet 进行通讯和共享数据,而不管所采用的是哪种操作系统.设备或编 ...
- 如何在谷歌浏览器中查看Axure做的原型HTML
Axure RP Pro可谓是非常方便.好用的一款软件,因为它不仅能绘制出详细的产品构思,也能生成浏览器格式的产品原型.但如果想把原型拿给客户查看,需要看产品画的原型图时,但是打不开的话就悲剧了.经常 ...
- Parallel小记
List<Temp> tList = new List<Temp>(); ; i < ; i++) { tList.Add(new Temp() { id = i, na ...