[原创] jQuery源码分析-12 DOM操作-Manipulation-核心函数.domManip()

作者：nuysoft/高云 QQ：47214707 Email：nuysoft@gmail.com
声明：本文为原创文章，如需转载，请注明来源并保留原文链接。

jQuery源码分析系列（持续更新）

 

前记：

基于 jQuery 1.7.1 编写；之前的系列文章以“贴源码注释”的方式进行讲解，注释并不适合做大段的描述和排版；本节将尝试 锚点+按块分析+流程图 的方式，希望这样能增加更详细的描述，方便阅读理解和加深记忆。

 

核心函数 .domManip()

 

概述

关于insertAdjacentXXX

.domManip()定义

局部变量初始化

规避WebKit checked属性

支持参数为函数

转换HTML代码为DOM元素

执行回调函数插入DOM元素

从.domManip()学到的

 

概述

 

.domManip()是jQuery DOM操作的核心函数，为以下DOM操作方法提供支持：

    append/appendTo prepend/prependTo before/insertBefore after/insertAfter

.domManip()做了两部分工作：

1. 将args转换为DOM元素，并放在一个文档碎片中，调用jQuery.buildFragment和jQuery.clean实现

2. 执行callback，将DOM元素作为参数传入，由callback执行实际的插入操作

 

关于insertAdjacentXXX

 

在很多分析jQuery DOM操作的资料里都提到了insertAdjacentXXX，即insertAdjacentElement、insertAdjacentHTML、insertAdjacentText，这三个方法在指定的位置插入DOM元素、HTML代码、文本。看看它的语法：

object.insertAdjacentElement/HTML/Text( sWhere, oElement/sText )

在DOM元素object的位置sWhere处插入指定的元素oElement/sText，sWhere指定了插入位置，可选的值有：

可选值	功能	jQuery中的等价方法
beforeBegin	object之前	.before()
afterBegin	前置，作为object的第一个子元素	.prepend()
beforeEnd	追加，作为object的最后一个子元素	.append()
afterEnd	object之后	.after()

这些功能在jQuery中都有对应的接口。sWhere的可选值一开始给我的感觉是有些丑陋，但是细想，似乎这些候选值跟能说明插入操作的本质。简单测试了下，IE和Chrome是支持的，Firefox不支持，但insertAdjacentXXX毕竟没有标准化（There is no public standard that applies to this method），实现一个类似的接口也不复杂。在jQuery里，与insertAdjacentXXX类似的就是.domManip()。

 

