处理ajax数据；数据渲染

最新推荐文章于 2022-09-19 21:13:35 发布

weixin_33843947

最新推荐文章于 2022-09-19 21:13:35 发布

阅读量161

点赞数

原文链接：http://www.cnblogs.com/qinlinkun/p/10530480.html

版权

当我们用ajax把数据拿到前台，该如何渲染到页面，有以下几种方式：

一：使用字符串拼接的方法

声明一个空变量，然后拼接

var  st="";
st+="<div>"
    st+="这是一段字符串"
st+="</div>"
document.body.innerHTML+=st;

二：DOM创建

在js中使用creatElement的方法，添加到外层元素

1 <script>
2     var div=document.creatElement("div");
3     document.body.appendChid(div)
4 </script>

三：underscore的模板(_.template)

模板三部曲

第一步：获取模板的内容

第二步：将数据传到模板里

第三步：添加的指定的位置

 1 <script src="underscore.js"></script>
 2 <script type=text/template id="temp">
 3     <div>
 4         <span>
 5              <% = data.text%>
 6         </span>
 7     </div>
 8 <script>    
 9 <script>
10     var  txt={"text":"hello"}
11     var temp=document.getelementById("temp").innerHTML;
12     var html=_.template(temp)
13     var exam=html({data:text})
14     document.dody.innerHTMl=exam;
15 </script>

四：文档碎片

这两种方式将字符串拼接和DOM创建的优缺点结合，原先元素的事件也存在，还减少了DOM回流

字符串拼接的方法会将元素身上添加的事件都清除，因为字符串拼接会使DOM元素变成字符串，而字符串没有事件，但是这种方式的优点是DOM回流相对DOM创建较少，

而DOM创建是每创建一次DOM元素就会DOM回流，严重影响了浏览器的性能，但是元素不会受影响，添加的事件也还存在

1 var farg=document.creatDocumentFragment();
2 var  div=document.creatElement("div")
3 div.innerHTML="这是一串字符串"
4 frag.appendChild(div)
5 document.appendChild(frag)

PS：

事件委托：当某些元素的子集绑定了大量的相同的事件的时候，我们可以使用事件委托的方法，将事件都绑定到父级身上，找到事件源，绑定方法；

转载于:https://www.cnblogs.com/qinlinkun/p/10530480.html