jQuery源码分析系列：.domManip() .buildFragment() .clean()

.domManip(args,table,callback):是jQuery DOM操作的核心函数，可以扩展出如下方法：

　　append/appendTo:

　　prepend/prependTo:

　　before/insertBefore:

　　after/insertAfter:

1.转换HTML为DOM元素，将args转换为DOM元素，并放在一个文档碎片中，调用jQueyr.buidFragment和jQuery.clean实现。

2.执行回调函数插入DOM元素。进行callback，将DOM元素作为参数传入，callbacks执行实际操作。

扩展内容：

　　insertAdjacentElement、insertAdjacentHTML、insertAdjacentText,在指定的位置插入DOM元素 HTML代码 文本。

insertAdjacentElement(sWhere,oElement/sText)：在sWhere处插入oElement/sText内容。

可选值	功能	jQuery中的等价方法
beforeBegin	object之前	.before()
afterBegin	前置，作为object的第一个子元素	.prepend()
beforeEnd	追加，作为object的最后一个子元素	.append()
afterEnd	object之后	.after()

domManip(args, table, callback)源码：

执行步骤：
1.转换HTML代码为DOM元素
2.执行回调函数插入DOM元素

代码流程结构：

局部变量初始化->规避WebKit checked属性->支持参数为函数->转换HTML为DOM->执行回调函数插入DOM->执行脚本元素

参数说明：
args 待插入的DOM元素或HTML代码
table 是否需要修正tbody 这个变量是优化用的
callback 回调函数 执行格式为callback.call(目标元素即上下文,待插入文档碎片/单个DOM元素)

domManip: function( args, table, callback ) {
var results, first, fragment, parent,
value = args[0],//第一个元素，后边只针对args[0]进行检测
/*
在jQuery.buildFragment中会用到，脚本的执行在.domManip()的最后一行代码；jQuery.buildFragment中调用jQuery.clean时将
scripts作为参数传入；jQuery.clean如果遇到script标签，则将script放入scripts，条件是：标签名为script 并且 未指定type或type为text/javascript；
即支持插入script标签并执行；外联脚本通过jQuery.ajax以同步阻塞的方式请求然后执行，内联脚本通过jQuery.globalEval执行。
*/
scripts = [];

//规避WebKit checked属性 不能克隆包含了已选中多选按钮的文档碎片
//不能正确拷贝选中状态&&参数个数为3&&value(args[0])是字符串&&已选中的多选按钮 单选按钮
if ( !jQuery.support.checkClone && arguments.length === 3 && typeof value === "string" && rchecked.test( value ) ) {
return this.each(function() {
jQuery(this).domManip( args, table, callback, true );
});
}

//支持参数为函数  如果value为函数，则将value的执行结果作为args[0]的值  只能够处理一个
if ( jQuery.isFunction(value) ) {//value is function
return this.each(function(i) {
var self = jQuery(this);
//执行函数并返回结果  如果table为true  调用innerHTML修正tbody，
//用value的返回值替换args[0] 最后用修正过的args 迭代调用.domManip()
args[0] = value.call(this, i, table ? self.html() : undefined);
//再次调用domManip
self.domManip( args, table, callback );
});
}

//将HTML转换成DOM
if ( this[0] ) {
parent = value && value.parentNode;

//parent.nodeType === 11 检测父元素是文档碎片(DocumentFragment(nodeTYpe ===1)那么就不用重新创建文档碎片了
if ( jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length ) {
results = { fragment: parent };//文档碎片就是现有的

} else {
//没有父元素或父元素不是文档碎片，则调用 jQuery.buildFragment 创建一个包含args的文档碎片，jQuery.buildFragment
//用到了缓存，重复的创建会被缓存下来（需满足一些条件讲到jQuery.buildFragment时会详细分析），
//jQuery.buildFragment返回的结构是: { fragment: fragment, cacheable: cacheable }
results = jQuery.buildFragment( args, this, scripts );
}

fragment = results.fragment;//args

//获取第一个子元素first，first在后边用于判断是否需要修正tr的父元素为tbody。
//以第一个元素为准；如果只有一个子元素，那么可以省掉文档碎片；这么做可以更快的插入元素，
if ( fragment.childNodes.length === 1 ) {//childNodes:返回包含被选节点的子节点的 NodeList
first = fragment = fragment.firstChild;
} else {
first = fragment.firstChild;
}

//执行回调函数插入DOM元素
if ( first ) {//如果成功创建了DOM元素
//tr的父元素是tbody  table指示是否需要修正tbody
table = table && jQuery.nodeName( first, "tr" );//节点有tr
//遍历当前jQuery对象中的匹配元素，缓存this.length
for ( var i = 0, l = this.length, lastIndex = l - 1; i < l; i++ ) {
callback.call(//执行callback
//如果是tr 修正目标元素即上下文
table ?
/*
function root( elem, cur ) {//cur干了什么? 不解
return jQuery.nodeName(elem, "table") ?    //elem中是否有table标签
//返回第一个tbody或者创建一个tbody返回
(elem.getElementsByTagName("tbody")[0] ||
elem.appendChild(elem.ownerDocument.createElement("tbody"))) :
elem;
}
*/
root(this[i], first) :    //如果是tr 修正目标元素即上下文
this[i],
//克隆文档碎片  单个DOM元素  缓存的或者this中有多个元素；
results.cacheable || (l > 1 && i < lastIndex) ?
//克隆
jQuery.clone( fragment, true, true ) :
fragment
);
}
}
//执行脚本元素  如果脚本数组scripts的长度大于0  则执行其中的脚本;  jQuery.clean中 如果script标签则会放入脚本数组scripts中
//evalScript负责执行script元素，如果是外联脚本（即通过src引入 src =  " ... " ），用jQuery.ajax同步请求src指定的地址并自动执行；
//如果是内联脚本（即写在script标签内），用jQuery.globalEval执行。
if ( scripts.length ) {
jQuery.each( scripts, evalScript );
}
}
return this;
}

