jQuery源码解析之clone()

jQuery源码解析之clone()

前言:这篇讲完后,jQuery的文档处理就告一段落了,有空我把这部分整合下,发一篇文章目录。

一、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery源码解析之clone()</title>
</head>
<body>
<script src="jQuery.js"></script>

<div id="divTwo">
  <p id="pTwo">这是divTwo
    <span id="spanTwo">这是spanTwo</span>
  </p>
</div>
<div id="divOne">

</div>

<script>
  $("#pTwo").click(function () {
    alert("pTwo被点击了")
  })
  $("#spanTwo").click(function (e) {
    //阻止冒泡
    e.stopPropagation()
    alert("spanTwo被点击了")
  })
  // $("#pTwo").clone().appendTo($("#divOne"))
  // $("#pTwo").clone(true,false).appendTo($("#divOne"))
  $("#pTwo").clone(true,true).appendTo($("#divOne"))
</script>
</body>
</html>

二、$().clone()
作用:
生成被选元素的副本,包含子节点、文本和属性

注意:
$('div').clone(true) 表示克隆目标节点的事件和数据
$('div').clone(true,true) 表示克隆目标节点及其子节点的事件和数据

源码:

jQuery.fn.extend({
    //克隆目标节点及其子节点
    //dataAndEvents是否克隆目标节点的事件和数据,默认是false
    //deepDataAndEvents是否克隆目标节点子节点的事件和数据,默认值是dataAndEvents
    //源码6327行
    clone: function( dataAndEvents, deepDataAndEvents ) {
      //默认是false
      dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
      //默认是dataAndEvents
      deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;
      //循环调用jQuery.clone
      return this.map( function() {
        return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
      } );
    },
});

解析:
可以看到,这里还是比较简单的,需要注意的就是参数deepDataAndEvents不填的话,其值是根据参数dataAndEvents的值来定的

三、jQuery.clone()
作用同上

源码:

jQuery.extend( {
    //源码6117行
    //生成被选元素的副本,包含子节点、文本和属性
    clone: function( elem, dataAndEvents, deepDataAndEvents ) {
      var i, l, srcElements, destElements,
        //拷贝目标节点的属性和值
        //如果为true,则包括拷贝子节点的所有属性和值
        clone = elem.cloneNode( true ),
        //判断elem是否脱离文档流
        inPage = jQuery.contains( elem.ownerDocument, elem );

      // Fix IE cloning issues
      //兼容性处理,解决IE bug
      if ( !support.noCloneChecked && ( elem.nodeType === 1 || elem.nodeType === 11 ) &&
        !jQuery.isXMLDoc( elem ) ) {

        // We eschew Sizzle here for performance reasons: https://jsperf.com/getall-vs-sizzle/2
        destElements = getAll( clone );
        srcElements = getAll( elem );

        for ( i = 0, l = srcElements.length; i < l; i++ ) {
          fixInput( srcElements[ i ], destElements[ i ] );
        }
      }

      // Copy the events from the original to the clone
      //从目标节点克隆事件,并绑定给克隆的元素
      if ( dataAndEvents ) {
        //克隆子节点的事件和数据
        if ( deepDataAndEvents ) {
          //源节点
          srcElements = srcElements || getAll( elem );
          //克隆节点
          destElements = destElements || getAll( clone );

          for ( i = 0, l = srcElements.length; i < l; i++ ) {
            cloneCopyEvent( srcElements[ i ], destElements[ i ] );
          }
        }
        //只克隆目标节点和数据
        else {
          cloneCopyEvent( elem, clone );
        }
      }

      //将script标签设为已运行
      // Preserve script evaluation history
      destElements = getAll( clone, "script" );
      if ( destElements.length > 0 ) {
        setGlobalEval( destElements, !inPage && getAll( elem, "script" ) );
      }

      // Return the cloned set
      return clone;
    },
})

解析:
可以看到这部分源码主要分为三大块:
(1)解决 IE 的 bug,主要是在fixInput()方法上进行处理
(2)从目标节点克隆数据、添加事件给克隆的元素
(3)将克隆的元素中的script标签设为已运行

四、fixInput()
作用:
(1)解决 IE 无法保存克隆的单选、多选的状态的 bug
(2)解决 IE 无法将克隆的选项返回至默认选项状态的 bug

