首先,谈谈我自己对模板引擎的理解。
存在既是道理,模板引擎的诞生应该也有其原因与发展过程,模板引擎产生的大背景应该有两个主力因素。
一,数据:“信息经济”、“大数据“ 时代的带来,数据越来越多,数据总的来说都是存储在一张张表中的(数据库存储信息的方式),也可以说是一条条记录,每个记录又是一个个的键值对组成,在数据之上的业务逻辑处理则是对数据的商业与业务应用,而前端则是商业与业务实现的入口,是呈现在用户面前的第一感官刺激,是与用户进行交互并进行数据采集、存储、显示的端口。这就存在这样的一个情况,当在页面上展示信息的时候,会从数据库中抽取出匹配的记录,再对返回的数据进行处理,最终拼装成一个个html片段再交由”端“环境进行处理、展示,这个过程中就会存在不断重复的操作,比如,页面上要显示一个班级的人的基本信息,每个人的基本信息对数据库来说都是一条记录,这条记录主要属性是学生的学号、性别、电话、联系方式。一次性从数据库中取出所有的记录(假设有50个学生),返回到”端“的数据就有50条记录,前端在进行数据处理的时候就要循环五十次,拼接出50个html碎片,再进行组装、渲染、显示等但是其实每个html片段需要的信息是相同的属性(学号、性别、电话、联系方式),这时我们就会考虑有没有这么一个东西,在特定格式的html文档中,我把业务相关的数据给它,它自己就可以在数据显示在特定的区域中去,js模板就是在这样的背景产生并不断应用、壮大。
二,用户体验与性能优化:一般的web开发要使用和后台开发程序配合的模板引擎,但随着用户体验的更高追求,页面无刷新或部分刷新的ajax被广泛应用后,js发送ajax请求回来的数据格越来越多,这些数据返回后一般都使用简洁的json格式,节约流量和提高效率,但json并不能直接在页面展示,而要通过js再转换拼装成html代码,将json这类的数据转换成html代码输出的这个过程要怎么优化呢?这就和第一条中后面所问的一样了。
我自己在项目中应用的js模板引擎是handlebars,基于此,js模板引擎应用大概有如下过程:
1,引入模板引擎,这和引入外部js文件一样
2,创建模板
3,编辑模板
4,封装要处理的数据
附上自己做的一个功能页面的代码作为参考:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content=""/>
<link rel="stylesheet" href="css/commom.css" />
<link rel="stylesheet" href="css/sharepage.css" />
<title>每人计主页分享</title>
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script id="shareConten" type="text/x-handlebars-template">
<header>
<div class="default_nav">
<a href="#" class="logo"></a>
<span>
每人计
<br />客流统计神器,旺店必备
</span>
<a class="down_app_btn" href="{{downloadurl}}" target="">免费下载</a>
</div>
</header>
<div class="main">
<div class="share_persion">
<img src="{{#with imageList}}{{persionLogo}}{{/with}}" class="persionLogo">
<div class="persion_dec">
<span class="persion_dec_title">
{{#with titleList}}
{{persionName}}
{{/with}}
</span>
<br />
<span class="persion_dec_shop">
{{#with titleList}}
{{shopName}}
{{/with}}
</span>
</div>
</div>
<div class="share_origin">
<span class="origin_company">来自<b>每人计</b></span>
<span class="origin_date">
{{shareDate}}
</span>
</div>
<hr />
<div class="share_content">
<span class="share_dec">
{{#with titleList}}
{{shareDes}}
{{/with}}
</span>
<img src="{{#with imageList}}{{shareImage}}{{/with}}" class="share_pic"/>
</div>
</div>
</script>
<script type="text/javascript">
var myTemplate = Handlebars.compile($("#shareConten").html());
var data = {
titleList:{persionName:"1234567",shopName:"8888888",shareDes:"123"},
imageList:{shareImage:"img/sharepage.jpg",persionLogo:"img/mypoto.png"},
shareDate:"2014-4-05",
downloadurl:"http://www.baidu.com"
}
$("body").html(myTemplate(data));
</script>
</body>
</html>
以下为推荐给大家handlebars的资源链接
1,http://www.rankber.com/handlebars-tutorial.html 入门
2,http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html 实际应用