處理ajax數據；數據渲染

當我們用ajax把數據拿到前台，該如何渲染到頁面，有以下幾種方式：

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

聲明一個空變量，然后拼接

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

二：DOM創建

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

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

三：underscore的模板(_.template)

模板三部曲

第一步：獲取模板的內容

第二步：將數據傳到模板里

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

<script src="underscore.js"></script>
<script type=text/template id="temp">
    <div>
        <span>
             <% = data.text%>
        </span>
    </div>
<script>    
<script>
    var  txt={"text":"hello"}
    var temp=document.getelementById("temp").innerHTML;
    var html=_.template(temp)
    var exam=html({data:text})
    document.dody.innerHTMl=exam;
</script>                        

四：文檔碎片

這兩種方式將字符串拼接和DOM創建的優缺點結合，原先元素的事件也存在，還減少了DOM回流  

字符串拼接的方法會將元素身上添加的事件都清除，因為字符串拼接會使DOM元素變成字符串，而字符串沒有事件， 但是這種方式的優點是DOM回流相對DOM創建較少，

而DOM創建是每創建一次DOM元素就會DOM回流，嚴重影響了瀏覽器的性能，但是元素不會受影響，添加的事件也還存在

 

var farg=document.creatDocumentFragment();
var  div=document.creatElement("div")
div.innerHTML="這是一串字符串"
frag.appendChild(div)
document.appendChild(frag)

PS：

事件委托：當某些元素的子集綁定了大量的相同的事件的時候，我們可以使用事件委托的方法，將事件都綁定到父級身上，找到事件源，綁定方法；