jQuery 源碼分析(二十) DOM操做模塊插入元素詳解

時間 2019-11-08

標籤 jquery 源碼分析二十 dom 模塊插入元素詳解欄目 JQuery 简体版

原文原文鏈接

jQuery的DOM操做模塊封裝了DOM模型的insertBefore()、appendChild()、removeChild()、cloneNode()、replaceChild()等原生方法。分爲5個子模塊來實現:插入元素、刪除元素、複製元素、替換元素和包裹元素，本節講解第一個子模塊:插入元素html

插入元素模塊可用於新增DOM節點，修改文本節點等，API以下:node

append(content) 　 ;在被選元素子節點的末尾插入指定內容，內部調用appendChild(elem)方法 ;content能夠是HTML代碼、函數(返回html代碼)、DOM元素或 jQuery對象，下同
prepend(content) ;在被選元素子節點的頭部插入指定內容
before(content) ;在匹配元素集合的每一個元素以前插入content。
after(content) ;在匹配元素集合的每一個元素以後插入內容
appendTo(target) ;將匹配元素中的每一個元素插入目標元素末尾 ;內部調用append()方法 ;這四個方法執行後都會調用pushStack()方法，匹配的是所有插入的DOM對象引用。
prependTo(target) ;將匹配元素中的每一個元素插入目標元素開頭 ;內部調用prepeng()方法
insertBefore(target) ;將匹配元素中的每一個元素插入目標元素以前 ;內部調用before()方法
insertAfter(target) ;將匹配元素中的每一個元素插入目標元素以後 ;內部調用after()方法

上面的前四個後面四個是一一對應的，例如:jquery

writer by:大沙漠 QQ:22969969數組

$('#d').append('<p>1</p>')       
$('<p>1</p>').appendTo($('#d'));      //這兩條代碼的做用是相同的

其它幾個API也是一樣的做用:prepend和prependTo、before和insertBefore、after和insertAfter都是同樣的。瀏覽器

舉個栗子:緩存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div id="d">
        <p id="p">Hello,World!</p>
    </div>
    <h1>insertBefore測試</h1>
    <h2>insertAfter測試</h2>
    <button id="b1">append測試</button>
    <button id="b2">prepend測試</button>
    <button id="b3">before測試</button>
    <button id="b4">insertAfter測試</button>
    <script>    
        $('#b1').click(()=>{                
            $('#d').append('<p>append測試</p>')        //在div元素的子節點末尾添加一個<p>1</p>節點，這裏的參數是一個html代碼
        })
        $('#b2').click(()=>{
            $('#d').prepend('<p>prepend測試</p>')      //在div元素的子節點頭部添加一個<p>2</p>節點，這裏的參數是一個html代碼
        })
        $('#b3').click(()=>{
            $('h1').insertBefore('#d')                 //在div元素元素以前添加$('h1')元素，這裏的參數是一個jQuery對象
        })  
        $('#b4').click(()=>{
            $('h2').insertAfter($('#d'))                //在div元素元素以後添加$('h2')元素，這裏的參數也是一個jQuery對象
        })
    </script>
</body>
</html>

渲染以下:app

對應的DOM樹以下:dom

咱們定義了四個按鈕，分別在div的子節點以前、子節點默認，div以前位置和div以後位置插入一個DOM元素，每一個按鈕點擊一次，執行後頁面以下:函數

對應的DOM樹以下:源碼分析

源碼分析

append、prepend、before和after的實現以下:

jQuery.fn.extend({
    append: function() {        //在被選元素子節點的末尾插入指定內容，內部調用appendChild(elem)方法
        return this.domManip(arguments, true, function( elem ) {
            if ( this.nodeType === 1 ) {
                this.appendChild( elem );
            }
        });
    },

    prepend: function() {        //在被選元素子節點的頭部插入指定內容，內部調用insertBefore( elem, this.firstChild )方法
        return this.domManip(arguments, true, function( elem ) {
            if ( this.nodeType === 1 ) {
                this.insertBefore( elem, this.firstChild );
            }
        });
    },

    before: function() {        //在匹配元素集合的每一個元素以前插入內容
        if ( this[0] && this[0].parentNode ) {            //若是該元素有父元素
            return this.domManip(arguments, false, function( elem ) {
                this.parentNode.insertBefore( elem, this );
            });
        } else if ( arguments.length ) {
            var set = jQuery.clean( arguments );
            set.push.apply( set, this.toArray() );
            return this.pushStack( set, "before", arguments );
        }
    },
    after: function() {            //在匹配元素集合的每一個元素以後插入內容
        if ( this[0] && this[0].parentNode ) {             //若是該元素有父元素
            return this.domManip(arguments, false, function( elem ) {
                this.parentNode.insertBefore( elem, this.nextSibling );
            });
        } else if ( arguments.length ) {
            var set = this.pushStack( this, "after", arguments );
            set.push.apply( set, jQuery.clean(arguments) );
            return set;
        }
    },
    /*略*/
})

能夠看到內部都調用了domManip這個函數，執行時第一個傳入arguments，也就是咱們調用append、prepend等傳入的參數，domManip會把參數轉化爲一個DOM對象，而後調用參數3，參數3負責執行最後的DOM操做，domManip實現以下:

