js渲染数据的方法
2020-03-20 本文已影响0人
代艳霞
项目中通常需要用请求回来的数据作为
html的渲染内容，通常我们有两种方法来实现：
1:js拼接html标签字符串，然后作为interHtml插入到对应的元素；
2:复制模板dom，设置dom,然后插入到对应的地方；
今天就来简单的讲解一下上面两种方法的实现步骤和区别。
js拼接html标签字符串，然后作为interHtml插入到对应的元素
- 假如我们有如下
html标签需要用js来拼接：
<li class="listIteam" onclick='changeTitle("标题")'>标题</li>
- 观察这个
html内容用的是单引号（' '）多，还是双引号(" ")多，如果用的单引号多，我们就用双引号把这段html内容括起来，同时对html里面的双引号进行转义。同理，如果用的双引号多，我们就用单引号把这段html内容括起来，同时对html内容里面的单引号进行转义，（转义的理由就不多说了，是为了避免解析的时候发生歧义）,上述代码，我们用的双引号比较多，那我们就用单引号来把这段html内容括起来并进行转义。
'<li class="listIteam" onclick=\'changeTitle("标题")\'>标题</li>';
- 对
html需要用js变量来填充的地方进行html字符串的切割：在需要用变量来显示内容的前后各增加一个'+',假如此html里面的changeTitle函数的参数和li标签的innerhtml需要用js来填充，那我们就需要在changeTitle函数的参数值和li标签的innerhtml的内容前后各增加一个'+'
'<li class="listIteam" onclick=\'changeTitle("'+'标题'+'")\'>'+'标题'+'</li>'
- 把需要用
js来填充的内容，全部替换成对应的js变量，包括内容前后部分的''：
'<li class="listIteam" onclick=\'changeTitle("'+iteams[i].title+'")\'>'+iteams[i].title+'</li>'
- 打开页面，看到数据渲染成功，函数也可以正常执行，
js拼接html标签
此种方法的是我们常用的，但是弊端是我们经常会拼写错误，因为不但需要替换
js内容，有时候还需要转义，当html标签内容越多的时候，出错的概率也就越大。避免错误的方式，就是一步一步的来，但也难免手误引发错误。
复制模板dom，设置dom,然后插入到对应的地方；
- 在页面创建一个
html元素，并隐藏:
<ul class="box" style="display: none;">
<li class="listIteam">标题</li>
</ul>
- 复制
dom
//克隆dom结构,参数代表：是否需复制事件处理程序。
var cloneNote = $(".box .listIteam").clone(true);
- 设置
dom（修改内容，增加事件）
//设置dom
var currentIteams = iteams[i];
cloneNote.on('click', function () {
changeTitle(currentIteams.title);
});
cloneNote.html(currentIteams.title);
- 把元素插入到对应的地方
//设置dom 到对应的位置
$(".list").append(cloneNote);
- 我们来看一个项目的完整实现代码;
<body>
<!--创建dom并隐藏-->
<ul class="box" style="display: none;">
<li class="listIteam">标题</li>
</ul>
<!--复制dom到指定的位置-->
<ul class="list"></ul>
<script src="zepto.min.js"></script>
<script>
var iteams=[
{"title":"关于3月18日，系统升级的公告"},
{"title":"关于5月27日，系统升级的公告"},
{"title":"关于6月12日，系统升级的公告"}
];
for (var i=0;i<iteams.length;i++) {
//克隆dom结构,参数代表：是否需复制事件处理程序。
var cloneNote = $(".box .listIteam").clone(true);
//设置dom
var currentIteams = iteams[i];
cloneNote.on('click', function () {
changeTitle(currentIteams.title);
});
cloneNote.html(currentIteams.title);
//设置dom 到对应的位置
$(".list").append(cloneNote);
}
function changeTitle(title) {
alert(title);
}
</script>
</body>
- 打开页面：
函数执行结果
- 我们点击了第一个列表，函数执行的结果不是弹出第一条数据的内容，而是弹出最后一条数据的内容。经过调试发现是作用域的问题，因为函数执行的时候，
i=2所以我们始终只能拿到列表数据的最后一个，这个问题也很好解决，用闭包的特性，对代码进行修改，就可以了，代码如下：
<body>
<!--创建dom并隐藏-->
<ul class="box" style="display: none;">
<li class="listIteam">标题</li>
</ul>
<!--复制dom到指定的位置-->
<ul class="list"></ul>
<script src="zepto.min.js"></script>
<script>
var iteams=[
{"title":"关于3月18日，系统升级的公告"},
{"title":"关于5月27日，系统升级的公告"},
{"title":"关于6月12日，系统升级的公告"}
];
for (var i=0;i<iteams.length;i++) {
//克隆dom结构(注意：要复制box类下面的listIteam类,如果选择复制listIteam类，那你会得到不一样的结果，因为每次复制以后，页面就会多一个listIteam类，下次再复制的时候，会复制页面所有listIteam类，会造成页面元素多于我们期望的。)，参数代表：是否需复制事件处理程序。
var cloneNote = $(".box .listIteam").clone(true);
//闭包保存i的值
(function f(i) {
//设置dom
var currentIteams = iteams[i];
cloneNote.on('click', function () {
changeTitle(currentIteams.title);
});
cloneNote.html(currentIteams.title);
//设置dom 到对应的位置
$(".list").append(cloneNote);
})(i);
}
function changeTitle(title) {
alert(title);
}
</script>
</body>
- 再次打开页面，点击列表，效果如下图：
闭包逻辑
页面一切正常，当点击第一个元素的时候，弹出的是第一条数据的内容，到此，通过复制
dom,设置dom再插入到指定的位置来渲染数据的方式已经完成，对比js拼接html标签字符串，然后作为interHtml插入到对应的元素的方法，它省去了字符串拼接的麻烦，但是它在设置dom的时候会遇到问题，需要我们自己注意，总是这两种方法，各有利弊，具体使用哪一种方式，看自己对这两种方法，哪个更熟悉了。