.domManip()定义

 

    domManip: function( args, table, callback ) {

 

args 待插入的DOM元素或HTML代码

table 是否需要修正tbody，这个变量是优化的结果

callback 回调函数，执行格式为callback.call( 目标元素即上下文, 待插入文档碎片/单个DOM元素 )

 

局部变量初始化

 

        var results, first, fragment, parent,
            value = args[0],
            scripts = [];

 

value 是第一个元素，后边只针对args[0]进行检测，意味着args中的元素必须是统一类型；

scripts 在jQuery.buildFragment中会用到，脚本的执行在.domManip()的最后一行代码；jQuery.buildFragment中调用jQuery.clean时将scripts作为参数传入；jQuery.clean如果遇到script标签，则将script放入scripts，条件是：标签名为script 并且 未指定type或type为text/javascript；即支持插入script标签并执行；外联脚本通过jQuery.ajax以同步阻塞的方式请求然后执行，内联脚本通过jQuery.globalEval执行。

 

规避WebKit checked属性

 

        // We can't cloneNode fragments that contain checked, in WebKit
        if ( !jQuery.support.checkClone && arguments.length === 3 && typeof value === "string" && rchecked.test( value ) ) {
            return this.each(function() {
                jQuery(this).domManip( args, table, callback, true );
            });
        }

 

在WebKit中，不能克隆包含了已选中多选按钮的文档碎片；看看if代码块需要满足的条件：

不能正确拷贝选中状态 + 参数个数为3 + value是字符串 + 已选中的多选/单选按钮

Chrome和Safari用的都是WebKit引擎，在Chrome下jQuery.support.checkClone是true，那么问题就在Safari中； 在each的回调函数中再次调用.domManip()，但是有4个参数（增加了最后一个true），为了使 arguments.length === 3 变为false么？

看不懂在搞什么！似乎早期的#bugid没有出现在jQuery注释中，不好查找原因，有待继续研究 TODO。

 

支持参数为函数

 

        if ( jQuery.isFunction(value) ) {
            return this.each(function(i) {
                var self = jQuery(this);
                args[0] = value.call(this, i, table ? self.html() : undefined);
                self.domManip( args, table, callback );
            });
        }

 

如果value是函数，则执行函数，并用返回的结果，再次调用domManip；执行value时，如果table为true则传入innerHTML，用来修正tbody；用value的返回值替换args[0]，最后用修正过的args，迭代调用.domManip()。但是这里只处理args[0]是function的情况，如果args是function数组呢？验证一下：

$d = $('div'), i = 0, f = function() { return ++i };
$d.append( f, f, f ); // 只添加第一个，并非我所设想的会处理所有的待插入元素
$d.append( 1, 2, 3 ); // 添加3个

 

转换HTML代码为DOM元素

 

        if ( this[0] ) {
            parent = value && value.parentNode;

            // If we're in a fragment, just use that instead of building a new one
            if ( jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length ) {
                results = { fragment: parent };

            } else {
                results = jQuery.buildFragment( args, this, scripts );
            }

            fragment = results.fragment;

            if ( fragment.childNodes.length === 1 ) {
                first = fragment = fragment.firstChild;
            } else {
                first = fragment.firstChild;
            }

 

第25行：如果父元素是文档碎片DocumentFragment（nodeType === 11 ），那么不需要重新创建用现成的，否则就需要新建一个文档碎片；关于jQuery.support.parentNode，从字面上看应该是检测浏览器是否支持父元素属性parentNode，但是在jQuery的整篇源码中没有关于parentNode的检测，也就是说一直是undefined，我也很怀疑还有不支持父元素属性parentNode的浏览器吗？留给插件用么？

继续查资料，在DocumentFragment http://www.w3school.com.cn/xmldom/dom_documentfragment.asp 中有这样的说明：DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。

所以这里应该是预留的检测：对DocumentFragment进行检测，因为DocumentFragment的parentNode总是null。

第29行：没有父元素或父元素不是文档碎片，则调用 jQuery.buildFragment 创建一个包含args的文档碎片，jQuery.buildFragment用到了缓存，重复的创建会被缓存下来（需满足一些条件讲到jQuery.buildFragment时会详细分析），jQuery.buildFragment返回的结构是 { fragment: fragment, cacheable: cacheable }

第34~38行：获取第一个子元素first，first在后边用于判断是否需要修正tr的父元素为tbody，后边的不需要判断么？看来默认以第一个元素为准；如果只有一个子元素，那么可以省掉文档碎片；这么做可以更快的插入元素，简单测试下，为了使子元素个数检测失效，将第34行改为：

            if ( false && fragment.childNodes.length === 1 ) {

测试用例：

for( var i = 0; i < 10; i++ ) {
    $b = $('body').html('');
    console.time('fragment' + i);
    for( var i = 0; i < 5000; i++ ) $b.append( '<div>' );
    console.timeEnd('fragment' + i);
}

判断和不判断各执行10次取平均值（单位ms）：

	1	2	3	4	5	6	7	8	9	10	平均
判断	456	817	1077	546	544	416	536	515	343	328	557.8
不判断	760	671	592	640	1186	931	824	1028	885	842	835.9

可见如果文档碎片中只有一个子元素，插入子元素要比插入文档碎片稍快。

 

到这里准备工作完成了，即把args转换为DOM元素（准确的说是创建包含args的文档碎片），后边开始执行回调函数开始实际的插入操作。（前戏可真长）

 

执行回调函数插入DOM元素

 

            if ( first ) {
                table = table && jQuery.nodeName( first, "tr" );

                for ( var i = 0, l = this.length, lastIndex = l - 1; i < l; i++ ) {
                    callback.call(
                        table ?
                            root(this[i], first) :
                            this[i],
                        // Make sure that we do not leak memory by inadvertently discarding
                        // the original fragment (which might have attached data) instead of
                        // using it; in addition, use the original fragment object for the last
                        // item instead of first because it can end up being emptied incorrectly
                        // in certain situations (Bug #8070).
                        // Fragments from the fragment cache must always be cloned and never used
                        // in place.
                        results.cacheable || ( l > 1 && i < lastIndex ) ?
                            jQuery.clone( fragment, true, true ) :
                            fragment
                    );
                }
            }

 

第40行：如果成功的创建了DOM元素，才有必要开始插入操作

第41行：tr的父元素是tbody，table指示是否需要修正tbody

第43行：遍历当前jQuery对象中的匹配元素，缓存this.length（可算开始干活了）

第44行：执行回调函数callback，格式为callback.call( 目标元素即上下文, 待插入文档碎片/单个DOM元素 )

第46行：如果是tr，修正目标元素即上下文

第48~54行：翻译原文注释：

当无意中丢弃原始文档碎片(碎片上可能已附加数据)而不是使用它时，确保不会泄漏内存；此外,对最后一个元素使用原始文档碎片,而不是第一个,因为它在某些情况下会被错误的清空。

使用文档碎片时，如果是 可缓存的 或 缓存命中（指从缓存中取到文档碎片），则总是克隆。

第一段参考bug列表理解：

    Bug#8070 http://bugs.jquery.com/ticket/8070

    Basically a recent optimization to the clone method with this commit makes wrong assumptions about the existance of getElementsByTagName on DocumentFragments.

    Bug#8052 http://bugs.jquery.com/ticket/8052#comment:4

    As the variables elem and clone both can be DocumentFragments it's not safe to call getElementsByTagName on them.

    Because according to the specification DocumentFragements don't implement this method.

可见是由于DocumentFragements可能没有实现getElementsByTagName，而jQuery错误的假设getElementsByTagName是可用的；在Sizzle中可以看到对getElementsByTagName的检测：typeof context.getElementsByTagName !== "undefined"；这个问题在1.5rc1（1.5发行候选版本）中发现，随后的1.5中得到修复。

第55~57行：克隆文档碎片/单个DOM元素，克隆的条件：（可缓存的 或 缓存命中） 或者 this中有多个元素（需要多次用到fragment）；我们先考虑不缓存的情况，同样忽略l>1，因为l必然大于1否则不会进入for循环；在遍历到最后一个元素之前，一直对fragment进行克隆，最后一个元素使用创建的fragment；这里的实现和官网API的描述正好相反（http://api.jquery.com/append/ If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.）；讲到jQuery.buildFragment时，会对DocumentFragment做更多的讨论。

 

执行脚本元素

 

            if ( scripts.length ) {
                jQuery.each( scripts, evalScript );
            }
        }

 

如果脚本数组scripts的长度大于0，则执行其中的脚本；在jQuery.clean中，如果遇到script标签则会放入脚本数组scripts中，例如：

$('div').append( '<script>alert(123);</script>' )

evalScript负责执行script元素，如果是外联脚本（即通过src引入），用jQuery.ajax同步请求src指定的地址并自动执行；如果是内联脚本（即写在script标签内），用jQuery.globalEval执行。

 

        return this;
    }

链式语法。

 

从.domManip()学到的

 

1. 如果遇到tr，需要处理tbody的问题

2. 如果插入多个元素时，将多个元素先插入一个文档碎片，然后将文档碎片一次性插入指定的元素和位置

3. 将HTML代码转换为DOM元素，可以将HTML代码赋值给一个DIV元素的innerHTML属性，然后取DIV元素的子元素，即可得到转换后的DOM元素