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编写的程序可以获得最大速度的提 ...
随机推荐
- 'dict_values' object does not support indexing, Python字典dict中由value查key
Python字典dict中由value查key 众所周知,字典dict最大的好处就是查找或插入的速度极快,并且不想列表list一样,随着key的增加越来越复杂.但是dict需要占用较大的内存空间,换句 ...
- iOS：Masonry练习详解
Masonry练习详解 添加约束的方式: 1.通过使用NSLayoutConstraints添加约束到约束数组中,之前必须设置translatesAutoresizingMaskIntoConst ...
- DL380 G6 BIOS刷新方法
bios下载地址SP44873.exe (5.9 MB) http://h20000.www2.hp.com/bizsupport/TechSupport/SoftwareDescription.js ...
- vue-resource基本使用方法
一.vue-resource特点 1.体积小:vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2.支持主流 ...
- Swing：LookAndFeel 教程第一篇——手把手教你写出自己的 LookAndFeel
本文是 LookAndFeel 系列教程的第一篇. 是我在对 Swing 学习摸索中的一些微薄经验. 我相信,细致看全然系列之后.你就能写出自己的 LookAndFeel. 你会发现 Swing 原来 ...
- TestNG+ReportNG+Maven优化测试报告
转载:https://www.cnblogs.com/hardy-test/p/5354733.html 首先在eclipse里面创建一个maven项目,具体要配置maven环境,请自行百度搭配环境. ...
- NodeJS实战——创建基础应用并应用模板引擎
本次的目的是搭建一个最基础忽地可以实现功能的NodeJSserver,可以体现出NodeJS的工作流程以及开发的基本框架. 需求:已经安装了nodejs以及express. 一.构建基础的NodeJS ...
- Github——Git设置及GitHub的使用
把github上的help. First : 安装:ubuntu 下,终端输入命令: sudo apt-get install git-core git-gui git-doc Next : 设置SS ...
- 如何查看mysql数据库的引擎/MySQL数据库引擎详解
一般情况下,mysql会默认提供多种存储引擎,你可以通过下面的查看: 看你的mysql现在已提供什么存储引擎:mysql> show engines; 看你的mysql当前默认的存储引擎:mys ...
- Java 连接使用 Redis
1. 开始在 Java 中使用 Redis 前, 我们需要确保已经安装了 redis 服务及 Java redis 驱动,且你的机器上能正常使用 Java. 首先你需要下载驱动包,下载 jedis.j ...