jQuery.fn.extend({
    domManip: function( args, table, callback ) {            //jQuery插入元素實現的核心，負責轉換html代碼爲DOM元素，而後調用傳入的回調函數插入DOM元素
        var results, first, fragment, parent,
            value = args[0],                                    //例如$().append()的第一個參數,好比:,<p>123</p>
            scripts = [];                                        //存儲args[0]裏的script腳本

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

        if ( jQuery.isFunction(value) ) {                        //若是args[0]是函數，則遍歷匹配元素集合，執行args[0]函數，並把返回值做爲參數，再次遍歷執行domManip()函數
            return this.each(function(i) {
                var self = jQuery(this);    
                args[0] = value.call(this, i, table ? self.html() : undefined);        //在每一個元素上執行該函數，返回一個DOM元素
                self.domManip( args, table, callback );                                    //迭代調用.domMapnip()方法
            });
        }

        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 };                            //在1.7.1中jQuery.support.parentNode方法未定義，因此這段代碼不會執行，在1.8中已經移除這段代碼。

            } else {
                results = jQuery.buildFragment( args, this, scripts );    //調用buildFragment()把html代碼轉換爲DOM元素。返回一個對象。對象裏的fragment屬性包含了轉換後的DOM元素，cacheable表示緩存狀態，指示了該HTML元素是否能夠緩存
            }

            fragment = results.fragment;                                //fragment是轉換後的DOM元素

            if ( fragment.childNodes.length === 1 ) {                    //若是文檔片斷只有一個子元素
                first = fragment = fragment.firstChild;                        //重置變量fragment爲子元素，由於插入單個子元素比插入含有單個子元素的文檔片斷會稍快些。
            } else {    
                first = fragment.firstChild;                            //不然把first做爲第一個子節點。
            }

            if ( first ) {                                                //若是子節點存在
                table = table && jQuery.nodeName( first, "tr" );            //若是table參數爲true，且first是tr節點，那麼設置table爲true,不然爲false。

                for ( var i = 0, l = this.length, lastIndex = l - 1; i < l; i++ ) {    //遍歷當前匹配的元素
                    callback.call(                                             //執行callback函數，上下文是每一個匹配元素，即callback函數內的this指針。參數是轉換後的DOM元素，即傳給callback的參數，也就是append、prepend等試下內部執行doMainip()傳遞的參數3這個函數
                        table ?
                            root(this[i], first) :                             //修正目標對象，若是待插入元素是tr元素，則調用函數root()檢查當前元素(容器元素)是不是table元素，若是是則返回tr元素的父元素tbody做爲目標元素。
                            this[i],                                        //不然把匹配元素做爲call的第一個參數，即this指針。
                        // 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 ) ?     //修正待插入元素，若是返回的文檔片斷是可緩存的或者不能緩存可是當前匹配元素大於1個且當前操做不是操做最後一個匹配元素時，老是插入該文檔片斷的副本。
                            jQuery.clone( fragment, true, true ) :                 //則老是插入該文檔片斷的副本,調用jQuery.clone深度複製事件和數據
                            fragment                                             //不然插入文檔自己
                    ); 
                }
            }

            if ( scripts.length ) {                                         //執行轉換後的DOM目標元素的script元素
                jQuery.each( scripts, evalScript );                             //jQuery.buildFragment()和jQuery.clean()利用瀏覽器的innerHTML機制把HTML代碼轉換爲DOM元素，可是轉換後的script元素並不會自動加載和執行，須要手動處理。
            }
        }

        return this;                                             //返回匹配元素集合，以支持鏈式操做。
    }
    /*略*/
})

buildFragment是用於將html代碼轉換爲對應的DOM節點的，它首先嚐試從緩存中獲取對應的DOM對象，若是沒有緩存則經過document.createDocumentFragment建立一個文檔碎片，而後則再調用$.clean將html代碼轉換爲一個DOM對象(經過設置innerHTML來實現的)，代碼比較多，再也不貼了。

對於appendTo、prependTo、insertBefore和insertAfter來講，它們在會在內部定義一個臨時的jQuery對象，而後再調用對應的append、prepend、before和after來實現的，以下:

jQuery.each({
    appendTo: "append",
    prependTo: "prepend",
    insertBefore: "before",
    insertAfter: "after",
    replaceAll: "replaceWith"
}, function( name, original ) {
    jQuery.fn[ name ] = function( selector ) {        //給jQuery添加appendTo、prependTo、insertBefore、insertAfter、replaceAll方法    name是要添加的方法名，如appendTo,original標識對應的已有方法名，如append
        var ret = [],         
            insert = jQuery( selector ),                            //構造一個jQuery對象，指向目標元素集合，這就是內部的臨時的jQuery對象
            parent = this.length === 1 && this[0].parentNode;        //若是操做的html只有一個頂級節點，則把parent設置爲父元素引用，不然設爲false     ;好比:$('<p>222</p>').appendTo('#dd');

        if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {    //若是待插入元素只有一個，而且是在文檔片斷中，同時目標元素也只有一個，
            insert[ original ]( this[0] );                                                                        //則直接將待插入元素插入目標元素，不須要遍歷目標元素集合。這樣速度稍快一點。
            return this;

        } else {
            for ( var i = 0, l = insert.length; i < l; i++ ) {                //遍歷目標元素集合，循環體內insert[i]是每個目標元素
                var elems = ( i > 0 ? this.clone(true) : this ).get();        //elems是要插入的元素集合，第一次插入的是待插入元素集合，以後插入的則是它的副本。調用對應的已經有方法名插入elems元素
                jQuery( insert[i] )[ original ]( elems );                        //調用目標元素的original方法，參數是elems        
                ret = ret.concat( elems );
            }

            return this.pushStack( ret, name, insert.selector );            //用包含了待插入元素集合和它的副本的數組ret構造一個新jQuery對象並返回。
        }
    };
});