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 );
    };
} );

 

如图

图片 1

 

内部调整用而图

图片 2

 

源码

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 就召开了少数码事

  1. 先期形成 DOM 节点添加
  2. 若果长的 DOM 节点外发 script 标签,需要额外处理下。对于可实行的
    script (通过type属性判断)则行其内的剧本代码,其它的虽然非实施。

 

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

 

domManip 内对 script 节点元素做了出格处理

  1. script 无 type 属性,默认会执行其内的 JS 脚本
  2. script 的 type=”text/javascript” 或 type=”text/ecmascript”
    ,会尽其内的 JS 脚本
  3. script 如果有 src 属性,会执行 $._evalUrl 请求远程的 JS 文件并实行
  4. 其他未会见实施 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 经历了一一版本的演化

  1. 3.0.x 事先版本的 domManip 函数是悬挂在 jQuery
    对象方面的(jQuery.fn.domManip),即经过 $().domManip
    方式可拜;3.0.x 后 domManip 是一个私函数,外部无法访问
  2. 1.2.x 之前 domManip 有 4 个参数;1.3.x ~ 1.9.x 是 3 个参数;2.x 只有
    2 个参数;3.x 有 4 个参数
  3. 1.9.x 事先的版本 replaceWith 没有采取 domMainp

 

相关:

http://www.cnblogs.com/snandy/p/5760742.html

相关文章

网站地图xml地图