欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery-1.9.1源碼分析系列（十一）DOM操作續(xù)之克隆節(jié)點(diǎn)

 更新時(shí)間：2015年12月01日 14:52:48   投稿：mrr  
這篇文章主要介紹了jQuery-1.9.1源碼分析系列（十一）DOM操作續(xù)之克隆節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下

什么情況下使用到克隆節(jié)點(diǎn)？

　　我們知道在對DOM操作過程中如果直接使用節(jié)點(diǎn)會(huì)出現(xiàn)節(jié)點(diǎn)隨操作而變動(dòng)的情況。比如對節(jié)點(diǎn)使用.after/.before/.append等方法后，節(jié)點(diǎn)被添加到新的地方，原來的位置上的節(jié)點(diǎn)被移除了。有的時(shí)候需要保留原來位置上的節(jié)點(diǎn)，僅僅是需要一個(gè)副本添加到對應(yīng)位置，這個(gè)時(shí)候克隆就有了使用場景。

　　jQuery.fn.clone克隆當(dāng)前匹配元素集合的一個(gè)副本，并以jQuery對象的形式返回。

　　你還可以指定是否復(fù)制這些匹配元素(甚至它們的子元素)的附加數(shù)據(jù)( data()函數(shù) )和綁定事件。

　　jQueyr.fn.clone: function( withDataAndEvents, deepDataAndEvents )參數(shù)描述

a.克隆函數(shù)的底層實(shí)現(xiàn)步驟分解如下（jQuery.clone）

　　第一步，先克隆出DOM節(jié)點(diǎn)。對支持正確的節(jié)點(diǎn)克隆（即支持elem.cloneNode并保證克隆無誤）的DOM節(jié)點(diǎn)直接使用cloneNode（true）,否則自建一個(gè)節(jié)點(diǎn)來保存被克隆數(shù)據(jù)然后獲取該節(jié)點(diǎn)。

if ( jQuery.support.html5Clone || jQuery.isXMLDoc(elem) || !rnoshimcache.test( "<" + elem.nodeName + ">" ) ) {
  clone = elem.cloneNode( true );
// IE<=8 不能正確克隆已分離、未知的節(jié)點(diǎn)
//直接新建一個(gè)相同的節(jié)點(diǎn)，然后獲取
} else {
　　//fragmentDiv是全局變量
  fragmentDiv.innerHTML = elem.outerHTML;
  fragmentDiv.removeChild( clone = fragmentDiv.firstChild );
}

　　第二步，如果是IE瀏覽器下，則需要通過fixCloneNodeIssues( node, destElements[i] );來逐個(gè)修正IE克隆問題。IE克隆解決方案全部包含在了fixCloneNodeIssues中，下一節(jié)詳細(xì)分析。里面的jQuery.support內(nèi)容點(diǎn)擊這里查看更多

//針對ie克隆問題修正
if ( (!jQuery.support.noCloneEvent || !jQuery.support.noCloneChecked) &&
  (elem.nodeType === 1 || elem.nodeType === 11) && !jQuery.isXMLDoc(elem) ) {
  //在這里我們不使用Sizzle的原因是: http://jsperf.com/getall-vs-sizzle/2
  destElements = getAll( clone );
  srcElements = getAll( elem );
  //修正所有IE克隆問題
  for ( i = 0; (node = srcElements[i]) != null; ++i ) {
    // Ensure that the destination node is not null; Fixes #9587
    if ( destElements[i] ) {
      fixCloneNodeIssues( node, destElements[i] );
    }
  }
}

 　　第三步，如果要克隆緩存數(shù)據(jù)（包括普通數(shù)據(jù)和綁定事件），克隆之。

//克隆綁定的事件
if ( dataAndEvents ) {
  if ( deepDataAndEvents ) {
    srcElements = srcElements || getAll( elem );
    destElements = destElements || getAll( clone );
    for ( i = 0; (node = srcElements[i]) != null; i++ ) {
      cloneCopyEvent( node, destElements[i] );
    }
  } else {
    cloneCopyEvent( elem, clone );
  }
}

備注：cloneCopyEvent函數(shù)中會(huì)將原節(jié)點(diǎn)的數(shù)據(jù)保存到克隆節(jié)點(diǎn)中，然后將原節(jié)點(diǎn)的事件綁定到新的克隆節(jié)點(diǎn)上

function cloneCopyEvent( src, dest ) {
    if ( dest.nodeType !== 1 || !jQuery.hasData( src ) ) {
      return;
    }
    var type, i, l,
    oldData = jQuery._data( src ),
    curData = jQuery._data( dest, oldData ),//dest是克隆對的節(jié)點(diǎn)
    events = oldData.events;
    if ( events ) {
      //保證被克隆的節(jié)點(diǎn)的事件對象干凈，確保沒有后面添加的事件沒有重復(fù)
      delete curData.handle;
      curData.events = {};
      for ( type in events ) {
        for ( i = 0, l = events[ type ].length; i < l; i++ ) {
          jQuery.event.add( dest, type, events[ type ][ i ] );
        }
      }
    }
    // 使克隆的數(shù)據(jù)對象化
    if ( curData.data ) {
      curData.data = jQuery.extend( {}, curData.data );
    }
  }