源码:

//解决IE的bug:(1)无法保存克隆的单选、多选的状态 (2)无法将克隆的选项返回至默认选项状态
  // Fix IE bugs, see support tests
  //源码5937行
  function fixInput( src, dest ) {
    var nodeName = dest.nodeName.toLowerCase();

    // Fails to persist the checked state of a cloned checkbox or radio button.
    //IE无法保存克隆的单选框和多选框的选择状态
    if ( nodeName === "input" && rcheckableType.test( src.type ) ) {
      dest.checked = src.checked;
    }
    //IE无法将克隆的选项返回至默认选项状态
    // Fails to return the selected option to the default selected state when cloning options
    else if ( nodeName === "input" || nodeName === "textarea" ) {
      dest.defaultValue = src.defaultValue;
    }
  }

解析:
本质就是将目标元素的checked属性defaultValue属性手动赋值给克隆的元素。

五、cloneCopyEvent()
作用:
$().clone()的关键方法,用来从目标节点克隆数据、添加事件给克隆的元素

注意:
jQuery 采用数据分离的方法来保存 DOM 上的事件和数据,利用 uuid 标记每个 DOM 元素,然后在内存上,将每个 DOM 元素相关的数据放到内存中,然后在 uuid 和内存的数据之间建立映射。

优点是方便复制数据。

注意:事件是不可赋值的,只能一个个添加!

示意图:

jQuery源码解析之clone()

源码:

//src:目标元素
  //dest:克隆的元素
  //源码5902行
  function cloneCopyEvent( src, dest ) {
    var i, l, type, pdataOld, pdataCur, udataOld, udataCur, events;

    if ( dest.nodeType !== 1 ) {
      return;
    }
    //拷贝jQuery内部数据:事件、处理程序等
    // 1. Copy private data: events, handlers, etc.
    if ( dataPriv.hasData( src ) ) {
      //private data old,即目标元素的数据
      //注意:jQuery是通过uuid将目标元素进行标记,
      //然后将与目标元素相关的数据都放到内存中
      //通过uuid和内存的数据建立映射
      //这种数据分离的做法有利于复制数据,但不能复制事件
      pdataOld = dataPriv.access( src );
      //private data current,即为克隆的元素设置数据
      pdataCur = dataPriv.set( dest, pdataOld );
      events = pdataOld.events;
      //如果事件存在
      if ( events ) {
        //移除克隆对的元素的处理程序和事件
        delete pdataCur.handle;
        pdataCur.events = {};
        //依次为克隆的元素添加事件
        //注意:事件是不能被复制的,所以需要重新绑定
        for ( type in events ) {
          for ( i = 0, l = events[ type ].length; i < l; i++ ) {
            jQuery.event.add( dest, type, events[ type ][ i ] );
          }
        }
      }
    }

    // 2. Copy user data
    //拷贝用户数据
    if ( dataUser.hasData( src ) ) {
      udataOld = dataUser.access( src );
      udataCur = jQuery.extend( {}, udataOld );
      //为克隆的元素设置数据
      dataUser.set( dest, udataCur );
    }
  }

解析:
(1)拷贝 jQuery 内部数据(事件、处理程序)
拷贝赋值数据:

pdataOld = dataPriv.access( src );
//private data current,即为克隆的元素设置数据
pdataCur = dataPriv.set( dest, pdataOld );

拷贝添加事件:

jQuery.event.add( dest, type, events[ type ][ i ] );

(2)拷贝用户数据

dataUser.set( dest, udataCur );

六、setGlobalEval()
作用:
设置目标元素内部的<script>标签为已执行

源码:

//设置目标元素内部的`<script>`标签为已执行
  //源码4934行
  // Mark scripts as having already been evaluated
  function setGlobalEval( elems, refElements ) {
    var i = 0,
      l = elems.length;

    for ( ; i < l; i++ ) {
      dataPriv.set(
        elems[ i ],
        "globalEval",
        !refElements || dataPriv.get( refElements[ i ], "globalEval" )
      );
    }
  }

Github:
https://github.com/AttackXiaoJinJin/jQueryExplain


jQuery源码解析之clone()

(完)

相关推荐