jQuery.buildFragment(args,nodes,scripts)源码分析：

执行步骤：

创建文档碎片
转换HTML代码为DOM元素
缓存

执行流程：

修正文档对象doc->是否符合缓存条件->创建文档碎片->转换HTML代码jQuery.clean()->文档碎片放入缓存->返回文档碎片和缓存状态

关于文档碎片：

DocumentFragment 接口表示文档的一部分（或一段）。更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。
DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。
当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。
这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。

可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。
也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 获取包含现有文档的片段的 DocumentFragment 节点。

results = jQuery.buildFragment( args, this, scripts );
接受.domManip()传入的HTML代码，创建文档碎片DocumentFragment，然后调用jQuery.clean()在这个文档碎片上将HTML代码转换成DOM

1.如果插入多个DOM元素，可以先将这些DOM插入到文档碎片，然后将文档碎片插入文档。这时插入的是文档碎片的子孙节点，可以提高性能。
2.将重复的HTML代码转换为DOM元素，可以将转换后的DOM元素缓存起来，下次转换时，直接调用缓存。

参数说明：

args:待插入的DOM元素或HTML代码。
nodes：jQuery对象，从其中获取Docuemnt对象，doc = nodes[0].ownerDocuemnt || nodes[0]
scripts:脚本数组 依次传递 .domManip() -> jQuery.buildFragment() -> jQuery.clean()