　　第四步，保護(hù)script計(jì)算歷史（全局性地標(biāo)記scripts代碼段已經(jīng)被執(zhí)行過了），并回收內(nèi)存，返回克隆節(jié)點(diǎn)。

destElements = getAll( clone, "script" );
if ( destElements.length > 0 ) {
  setGlobalEval( destElements, !inPage && getAll( elem, "script" ) );
}
destElements = srcElements = node = null;
return clone;

b.IE克隆問題匯總fixCloneNodeIssues(src,dest)

　　src是原節(jié)點(diǎn)，dest是src的克隆節(jié)點(diǎn)。

　　IE克隆問題列一下（IE8+）

　　1.IE6-8當(dāng)使用cloneNode會(huì)克隆事件（這些事件綁定通過attachEvent)。為保證統(tǒng)一性，需要清除克隆的事件，為后續(xù)統(tǒng)一克隆事件做準(zhǔn)備

  // IE6-8當(dāng)使用cloneNode復(fù)制事件（這些事件綁定通過attachEvent）時(shí)進(jìn)入該分支
  //清除原來的事件，為克隆事件做準(zhǔn)備
  if ( !jQuery.support.noCloneEvent && dest[ jQuery.expando ] ) {
    data = jQuery._data( dest );
    for ( e in data.events ) {
      jQuery.removeEvent( dest, e, data.handle );
    }
    dest.removeAttribute( jQuery.expando );
  }

　　2.IE8-克隆腳本標(biāo)簽script的時(shí)候克隆的內(nèi)容結(jié)果會(huì)是空白。我們需要給他重新賦值，并確保他不會(huì)執(zhí)行腳本內(nèi)容。

//IE克隆腳本時(shí)內(nèi)容為空白，并試圖執(zhí)行新設(shè)置的文本
  if ( nodeName === "script" && dest.text !== src.text ) {
    disableScript( dest ).text = src.text;
    restoreScript( dest );
    }

　　3.IE6-10不能克隆使用的classid獲取的對象元素的子節(jié)點(diǎn)。IE10下，如果父節(jié)點(diǎn)為null,則會(huì)拋出NoModificationAllowedError異常。需要使用原節(jié)點(diǎn)的outerHTML和innerHTML重新賦值。

 //IE6-10不能克隆使用的classid獲取的對象元素的子節(jié)點(diǎn)。
  //IE10下，如果父節(jié)點(diǎn)為null,則會(huì)拋出NoModificationAllowedError異常
  else if ( nodeName === "object" ) {
    if ( dest.parentNode ) {
      dest.outerHTML = src.outerHTML;
    }
    //對于IE9,這個(gè)條分支不可避免。
    //IE9中克隆對象元素，上述outerHTML策略是不充分的。
    //如果src具有的innerHTML并且克隆節(jié)點(diǎn)卻沒有，
    //復(fù)制src.innerHTML到dest.innerHTML #10324
    if ( jQuery.support.html5Clone && ( src.innerHTML && !jQuery.trim(dest.innerHTML) ) ) {
      dest.innerHTML = src.innerHTML;
    }
  }

　　4.IE6-8無法克隆一個(gè)復(fù)選框或單選按鈕的選中狀態(tài)。需要主動(dòng)設(shè)置。

 // manipulation_rcheckableType = /^(?:checkbox|radio)$/i
  else if ( nodeName === "input" && manipulation_rcheckableType.test( src.type ) ) {
    //IE6-8無法堅(jiān)持一個(gè)克隆的復(fù)選框或單選按鈕的選中狀態(tài)
    //更糟的是，如果defaultChecked值沒有設(shè)置，則IE6-7無法給克隆元素選中狀態(tài)的外觀
    dest.defaultChecked = dest.checked = src.checked;
    ...
  }

　　5.當(dāng)克隆select標(biāo)簽時(shí)，IE6-8無法正確返回select默認(rèn)選中狀態(tài)。需要主動(dòng)設(shè)置。

　　　//當(dāng)克隆選項(xiàng)時(shí)，IE6-8無法正確返回select默認(rèn)選中狀態(tài)
   else if ( nodeName === "option" ) {
    dest.defaultSelected = dest.selected = src.defaultSelected;
   }

　　6.當(dāng)克隆其他類型的input和textare標(biāo)簽時(shí)，IE6-8不能正確設(shè)置defaultValue為正確的值。需要主動(dòng)設(shè)置。

  //當(dāng)克隆其他類型的input標(biāo)簽時(shí)，IE6-8不能正確設(shè)置defaultValue為正確的值
  else if ( nodeName === "input" || nodeName === "textarea" ) {
    dest.defaultValue = src.defaultValue;
  }

　　里面用到disableScript這個(gè)函數(shù)。函數(shù)目的是改變script的type，從而保證在給script賦值后不會(huì)被作為腳本執(zhí)行。這個(gè)方式我們可以借鑒

//為安全DOM操作替換/保存script節(jié)點(diǎn)元素type屬性
function disableScript( elem ) {
  var attr = elem.getAttributeNode("type");
  elem.type = ( attr && attr.specified ) + "/" + elem.type;
  return elem;
}

以上內(nèi)容是小編給大家介紹的關(guān)于jQuery-1.9.1源碼分析系列（十一）DOM操作續(xù)之克隆節(jié)點(diǎn)的全部敘述，希望大家喜歡。

相關(guān)文章

最新評論