對于節點的創建innerHTML是一個很高效的接口。jQuery在節點操作上使用了innerHTML,創建效率上來說至少比createElement快了2-10倍不等,而且還能一次性生成一堆的節點,但是隨之而來就有一些兼容性問題,
我總結了有以下幾點,當然兼容上也結合了jQuery的解決方案。
jQuery的節點操作最終是需要轉化成文檔碎片也就是要通過buildFragment()方法處理的,所以innerHTML兼容的修復也自然在buildFragment方法中。
我們弄清了緣由再去分析,其實整個修正的代碼就很簡單了。
1:首先無作用域的問題,通過文檔碎片創建一個div的包含容器,讓所有的元素都被div元素給包含起來,包括script,style等無作用域的元素,很好的解決了
tmp = tmp || fragment.appendChild(context.createElement("div")); tmp.innerHTML = elem
2:針對不支持innerHTML屬性的元素,給單獨提出來,通過正則抽出來這個節點名字去處理
wrapMap = { tr: [2, "<table><tbody>", "</tbody></table>"], } tag = /<([\w:]+)/.exec(‘<tr>慕課網</tr>’) wrap = wrapMap[tag] || wrapMap._default; tmp.innerHTML = wrap[1] + elem.replace(rxhtmlTag, "<$1></$2>") + wrap[2];
如果遇到wrapMap[‘tr’]的標簽就會自動包裝一層節點,這樣達到支持。
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報