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编写的程序可以获得最大速度的提 ...
随机推荐
- Jenkins+Maven+Gitlab+Nexus持续集成环境搭建
1.软件及服务介绍 Jenkins:jenkins是实现代码自动化流程上线的工具,Jenkins是一个独立的开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个 ...
- nginx出现的403错误
参考这篇文章: http://www.server110.com/nginx/201309/1792.html 我是这样解决的: 为了保证文件能正确执行,nginx既需要文件的读权限,又需要文件所有父 ...
- HDU2491 Priest John's Busiest Day
题目链接 题意: 有n个人要进行乒乓球比赛,每一个人都一个能力值.每一个人出现的次序就是他们住的位置 如今要求进行一场比赛,三个人,裁判的能力值在两个选手之间,住的位置也在两个人的之间 问这样的比赛一 ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-点动面板的每个按钮含义
参考下面的图示 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123 我的在线论坛: http://csrobot.g ...
- linux ps 命令的结果中VSZ，RSS，STAT的含义和大小
linux ps 命令的结果中VSZ,RSS,STAT的含义和大小 ps是linux系统的进程管理工具,相当于windows中的资源管理器的一部分功能. 一般来说,ps aux命令执行结果的几个列的信 ...
- JSON基本概念及使用
JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...
- C#中ArrayList类的使用
ArrayList类 使用大小可按须要动态添加的数组实现IList接口 命名空间:System.Collections 程序集:mscorlib 语法: public class ArrayList: ...
- Git使用笔记三
场景:开源社区提交代码每个人每一个MR只有两个commits,一个是merge前的,一个是merge时候的.因为他们不过是把自己在同一个PR上面提交的commits全部压缩成了一个而已.这个在git上 ...
- 客户端与服务端Post报文构造请求及Http Post与Get请求方法
客户端 namespace Client.Controllers { public class HomeController : Controller { // // GET: /Home/ publ ...
- 一个关于git push失败的解决方案
问题背景:在GitHub上创建了一个repositorie, 本地初始化并添加了远程仓库后,在GitHub上创建了一个README.md文件(注意不是从本地git push上去的),随后本地修改工程源 ...