我们经常会使用AJAX/JSONP等技术,从服务器端获取到我们所需要的数据,然后把数据动态的展示在对应页面中。
1.不依托JS,而是使用PHP/Ruby/Python/JSP等技术实现数据的绑定(没有前后端分离)
2.JS代码中进行字符串拼接
这种方式属于前后端分离,在JS中获取到服务器端返回的数据后,把之前在HTML页面中写好的标签,一句句的复制到JS中,用字符串拼接的方式,把标签和数据拼接在一起,最后在把拼接完成的字符串插入到页面中指定的位置。但是这种处理方式对于简单的字符串拼接还是可以的,但是如果遇到非常复杂的,就不适用了。
这种方式有一种弊端:开发效率低,后期不好改动,JS代码结构很乱,不易于后期的维护,用此动态创建元素借点的方式,还会引发多次的DOM回流,影响页面的性能
<header class="header">
<h1>
<span>编号</span>
<span>姓名</span>
<span>性别</span>
<span>分数</span>
</h1>
</header>
<section class="content">
<ul>
<!--这里动态加载节点-->
<!--<li>
<span>001</span>
<span>消愁</span>
<span>男</span>
<span>88</span>
</li>-->
</ul>
</section>
<script src="js/zepto.min.js" type="text/javascript"></script>
<script type="text/javascript">
function bindHTML(data) {
var str = "";
$.each(data, function (index, item) {
str += '<li>';
str += '<span>' + item.num + '</span>';
str += '<span>' + item.name + '</span>';
str += '<span>' + (item.sex==0?'男':'女') + '</span>';
str += '<span>' + item.score + '</span>';
str += '</li>';
});
$(".content>ul").html(str);
}
$.ajax({
url: 'json/data.json',
type: 'get',
dataType: 'json',
cache: false,
success: bindHTML
});
</script>
实现的效果:
3.使用模板引擎绑定数据和渲染数据
模板引擎的原理其实也是字符串拼接,但是和第二种不同的是,它不是把字符串在JS代码中拼接,而是先在HTML页面中,按照模板提供的规则把数据内容嵌入到HTML标签中。最后由模板解析成需要的字符串,在JS中把解析出来的字符串放入到页面中的指定位置进行渲染。
EJS模板引擎
EJS(Embedded JavaScript)也是众多模板中的一种,它主要是NODE开源的模板,在NODE环境下实现绑定和渲染的。但是它也可以单独的在客户端调取使用,我们接下来就介绍独立在客户端的使用
在客户端使用EJS主要分成四步:
1.导入EJS
EJS的源码大家可以去它的官网进行下载:http://www.embeddedjs.com/(但是我下载不了)
2.准备需要绑定的数据
在真实项目中,这一步需要使用AJAX或者JSONP等技术从服务器获取,然后把获取回来的数据进行解析重构
3.在HTML页面中设定模板和嵌入数据
模板有自己的渲染规则,我们把需要写的JS循环判断放在<%%>中,如果需要输出用<=%%>,其实非常简单就是把之前的字符串拼接方式中的JS写在了HTML中,这样EJS负责把模板中的内容获取到,然后按照规则把数据和HTML标签拼凑在一起就好
4.在JS中为EJS模板提供需要绑定的数据
<!--第一步-->
<script type="text/javascript" src="js/ejs.min.js"></script>
<!--第三步-->
<script type="text/template" id="conTemplate">
<%$.each(matchData,function(index,item){%>
<li>
<span><%=item.num%></span>
<span><%=item.name%></span>
<span><%=item.sex%></span>
<span><%=item.score%></span>
</li>
<%})%>
</script>
<script src="js/zepto.min.js" type="text/javascript"></script>
<script type="text/javascript">
// rem
document.documentElement.style.fontSize = document.body.clientWidth / 320 * 100 + "px";
// 第四步
function bindHTML(data) {
var conTemplate = $("#conTemplate").html();
var result = ejs.render(conTemplate, {matchData: data});
$(".content>ul").html(result);
}
// 第二步
$.ajax({
url: 'json/data.json',
type: 'get',
dataType: 'json',
cache: false,
success: bindHTML
});
</script>