jQuery.buildFragment使用方法及思路分析
更新時(shí)間:2013年01月07日 17:43:28 作者:
jQuery.buildFragment使用方法與思路分析以及源碼注釋分析等等,感興趣的朋友可以了解下哦
一、jQuery.buildFragment使用方法
1、參數(shù)
jQuery.buildFragment( args, context, scripts );2、返回值
return { fragment: fragment, cacheable: cacheable };
二、思路分析
1、處理context參數(shù)
根據(jù)傳入到context參數(shù)值的不同,確保context為文檔根節(jié)點(diǎn)document
2、限制可緩存條件
2.1、字符串小于512字節(jié)
2.2、字符串不存在option標(biāo)簽(克隆option標(biāo)簽會(huì)丟失選中狀態(tài),因此不緩存)
2.3、字符串不存在<object>,<embed>標(biāo)簽(IE 6不能把<object>,<embed>標(biāo)簽嵌入到文檔碎片中)
2.4、字符串不存在checked屬性(只針對(duì)克隆擁有checked屬性節(jié)點(diǎn)時(shí)丟失選中狀態(tài)的瀏覽器,如:Safria)
2.5、字符串中不存在html5標(biāo)簽(只針對(duì)不支持html5標(biāo)簽的瀏覽器)
3、處理args數(shù)組
通過(guò)jQuery.clean函數(shù)格式化處理數(shù)組項(xiàng)字符串,并生成dom節(jié)點(diǎn)添加到文檔碎片中
4、判斷緩存值
如果緩存值為由clean函數(shù)處理的文檔碎片,則數(shù)組項(xiàng)字符串略過(guò)clean函數(shù)處理
5、返回值
函數(shù)返回一個(gè)對(duì)象,保存文檔碎片和可緩存狀態(tài)
三、源碼注釋分析
【基于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
// 根據(jù)參數(shù)context值的不同,確保context為文檔根節(jié)點(diǎn)document
// jQuery1.8.0版本以后代碼相對(duì)于之前版本有很大改進(jìn),以下是改進(jìn)地方:
// 針對(duì)context參數(shù)值為undefined, jQuery對(duì)象,DOM元素節(jié)點(diǎn)情況改進(jìn)代碼
// 解決了1.8.0版本中context參數(shù)為文檔片段(#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字節(jié)
// 克隆option標(biāo)簽會(huì)丟失選中狀態(tài),因此不緩存
// IE 6不能把<object>,<embed>標(biāo)簽嵌入到文檔碎片中
// WebKit瀏覽器(如:Safria)克隆擁有checked屬性節(jié)點(diǎn)時(shí),也會(huì)丟失選中狀態(tài),因此不緩存,google最新版本不存在該bug
// 最后,IE6,7、8不會(huì)正確地重用由html5標(biāo)簽元素創(chuàng)建的緩存片段
if ( args.length === 1 && typeof first === "string" && first.length < 512 && context === document &&
first.charAt(0) === "<" && !rnocache.test( first ) &&
// 如果瀏覽器能夠克隆checked屬性和支持html5,或者h(yuǎn)tml字符串中不存在checked和html5標(biāo)簽元素
(jQuery.support.checkClone || !rchecked.test( first )) &&
(jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
// Mark cacheable and look for a hit
// 如果以上條件都滿足,則打上可緩存標(biāo)記
cacheable = true;
// 將數(shù)組項(xiàng)字符串(主要是html字符串)緩存到j(luò)Query.fragment對(duì)象的屬性列表中,并獲取緩存值
// 如果clean函數(shù)已經(jīng)處理過(guò)了第二次相同的字符串內(nèi)容,緩存值則為clean函數(shù)處理的文檔碎片,字符串解析可以略過(guò)clean處理
fragment = jQuery.fragments[ first ];
// 在clean函數(shù)處理了第一次字符串(與第二次相同)后,cachehit為true
cachehit = fragment !== undefined;
}
// 判斷緩存值
if ( !fragment ) {
fragment = context.createDocumentFragment();
// 通過(guò)clean函數(shù)處理args數(shù)組,將數(shù)組每一項(xiàng)字符串都生成dom節(jié)點(diǎn),
// 并且添加到提供的文檔碎片(fragment)中,因此返回的對(duì)象中的fragment屬性
// 保存了參數(shù)args數(shù)組項(xiàng)字符串生成的dom節(jié)點(diǎn)
jQuery.clean( args, context, fragment, scripts );
// Update the cache, but only store false
// unless this is a second parsing of the same content
// 當(dāng)cachehit為true時(shí),jQuery.fragment[first]為clean函數(shù)處理的文檔碎片
if ( cacheable ) {
jQuery.fragments[ first ] = cachehit && fragment;
}
}
return { fragment: fragment, cacheable: cacheable };
};
1、參數(shù)
jQuery.buildFragment( args, context, scripts );2、返回值
return { fragment: fragment, cacheable: cacheable };
二、思路分析
1、處理context參數(shù)
根據(jù)傳入到context參數(shù)值的不同,確保context為文檔根節(jié)點(diǎn)document
2、限制可緩存條件
2.1、字符串小于512字節(jié)
2.2、字符串不存在option標(biāo)簽(克隆option標(biāo)簽會(huì)丟失選中狀態(tài),因此不緩存)
2.3、字符串不存在<object>,<embed>標(biāo)簽(IE 6不能把<object>,<embed>標(biāo)簽嵌入到文檔碎片中)
2.4、字符串不存在checked屬性(只針對(duì)克隆擁有checked屬性節(jié)點(diǎn)時(shí)丟失選中狀態(tài)的瀏覽器,如:Safria)
2.5、字符串中不存在html5標(biāo)簽(只針對(duì)不支持html5標(biāo)簽的瀏覽器)
3、處理args數(shù)組
通過(guò)jQuery.clean函數(shù)格式化處理數(shù)組項(xiàng)字符串,并生成dom節(jié)點(diǎn)添加到文檔碎片中
4、判斷緩存值
如果緩存值為由clean函數(shù)處理的文檔碎片,則數(shù)組項(xiàng)字符串略過(guò)clean函數(shù)處理
5、返回值
函數(shù)返回一個(gè)對(duì)象,保存文檔碎片和可緩存狀態(tài)
三、源碼注釋分析
【基于jQuery1.8.3】
復(fù)制代碼 代碼如下:
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
// 根據(jù)參數(shù)context值的不同,確保context為文檔根節(jié)點(diǎn)document
// jQuery1.8.0版本以后代碼相對(duì)于之前版本有很大改進(jìn),以下是改進(jìn)地方:
// 針對(duì)context參數(shù)值為undefined, jQuery對(duì)象,DOM元素節(jié)點(diǎn)情況改進(jìn)代碼
// 解決了1.8.0版本中context參數(shù)為文檔片段(#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字節(jié)
// 克隆option標(biāo)簽會(huì)丟失選中狀態(tài),因此不緩存
// IE 6不能把<object>,<embed>標(biāo)簽嵌入到文檔碎片中
// WebKit瀏覽器(如:Safria)克隆擁有checked屬性節(jié)點(diǎn)時(shí),也會(huì)丟失選中狀態(tài),因此不緩存,google最新版本不存在該bug
// 最后,IE6,7、8不會(huì)正確地重用由html5標(biāo)簽元素創(chuàng)建的緩存片段
if ( args.length === 1 && typeof first === "string" && first.length < 512 && context === document &&
first.charAt(0) === "<" && !rnocache.test( first ) &&
// 如果瀏覽器能夠克隆checked屬性和支持html5,或者h(yuǎn)tml字符串中不存在checked和html5標(biāo)簽元素
(jQuery.support.checkClone || !rchecked.test( first )) &&
(jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
// Mark cacheable and look for a hit
// 如果以上條件都滿足,則打上可緩存標(biāo)記
cacheable = true;
// 將數(shù)組項(xiàng)字符串(主要是html字符串)緩存到j(luò)Query.fragment對(duì)象的屬性列表中,并獲取緩存值
// 如果clean函數(shù)已經(jīng)處理過(guò)了第二次相同的字符串內(nèi)容,緩存值則為clean函數(shù)處理的文檔碎片,字符串解析可以略過(guò)clean處理
fragment = jQuery.fragments[ first ];
// 在clean函數(shù)處理了第一次字符串(與第二次相同)后,cachehit為true
cachehit = fragment !== undefined;
}
// 判斷緩存值
if ( !fragment ) {
fragment = context.createDocumentFragment();
// 通過(guò)clean函數(shù)處理args數(shù)組,將數(shù)組每一項(xiàng)字符串都生成dom節(jié)點(diǎn),
// 并且添加到提供的文檔碎片(fragment)中,因此返回的對(duì)象中的fragment屬性
// 保存了參數(shù)args數(shù)組項(xiàng)字符串生成的dom節(jié)點(diǎn)
jQuery.clean( args, context, fragment, scripts );
// Update the cache, but only store false
// unless this is a second parsing of the same content
// 當(dāng)cachehit為true時(shí),jQuery.fragment[first]為clean函數(shù)處理的文檔碎片
if ( cacheable ) {
jQuery.fragments[ first ] = cachehit && fragment;
}
}
return { fragment: fragment, cacheable: cacheable };
};
您可能感興趣的文章:
- 監(jiān)控 url fragment變化的js代碼
- JavaScript性能優(yōu)化 創(chuàng)建文檔碎片(document.createDocumentFragment)
- createElement與createDocumentFragment的點(diǎn)點(diǎn)區(qū)別小結(jié)
- Android Map新用法:MapFragment應(yīng)用介紹
- Android Fragment 基本了解(圖文介紹)
- Android 管理Activity中的fragments
- 淺析document.createDocumentFragment()與js效率
- Android基礎(chǔ)之Fragment與Activity交互詳解
- Android基礎(chǔ)之使用Fragment適應(yīng)不同屏幕和分辨率(分享)
- Android基礎(chǔ)之使用Fragment控制切換多個(gè)頁(yè)面
- android開(kāi)發(fā)教程之實(shí)現(xiàn)滑動(dòng)關(guān)閉fragment示例
- Android Fragment中使用SurfaceView切換時(shí)閃一下黑屏的解決辦法
相關(guān)文章
jquery實(shí)現(xiàn)動(dòng)態(tài)操作select選中
文章主要向大家介紹了jQuery 根據(jù)值或者文本選中select的方法和示例,非常實(shí)用的功能,需要的朋友可以參考下2015-02-02
jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色,比較實(shí)用,也很簡(jiǎn)單,使用到了一個(gè)resize事件需要的朋友可以參考下2014-10-10
Jquery實(shí)現(xiàn)無(wú)刷新DropDownList聯(lián)動(dòng)實(shí)現(xiàn)代碼
隨著Jquery1.4的發(fā)布,Jquery運(yùn)用越來(lái)越多了,讓我們來(lái)實(shí)現(xiàn)以前經(jīng)常用到的DropDownList無(wú)刷新聯(lián)動(dòng)。2010-03-03
關(guān)于jQuery對(duì)象數(shù)據(jù)緩存Cache原理以及jQuery.data詳解
網(wǎng)上有很多教你怎么使用jQuery.data(..)來(lái)實(shí)現(xiàn)數(shù)據(jù)緩存,但有兩個(gè)用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value])幾乎沒(méi)有什么文章說(shuō)清楚它們兩的區(qū)別,所以我用到了,研究下分享給大家。2013-04-04
jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動(dòng)的實(shí)例代碼
這篇文章介紹了jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動(dòng)的實(shí)例代碼,有需要的朋友可以參考一下2013-08-08
jQuery Easyui 驗(yàn)證兩次密碼輸入是否相等
easyui是一種基于jQuery的用戶界面插件集合。接下來(lái)通過(guò)本文給大家介紹jQuery Easyui 驗(yàn)證兩次密碼輸入是否相等的相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2016-05-05
jQuery+ajax實(shí)現(xiàn)修改密碼驗(yàn)證功能實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家介紹了jQuery+ajax實(shí)現(xiàn)修改密碼驗(yàn)證功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-07-07

