jQuery3.0中的buildFragment私有函數(shù)詳解
時(shí)隔 3 個(gè)月,jQuery 團(tuán)隊(duì)終于發(fā)布了 3.0 Alpha 版本。有兩個(gè)版本 jQuery compat 3.0 和 jQuery 3.0。
jQuery compat 3.0 對(duì)應(yīng)之前的 1.x, 兼容更多的瀏覽器,對(duì)于IE支持到 8.0 版本
jQuery 3.0 對(duì)應(yīng)之前的 2.x,關(guān)注更新的瀏覽器,對(duì)于IE支持到 9.0 版本
此外, 3.0還增加了對(duì) Yandex 瀏覽器的支持,一款來(lái)自俄羅斯的瀏覽器。
下面看下jQuery3.0中的buildFragment。
在 jQuery3.0中,buildFragment 是一個(gè)私有函數(shù),用來(lái)構(gòu)建一個(gè)包含子節(jié)點(diǎn) fragment 對(duì)象。這個(gè) fragment 在 DOM1 中就已經(jīng)有了,所有瀏覽器都支持。當(dāng)頻繁操作(添加、插入) DOM 時(shí)使用該方法可以提高性能,John resig 做過(guò)一個(gè)測(cè)試及一篇博客。
jQuery3.0 中 buildFragment 只在 domManip 和 jQuery.parseHTML 中使用,domManip 則被 DOM 操作如 append、prepend、before、after 等方法的所依賴(lài)。
如下圖
buildFragment 函數(shù)有 5 個(gè)參數(shù),源碼如下
function buildFragment( elems, context, scripts, selection, ignored ) { var elem, tmp, tag, wrap, contains, j, fragment = context.createDocumentFragment(), nodes = [], i = 0, l = elems.length; for ( ; i < l; i++ ) { elem = elems[ i ]; if ( elem || elem === 0 ) { // Add nodes directly if ( jQuery.type( elem ) === "object" ) { // Support: Android <=4.0 only, PhantomJS 1 only // push.apply(_, arraylike) throws on ancient WebKit jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem ); // Convert non-html into a text node } else if ( !rhtml.test( elem ) ) { nodes.push( context.createTextNode( elem ) ); // Convert html into DOM nodes } else { tmp = tmp || fragment.appendChild( context.createElement( "div" ) ); // Deserialize a standard representation tag = ( rtagName.exec( elem ) || [ "", "" ] )[ 1 ].toLowerCase(); wrap = wrapMap[ tag ] || wrapMap._default; tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ]; // Descend through wrappers to the right content j = wrap[ 0 ]; while ( j-- ) { tmp = tmp.lastChild; } // Support: Android <=4.0 only, PhantomJS 1 only // push.apply(_, arraylike) throws on ancient WebKit jQuery.merge( nodes, tmp.childNodes ); // Remember the top-level container tmp = fragment.firstChild; // Ensure the created nodes are orphaned (#12392) tmp.textContent = ""; } } } // Remove wrapper from fragment fragment.textContent = ""; i = 0; while ( ( elem = nodes[ i++ ] ) ) { // Skip elements already in the context collection (trac-4087) if ( selection && jQuery.inArray( elem, selection ) > -1 ) { if ( ignored ) { ignored.push( elem ); } continue; } contains = jQuery.contains( elem.ownerDocument, elem ); // Append to fragment tmp = getAll( fragment.appendChild( elem ), "script" ); // Preserve script evaluation history if ( contains ) { setGlobalEval( tmp ); } // Capture executables if ( scripts ) { j = 0; while ( ( elem = tmp[ j++ ] ) ) { if ( rscriptType.test( elem.type || "" ) ) { scripts.push( elem ); } } } } return fragment; }
該方法主要執(zhí)行步驟
通過(guò)第二個(gè)參數(shù) content 創(chuàng)建 fragment
通過(guò)第一個(gè)參數(shù) elems 構(gòu)建 nodes ,將 elems 內(nèi)元素轉(zhuǎn)成 DOM 元素存放于數(shù)組 nodes 中
將 nodes 里元素循環(huán)放入添加到文檔碎片 fragment 上
返回 fragment
重點(diǎn)在第 2 步,構(gòu)建 nodes,有 3 種情形
elem 是 DOM 元素(根據(jù)nodeType判斷),直接放入 nodes 數(shù)組中
elem 是字符串且不是 HTML tag,創(chuàng)建文本節(jié)點(diǎn)對(duì)象(textNode),放入 nodes 數(shù)組中
elem 是字符串且是 HTML tag,將其轉(zhuǎn)成 DOM 元素,放入 nodes 數(shù)組中
如圖示
后面的兩個(gè)參數(shù)需要注意下
1. 最后兩個(gè)參數(shù) selection 和 ignored 只在 replaceWith 方法里使用。需要了解的是 replaceWith 只做節(jié)點(diǎn)替換,不會(huì)替換先前元素的所有數(shù)據(jù)(Data),比如綁定事件,$.data 都不會(huì)被新元素?fù)碛小?/p>
2. scripts 參數(shù)只在 jQuery.parseHTML 方法里使用(domManip里傳false),當(dāng) jQuery.parseHTML 的第三個(gè)參數(shù) keepScripts 為 false 時(shí)將刪除節(jié)點(diǎn)里所有的 script tag
以上所述是小編給大家介紹的jQuery3.0中的buildFragment私有函數(shù)詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android Fragment的生命周期詳解
- Android Fragment概述及用法
- Android Fragment使用之實(shí)例演示
- Android開(kāi)發(fā) Activity和Fragment詳解
- Android Fragment多層嵌套重影問(wèn)題的解決方法
- Android 中 Fragment 嵌套 Fragment使用存在的bug附完美解決方案
- Fragment 多層嵌套方法調(diào)用問(wèn)題的解決方案
- Android中關(guān)于FragmentA嵌套FragmentB的問(wèn)題
- Android 動(dòng)態(tài)添加Fragment的實(shí)例代碼
- Android利用Fragment實(shí)現(xiàn)Tab選項(xiàng)卡效果
- Android Fragment+FragmentTabHost組件實(shí)現(xiàn)常見(jiàn)主頁(yè)面(仿微信新浪)
相關(guān)文章
文本框只能選擇數(shù)據(jù)到文本框禁止手動(dòng)輸入
文本框只能上人家選擇數(shù)據(jù)進(jìn)去,不能手動(dòng)輸入,經(jīng)搜索研究發(fā)現(xiàn)個(gè)不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-11-11JQuery通過(guò)AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中
這篇文章主要介紹了JQuery通過(guò)AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中的相關(guān)資料,需要的朋友可以參考下2015-09-09用jquery的方法制作一個(gè)簡(jiǎn)單的導(dǎo)航欄
用jquery制作一個(gè)簡(jiǎn)單的導(dǎo)航欄,使用到了addClass及removeClass等方法,需要的朋友可以參考下2014-06-06jQuery 浮動(dòng)廣告實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)的浮動(dòng)廣告代碼,需要的朋友可以參考下。2008-12-12jQuery動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法
動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法有很多,在接下來(lái)的文章中為大家介紹下jQuery是如何實(shí)現(xiàn)的2013-12-12用jquery獲取自定義的標(biāo)簽屬性的值簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇用jquery獲取自定義的標(biāo)簽屬性的值簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09jQuery根據(jù)緯度經(jīng)度查看地圖處理程序
jQuery根據(jù)緯度經(jīng)度查看地圖處理程序如下在這里要注意js的引入順序,有需求的朋友可以參考下哈希望對(duì)你有所幫助2013-05-05