为什么要使用html模板技术

最新推荐文章于 2024-09-20 14:34:34 发布

人鱼传说

最新推荐文章于 2024-09-20 14:34:34 发布

阅读量8k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/baronyang/article/details/51452992

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

使用后台开发语言的都很了解语言的动态性给开发带来的好处，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的效率和动态都可以享用了；