社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > jQuery.buildFragment使用方法及思路分析_jquery

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

WBOY
發布： 2016-05-16 17:44:15
原創
1424 人瀏覽過
一、jQuery.buildFragment使用方法
1、參數
jQuery.buildFragment( args, context, scripts );2、回傳值
return { fragment: fachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cacheable: fpachement, cachement: fachement, cacheable: cacheablement ;
二、思路分析
1、處理context參數
根據傳入到context參數值的不同，確保context為文檔根節點document
2、限制可緩存條件
2.1、字串小於512位元組
2.2、字串不存在option標籤(克隆option標籤會遺失選取狀態,因此不快取)
2.3、字串不存在,標籤(IE 6不能把,標籤嵌入到文檔碎片中)
2.4、字串不存在checked屬性(只針對克隆擁有checked屬性節點時丟失選中狀態的瀏覽器，如：Safria）
2.5、字串中不存在html5標籤(只針對不支援html5標籤的瀏覽器)
3、處理args陣列
透過jQuery.clean函數格式化處理陣列項目字串，並產生dom節點加入文件碎片
4、判斷快取值
如果快取值為由clean函數處理的文件碎片，則陣列項目字串略過clean函數處理
5、傳回值
函數傳回一個對象，保存文件碎片和可緩存狀態
三、源碼註解分析
【基於jQuery1.8.3】
複製程式碼 程式碼如下:

var rnocache = /rchecked = /checkeds*(?:[^=]|=s*.checked.) /i,
rnoshimcache = new RegExp("]", "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 jery collection
// Updated to fix #12266 where accessing context[0] could throw an exception in IE9/10 &
// also doubles as fix for #8950 where plain 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 or 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
512位元組
// 複製option標籤會遺失選取狀態,因此不快取
// IE 6不能把,標籤嵌入文件碎片
// WebKit瀏覽器(如：Safria)克隆擁有checked屬性節點時,也會遺失選取狀態,因此不快取,google最新版本不存在該bug
// 最後,IE6,7、8不會正確地重複使用由html5標籤元素創建的快取片段
if ( args.length === 1 && typeof first === "string" && first.length first.charAt(0) === " // 如果瀏覽器能夠複製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的文檔片段
if ( cacheable ) {
jQuery.fragments[ first ] = cachehit && fragment;
}
}
return { fragment: fragment, cacheable: cacheable }; };

相關標籤：
jquery
來源：php.cn
上一篇：javascript parseInt() 函數的進位轉換注意細節_javascript技巧 下一篇：jQuery.clean使用方法及想法分析_jquery
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2240
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2380
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1989
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1877
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1947
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板