jQuery 3.0的domManip浅析

domManip 这个函数的历史由来已久，从 jQuery 1.0 版本开始便存在了，一直到最新的 jQuery 版本。可谓是元老级工具函数。

domManip 的主要功能是为了实现 DOM 的插入和替换。具体共为以下 5 个函数服务

内部后插入（append）
内部前插入（prepend）
外部前插入（before）
外部后插入（after）
替换元素（replaceWith，1.9.x 之前的版本没有使用 domMainp）

而一个 each 就生成了另外 5 个函数：appendTo、prependTo、insertBefore、insertAfter、replaceAll

jQuery.each( {
    appendTo: "append",
    prependTo: "prepend",
    insertBefore: "before",
    insertAfter: "after",
    replaceAll: "replaceWith"
}, function( name, original ) {
    jQuery.fn[ name ] = function( selector ) {
        var elems,
            ret = [],
            insert = jQuery( selector ),
            last = insert.length - 1,
            i = 0;
 
        for ( ; i <= last; i++ ) {
            elems = i === last ? this : this.clone( true );
            jQuery( insert[ i ] )[ original ]( elems );
 
            // Support: Android <=4.0 only, PhantomJS 1 only
            // .get() because push.apply(_, arraylike) throws on ancient WebKit
            push.apply( ret, elems.get() );
        }
 
        return this.pushStack( ret );
    };
} );

如图

内部调用如图

源码

append: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.appendChild( elem );
        }
    } );
},
prepend: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.insertBefore( elem, target.firstChild );
        }
    } );
},
before: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this );
        }
    } );
},
after: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this.nextSibling );
        }
    } );
},
replaceWith: function() {
    var ignored = [];
 
    // Make the changes, replacing each non-ignored context element with the new content
    return domManip( this, arguments, function( elem ) {
        var parent = this.parentNode;
 
        if ( jQuery.inArray( this, ignored ) < 0 ) {
            jQuery.cleanData( getAll( this ) );
            if ( parent ) {
                parent.replaceChild( elem, this );
            }
        }
 
    // Force callback invocation
    }, ignored );
}

domManip 的实现

domManip 的主要功能就是添加 DOM 元素，因为添加的位置不同而提供了四个公开函数 append、prepend、before、after，此外还有一个 replaceWith。简单说 domManip 就做了两件事

先完成 DOM 节点添加
如果添加的 DOM 节点内有 script 标签，需要额外处理下。对于可执行的 script （通过type属性判断）则执行其内的脚本代码，其它的则不执行。

domManip 依赖的一个重要函数就是 buildFragment，为 DOM 插入提高了性能。

domManip 内对 script 节点元素做了特殊处理

script 无 type 属性，默认会执行其内的 JS 脚本
script 的 type="text/javascript" 或 type="text/ecmascript" ，会执行其内的 JS 脚本
script 如果有 src 属性，会执行 $._evalUrl 请求远程的 JS 文件并执行
其它不会执行 JS 脚本，有时我们会用 script 来做 html 模板，如 underscore.js，type="text/template" 或 type="text/plain" 这种，其内的 JS 都不会被执行

此外 dataPriv.access( node, "globalEval" )，这一句标示了如果该 script 已经执行过，则不会再次执行。或者说执行后会设置一个 globalEval: true 的标示。

domManip 内部依赖 buildFragment、restoreScript、disableScript、jQuery._evalUrl、DOMEval 这几个小函数，而 restoreScript、jQuery._evalUrl 也仅在 domManip 用到。

// Replace/restore the type attribute of script elements for safe DOM manipulation
function disableScript( elem ) {
    elem.type = ( elem.getAttribute( "type" ) !== null ) + "/" + elem.type;
    return elem;
}
function restoreScript( elem ) {
    var match = rscriptTypeMasked.exec( elem.type );
 
    if ( match ) {
        elem.type = match[ 1 ];
    } else {
        elem.removeAttribute( "type" );
    }
 
    return elem;
}
jQuery._evalUrl = function( url ) {
    return jQuery.ajax( {
        url: url,
 
        // Make this explicit, since user can override this through ajaxSetup (#11264)
        type: "GET",
        dataType: "script",
        cache: true,
        async: false,
        global: false,
        "throws": true
    } );
};

domManip 经历了各个版本的演变

3.0.x 之前版本的 domManip 函数是挂在 jQuery 对象上面的（jQuery.fn.domManip），即通过 $().domManip 方式可以访问；3.0.x 后 domManip 是一个私有函数，外部无法访问
1.2.x 之前 domManip 有 4 个参数；1.3.x ~ 1.9.x 是 3 个参数；2.x 只有 2 个参数；3.x 有 4 个参数
1.9.x 之前的版本 replaceWith 没有使用 domMainp

Snandy