jQuery.buildFragment使用方法及思路分析

一、jQuery.buildFragment使用方法
1、參數
jQuery.buildFragment( args, context, scripts );2、傳回值
return { fragment: fragment, cacheable: cacheable };
二、思路分析
1、處理context參數
根據傳入到context參數值的不同，確保context為文檔根節點document
2、限制可緩衝條件
2.1、字串小於512位元組
2.2、字串不存在option標籤(複製option標籤會丟失選中狀態,因此不緩衝)
2.3、字串不存在<object>,<embed>標籤(IE 6不能把<object>,<embed>標籤嵌入到文檔片段中)
2.4、字串不存在checked屬性(只針對複製擁有checked屬性節點時丟失選中狀態的瀏覽器，如：Safria）
2.5、字串中不存在html5標籤(只針對不支援html5標籤的瀏覽器)
3、處理args數組
通過jQuery.clean函數格式化處理數組項字串，並產生dom節點添加到文檔片段中
4、判斷緩衝值
如果緩衝值為由clean函數處理的文檔片段，則數組項字串略過clean函數處理
5、傳回值
函數返回一個對象，儲存文檔片段和可緩衝狀態
三、源碼注釋分析
【基於jQuery1.8.3】
複製代碼 代碼如下:
var rnocache = /<(?:script|object|embed|option|style)/i,
rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
rnoshimcache = new RegExp("<(?:" + nodeNames + ")[\\s/>]", "i");
jQuery.fragments = {};
jQuery.buildFragment = function( args, context, scripts ) {
var fragment, cacheable, cachehit,
first = args[ 0 ];
// Set context from what may come in as undefined or a jQuery collection or a node
// Updated to fix #12266 where accessing context[0] could throw an exception in IE9/10 &
// also doubles as fix for #8950 where plain objects caused createDocumentFragment exception
// 根據參數context值的不同,確保context為文檔根節點document
// jQuery1.8.0版本以後代碼相對於之前版本有很大改進,以下是改進地方:
// 針對context參數值為undefined, jQuery對象,DOM元素節點情況改進代碼
// 解決了1.8.0版本中context參數為文檔片段(#document-fragment)的bug
context = context || document;
context = !context.nodeType && context[0] || context;
context = context.ownerDocument || context;
// Only cache "small" (1/2 KB) HTML strings that are associated with the main document
// Cloning options loses the selected state, so don't cache them
// IE 6 doesn't like it when you put <object> or <embed> elements in a fragment
// Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache
// Lastly, IE6,7,8 will not correctly reuse cached fragments that were created from unknown elems #10501
// html字串小於512位元組
// 複製option標籤會丟失選中狀態,因此不緩衝
// IE 6不能把<object>,<embed>標籤嵌入到文檔片段中
// WebKit瀏覽器(如：Safria)複製擁有checked屬性節點時,也會丟失選中狀態,因此不緩衝,google最新版本不存在該bug
// 最後,IE6,7、8不會正確地重用由html5標籤元素建立的緩衝片段
if ( args.length === 1 && typeof first === "string" && first.length < 512 && context === document &&
first.charAt(0) === "<" && !rnocache.test( first ) &&
// 如果瀏覽器能夠複製checked屬性和支援html5,或者html字串中不存在checked和html5標籤元素
(jQuery.support.checkClone || !rchecked.test( first )) &&
(jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
// Mark cacheable and look for a hit
// 如果以上條件都滿足，則打上可快取標籤
cacheable = true;
// 將數組項字串(主要是html字串)緩衝到jQuery.fragment對象的屬性列表中，並擷取緩衝值
// 如果clean函數已經處理過了第二次相同的字串內容，緩衝值則為clean函數處理的文檔片段，字串解析可以略過clean處理
fragment = jQuery.fragments[ first ];
// 在clean函數處理了第一次字串(與第二次相同)後，cachehit為true
cachehit = fragment !== undefined;
}
// 判斷緩衝值
if ( !fragment ) {
fragment = context.createDocumentFragment();
// 通過clean函數處理args數組，將數組每一項字串都產生dom節點，
// 並且添加到提供的文檔片段(fragment)中，因此返回的對象中的fragment屬性
// 儲存了參數args數組項字串產生的dom節點
jQuery.clean( args, context, fragment, scripts );
// Update the cache, but only store false
// unless this is a second parsing of the same content
// 當cachehit為true時，jQuery.fragment[first]為clean函數處理的文檔片段
if ( cacheable ) {
jQuery.fragments[ first ] = cachehit && fragment;
}
}
return { fragment: fragment, cacheable: cacheable };
};