如何渲染數據

 

一，如何渲染數據

什麼是渲染數據：簡單的說就是把後臺數據渲染到頁面當中去。

1.渲染數據的方式有四種

（1）字符串拼接

  1.案例分析 原有的list中有三個li，而且每一個li身上有onmouseover事件

 

 

2.字符串拼接是最經常使用的方法

3.優勢：只進行一次dom迴流

4.缺點：原有dom的事件都會丟失

緣由：就在與 innerHTML 這個屬性，這個屬性是返回或設置dom中的內容，以字符串形式返回，拼接完以後是string類型，而onmouse這些屬性是dom元素對象身上的，因此這些onmouse系列屬性就會丟失了。

　　（2）dom循環

優勢:緣由的dom身上的事件不會丟失，不影響其它dom

缺點:迴流次數過多，嚴重影響性能

　　（3）模板

模板的本質就是字符串

　　（4）文檔碎片

 

優勢：既不影響原有dom的屬性，也只回流一次

什麼是dom迴流：每當對dom 元素進行 增添 查改的時候瀏覽器就會從新加載一個，

把新的結果給渲染出來

------------------------------------------------------------------------

這四種方法新增的li沒有onmouseover事件，如何保證新增的li也擁有添加事件，用dom遍歷添加是不行的，要用事件委託。

什麼是事件委託：當給子元素身上綁定大量的相同事件，儘可能採用事件委託，把子元素身上的相同事件委託給父級。

 

事件委託：利用的原理就是事件冒泡機制，但並非全部的事件都有冒泡機制，好比onmouseinter，onmouseleave

 

做者：晉飛翔

QQ，微信同步：318080891