jQuery.buildFragment = function(args,nodes,scripts){
var fragment,
cacheable,
cacheresults,
doc,
first = args[0];

if(nodes && nodes[0]){
//ownerDocument    返回节点所属的根元素
//第一个节点的根节点或者这个节点
doc = nodes[0].ownerDocument || nodes[0];
}
//如果没有createDocumentFragment属性，则doc为顶层文档
if(!doc.createDocumentFragment){
doc = document;
}

//args长度等于1&&第一个元素时字符串&&字符串长度小于512&&主文档对象 && 第一个字符时左尖括号 && 支持缓存的标签（除了/<(?:script|object|embed|option|style)/i）
//&& 要么支持正确的checked属性赋值&&要么没有checked属性&&要么支持正确的checked属性赋值&&要么没有checked属性&&要么可以正确拷贝HTML5元素&&要么不是HTML5标签s
if(args.length === 1 && typeof first === "string" && first.length < 512 && doc === document && first.charAt(0) === "<"
&& !rnocache.test(first) && (jQuery.support.checkClone || !rchecked.test(first)) &&
(jQuery.support.html5Clone || !rnoshimcache.test(first))){
//表示是否first满足缓存条件放入缓存
cacheable = true;
//从jQuery.fragments中查找缓存结果，jQuery.fragments是全局的文档碎片缓存对象
cacheresults = jQuery.fragments[first];
//缓存名中，并不是1  而是真正的文档碎片 ， 1表示第一次调用jQuery.buildFragment时设置
if(cacheresults && cacheresults !== 1){
fragment = cacheresults;
}
}
/*
1.不符合缓存条件
2.符合缓存条件第一次调用jQuery.buildFragment()此时缓存中还没有
3.符合缓存条件 第二次调用jQuery.buildFragment，此时缓存中是1
*/
if(!fragment){
fragment = doc.createDocumentFragment();//创建一个文档碎片
jQuery.clean(args,doc,fragment,scripts);//调用jQuery.clean将HTML字符串args转换成DOM
}
/*
如果符合缓存条件，将文档碎片放入缓存,放入的可能是文档碎片fragment或1，取决于缓存中的已有值；
如果已有值为undefined则为1，如果是1则为fragment

执行过程
第一次     设置为1，因为已有值为undefined
第二次    设置为fragment,已有值为1
第三次      开始取缓存中的值
*/
if(cacheable){
jQuery.fragments[first] = cacheresults ? fragment : 1;
}
//返回文档碎片和缓存状态
return {fragment:fragment,cacheable:cacheable};
}

clean()源码分析：

修正文档对象context
声明返回值
遍历带转换数组
遇到HTML代码开始转换
不是标签 创建TextNode
是标签 开始转换
修正XHTML风格的标签
创建临时div 插入到安全文档碎片
包裹HTML代码 设置innerHTML
如果包裹 剥去包裹元素
移除IE自动插入的空tbody
插入IE自动剔除的空白符
取到创建的DOM元素
修正IE6/7中defaultChecked属性
合并转换后的DOM元素
提取script元素
返回转换后的DOM元素数组

elems 待转换的HTML代码数组
context 文档对象 会调用context的createTExtNode方法和createElement方法
fragment 文档碎片 在其上插入div 在div上设置innerHTML
scripts 脚本数组

