JS框架设计读书笔记之-节点模块

节点的创建

 

　　浏览器提供了多种手段创建API，从流行程度依次是document.createElement、innerHTML、insertAdjacentHTML、createContextualFragment。

 

　　document.createElement：传入一个标签名，返回此类型的元素节点。对于浏览器不支持的节点类型，也可以支持，后来被用于IE6-IE8支持H5新标签。 　

console.log(document.createElement('abc'));    //<abc></abc>

　　

　　innerHTML：创建效率至少比createElement快2-10倍，并且可以一次性大量生成节点，但是对于空白的处理有兼容问题；另外innerHTML不会执行script里面的脚本，jQuery直接用正则把内容抽出来使用全局eval执行了。最后一个问题是有些标签不能直接作为div的子标签，例如tr、td、th，框架用特殊标签包裹这些，结果后来发现浏览器会自动补全这些标签...

 

　　insertAdjacentHTML：可以灵活的将节点插入任意位置，但是同样有标签包裹问题。

 

 

节点的插入

 

　　appendChild：参数类型确定，无重载。

 

 

节点的复制

 

　　cloneNode：IE会复制绑定的事件，由于引用不是来自框架，也无法解除，一般框架重写API，接受一个布尔参数决定是否复制事件。

 

 

节点的删除

 

　　removeNode：IE私有实现，将目标从文档树中删除，返回目标节点。接受一个参数，false时仅删除目标节点，保留子节点。

　　removeChild：在老IE有内存泄露问题，因为在IE6-IE8中存在一个叫DOM超空间的概念，当元素移出DOM树，又有JS关联时，此元素不会消失，会被保存到一个叫超空间的地方。

    // EXT框架中针对IE6/IE7的重写
    var removeNode = IE6 || IE7 ? function() {
        var d;
        return function(node) {
            if (node && node.tagName != 'BODY') {
                d = d || document.createElement('div');
                d.appendChild(node);
                d.innerHTML = '';
            }
        }
    }() : function(node) {
        //removeChild
    }