处理ajax数据；数据渲染

淩亂°似流年 2021-12-17 16:07 351阅读 0赞

当我们用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