clean: function( elems, context, fragment, scripts ) {
//修正文档对象context  后面会调用createTextNode方法和createElement方法
var checkScriptType;
context = context || document;
if ( typeof context.createElement === "undefined" ) {
context = context.ownerDocument || context[0] && context[0].ownerDocument || document;
}

//声明返回值：ret转换后的DOM元素数组 返回值
var ret = [],
j;//j循环变量 后文循环删除空tbody和修正defaultChecked时用到
//遍历待转换的数组elems(如果是字符串，那就一个字符一个字符的创建TextNode)
for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
//将数字转换成字符串
if ( typeof elem === "number" ) {
elem += "";
}
//检测非法值，
if ( !elem ) {
continue;
}

//遇到HTML代码开始转换
if ( typeof elem === "string" ) {
//如果不是标签,就创建TextNode 文本节点  rhtml = /<|&#?\w+;/；<是HTML标签的起始符号，&#?\w+则是特殊符号的起始符号
if ( !rhtml.test( elem ) ) {
elem = context.createTextNode( elem );
} else {//如果是标签，即使HTML代码
//修正XHTML风格的标签  :XHTML标签修正、保留HTML属性、过滤不需要修正的标签、正确修正未知标签、忽略大小写、多行匹配。
elem = elem.replace(rxhtmlTag, "<$1></$2>");

//创建临时DIV 插入到安全文档碎片
//从HTML代码中提出来的标签
var tag = (rtagName.exec( elem ) || ["", ""])[1].toLowerCase(),
//wrap数组，其中放有tag的深度，父标签，父关闭标签  例如option对应 [ 1, "<select multiple='multiple'>", "</select>" ]；
wrap = wrapMap[ tag ] || wrapMap._default,
depth = wrap[0],//深度包裹了几层  例如option是1、tr是2、td是3，默认0即不包裹
//创建一个临时div容器 后边在改div上设置innerHTML
div = context.createElement("div");

//加上包裹标签，设置innerHTML，由浏览器生成DOM元素
//例如：<option>1</option> 自动加上包裹标签，变成：<select multiple='multiple'><option>1</option></select>
div.innerHTML = wrap[1] + elem + wrap[2];

//比如option自动包裹上select，depth为1，div剥一层是select；也就是说while循环最后的结果是包含了elem的父元素，即div成了elem的父元素；
//比如tr，div变成tbody；td，div变为tr；thead/tfoot，div变为table，以此类推；即修正elem的父元素。
while ( depth-- ) {
div = div.lastChild;
}

//移除IE自动插入的空tbody
if ( !jQuery.support.tbody ) {
// String was a <table>, *may* have spurious <tbody>
var hasBody = rtbody.test(elem),
tbody = tag === "table" && !hasBody ?
div.firstChild && div.firstChild.childNodes :

// String was a bare <thead> or <tfoot>
wrap[1] === "<table>" && !hasBody ?
div.childNodes :
[];

for ( j = tbody.length - 1; j >= 0 ; --j ) {
if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
tbody[ j ].parentNode.removeChild( tbody[ j ] );
}
}
}

//插入IE自动剔除的空白符
if ( !jQuery.support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {
div.insertBefore( context.createTextNode( rleadingWhitespace.exec(elem)[0] ), div.firstChild );
}
//取到创建的DOM元素 取div的子元素集赋值给elem，elem会被合并到分绘制ret中；
//如果需要包裹div是待转换元素的父元素，如果不需要包裹 变量div就是DIV元素。所以这里可以简洁地取childNodes
elem = div.childNodes;

}
}

// 修正radios checkboxes的defaultChecked属性 IE6/7的bug
//在函数findInputs(elem)中找到 input 然后elem.defaultChecked = elem.checked
var len;
if ( !jQuery.support.appendChecked ) {
if ( elem[0] && typeof (len = elem.length) === "number" ) {
for ( j = 0; j < len; j++ ) {
findInputs( elem[j] );
}
} else {
findInputs( elem );
}
}

//合并转换后的DOM元素
if ( elem.nodeType ) {//如果是DOM元素直接push,elem本身就是DOM元素
ret.push( elem );
} else {//elem含有多个元素,合并
ret = jQuery.merge( ret, elem );
}
}

//提取script元素
if ( fragment ) {
//检测是否是scriptType元素 rscriptType = /\/(java|ecma)script/i；rscriptType 标签script的type属性是否是javascript或ecmascrip
checkScriptType = function( elem ) {
return !elem.type || rscriptType.test( elem.type );
};
for ( i = 0; ret[i]; i++ ) {
//如果ret[i]的标签名为script并且为指定type或type为text/javascript 放入scripts数组
if ( scripts && jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );

} else {
/*
取出ret[i]下可能有的的script元素，调用jQuery.grep( elems, callback, inv )过滤，返回其中 未指定type或type包含/javascript或/ecmascript
的script元素数组jsTags，将这个数组插入ret[i]之后，下次循环时检查。

i + 1，将找到的jsTags通过splice插入ret[i]，for循环下次遍历ret时，从jsTags开始遍历；splice()方法用于插入、删除或替换数组的元素
*/
if ( ret[i].nodeType === 1 ) {
var jsTags = jQuery.grep( ret[i].getElementsByTagName( "script" ), checkScriptType );

ret.splice.apply( ret, [i + 1, 0].concat( jsTags ) );
}
fragment.appendChild( ret[i] );
}
}
}
//返回转换后的DOM数组
return ret;
},