什么是模板引擎:
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的文档。
为什么使用:
例子:轮播图
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="pc_imgBox" href="#" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
</div>
<div class="item">
<a class="pc_imgBox" href="#" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
</div>
<div class="item">
<a class="pc_imgBox" href="#" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
</div>
<div class="item">
<a class="pc_imgBox" href="#" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
</div>
</div>
在上述的HTML代码中,我们可以看到有很多个带背景图的a标签,这样构成了一个轮播图,但是试想一下,如果我们的图片需要从后台进行添加或修改,那么不可能我们前端去总是手动修改图片,因此我们需要动态的生成html代码,如何生成,就需要模板引擎了。
代码:
HTML代码:
<!-- 使用模板引擎 -->
<script type="text/template" id="pointTemplate">
<% for(var i = 0 ; i < list.length ; i ++){ %>
<li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li>
<% } %>
</script>
<script type="text/template" id="imageTemplate">
<% for(var i = 0 ; i < list.length ; i ++){ %>
<div class="item <%=i==0?'active':''%>">
<% if(!isMobile){ %>
<a href="#" class="pc_imgBox" style="background-image: url(<%=list[i].pcUrl%>)"></a>
<% }else{ %>
<a href="#" class="m_imgBox"><img src="<%=list[i].mUrl%>" alt=""></a>
<% } %>
</div>
<% } %>
</script>
JS代码:
var getData = function(callback) {
// 缓存了数据
if (window.data) {
callback && callback(window.data);
} else {
// 1.获取轮播图数据 ajax
$.ajax({
type: 'GET',
url: 'js/data.json',
// 强制转换后台返回的数据为json对象
// 强制转换不成功程序报错,不会执行success,执行error回调
dataType: 'json',
data: '',
success: function(data) {
window.data = data;
callback && callback(window.data);
}
});
}
}
var render = function() {
getData(function(data) {
// 2.根据数据动态渲染 根据当前设备 屏幕宽度
var isMobile = $(window).width() < 768 ? true : false;
// 2.1 准备数据
// 2.2 把数据转化成HTML格式字符串(动态创建元素,字符串拼接,模板引擎(artTemplate))
// 使用模板引擎:哪些html静态内容需要变成动态的
// 发现:点容器,图片容器需要动态渲染 新建模板
// 开始使用
// <% console.log(list);%> 模板引擎中不可以使用外部变量
var pointHtml = template('pointTemplate', {
list: data
});
//console.log(pointHtml);
var imageHtml = template('imageTemplate', {
list: data,
isMobile: isMobile
});
//console.log(imageHtml);
/*2.3 把字符渲染页面当中*/
$('.carousel-indicators').html(pointHtml);
$('.carousel-inner').html(imageHtml);
});
}
render();