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 和内存的数据之间建立映射。
优点是方便复制数据。
注意：事件是不可赋值的，只能一个个添加！
示意图：
源码：
//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
（完）
相关推荐
瓜牛呱呱 2020-11-12
柳木木的IT 2020-11-04
yifouhu 2020-11-02
lei0 2020-11-02
源码zanqunet 2020-10-28
源码zanqunet 2020-10-26
一叶梧桐 2020-10-14
码代码的陈同学 2020-10-14
lukezhong 2020-10-14
lzzyok 2020-10-10
anchongnanzi 2020-09-21
clh0 2020-09-18
changcongying 2020-09-17
星辰大海的路上 2020-09-13
abfdada 2020-08-26
mzy000 2020-08-24
shenlanse 2020-08-18
zhujiangtaotaise 2020-08-18
xiemanR 2020-08-17