jQuery.clean使用方法及想法分析_jquery

一、jQuery.clean使用方法
jQuery.clean( elems, context, fragment, scripts );
二、思路分析
1、處理參數context，確保其為文檔根節點document
2、處理參數elems數組(循環遍歷數組)
　　2.1、elem為數字，轉換為字串
　　2.2、elem為非法值，跳出本次循環
　　2.3、elem為字串
　　2.4、字串不存在實體編號或html標籤，則建立文字節點
　　2.5、字串為實體編號或html標籤

複製程式碼 程式碼如下:

建立一個div元素並插入到文件片段中
 處理xhtml風格標籤
建立一個div元素並插入到文件片段中
 處理xhtml風格標籤 將elem包裹起來，並將包裹後的字串當作div的innerHTML
 如果包裹深度大於1，只留下第一層包裹元素
 清除在ie6,7中空table標籤自動加入的tbody
 將在ie9以下瀏覽器中剔除的開頭空白字串作為div元素的第一個文字子節點
 將elem重新賦值為div的子節點集合(nodeList物件),
 移除本次循環中文檔碎片中的div，保持下一次循環中乾淨的div元素

2.3、如果elem為文本節點，則直接添加到要返回的ret數組中，否則將elem(nodeList物件)中的節點合併到陣列
　　2.4、修正在ie6、7中type為radio，checkbox類型的節點的選取狀態(checked)失效的bug
3、處理參數fragment
　　3.1、將ret中各節點加入到文檔碎片fragment中
　　3.2、提取節點中的script子節點，並將其添加到ret數組中，添加的script位置為其原父元素位置後面
4、返回ret數組三、源碼註釋分析

1、函數中用到的變量及函數

複製代碼

程式碼如下:

var nodeNames = "abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|"
     |progress|section|summary|time|video",
     wrapMap = {
         option: [ 1, "", "1>" ],
圖例: [ 1, "

", "

" ],
         標題: [ 1, "", "" ],
     ", "" ],
         td: [ 3, "", "" ],
         col: [ 2, "", "" ],
   "", "地圖>" ],
         _default: [ 0, "", "" ]
     },
  . |hr|img|input|link|meta| param)(([w:] )[^>]*)/>/gi,
     rtagName = /    rtbody = /     rhtml = /     rleadingWhitespace = /^s /,
     rcheckableType = /^s /,
     rcheckableType = /^? 🎜>     rscriptType = // (java|ecma)script/i;
 //設定組成checkbox或單選框radio表單元素的預設選取狀態
 function fixDefaultChecked( elem ) {
 function fixDefaultChecked( elem ) {
 function fixDefaultChecked( elem ) {         elem.defaultChecked = elem.checked;
     }
 } >     var list = nodeNames .split( "|" ),
     safeFrag = document.createDocumentFragment(); // ie6,7,8瀏覽器把safeFrage作為HTMLie 🎜>  if ( safeFrag.createElement ) {
         while ( list.length ) {
             list.pop()
             );
         } }
 // 模擬ES5中陣列的新功能
 //函數API：http://www.css88.com/jqapi-1.8/#p=jQuery.grep
jQuery. extend({
     grep: function( elems, callback, inv ) {
         var retVal        i = 0,
             length = elems.length;
inv = !!inv;
         //遍歷數組，且只儲存項目
         //       retVal = !!callback( elems[ i ], i );
             if ( inv !== retVal ) {
                }
         }
         return ret;

jQuery.extend({
     clean: function( elems, context, fragment, scripts ) {
      pth, div, hasBody, tbody, len, handleScript, jsTags,
             safe = context === document && safeF       // 確保變數context為文檔根節點document
         if ( !context || typeof context.createDocumentFragment === "undefined" ) {
             context =  created safe fragment if context permits
         for ( i = 0; (elem = elems[i]) != null; i ) {
             // elem為數字,則轉換為字串
 🎜>                 elem = "";
             }
             // 如果elem為undefined,跳出本次循環
             if ( !elem ) {
                 continue;
             }
             // Convert html string into DOM nodes
             // 轉換陣列項目(字串)為DOM節點
                 // 若不存在html實體編號或標籤,則建立文字節點
                
                 }
                 // 處理為html標籤字串的陣列項目
                  // Ensure a safe container in which to render the html
                 瀏覽器中,safe為HTMLDocument類型節點,且nodeNames數組為空白
                             // 建立一個div元素並插入文件碎片
                     div = context.createElement("div");
                     safe.appendChild( div );                     // 除了area,br,col,embed,hr, img,input,link,meta,param這些標籤外,
                     // // 將開始標籤結尾      elem = elem.replace(rxhtmlTag, " $2>");
                     // Go to html and back, then peel    左邊第一個標籤元素
                     tag = ( rtagName.exec( elem ) || ["" , ""] )[1].toLowerCase();
                        wrap = wrapMap[ tag ] || wrapMap._default;
                              地🎜>                     // Move to the right depth
         賦值為元素最近的包裹元素(即:包含第一層包裹元素)
                     while       div = div.lastChild;
                     }
                     // Remove IE's autoinserted from table fragments                     if ( !jQuery .support.tbody ) {
                         // String was a              // 判斷字串中是否擁有空白tbody標籤
                .test(elem);
                         // 若      // 變數tbody為div.firstChild.childNodes(新加入的tbody標籤集合)
                = tag === "table" && !hasBody ?
                             div.firstChild && div.firstChild.childNodes :
                             // String was a bare or
                             // 如果字符串中只有一個空thead或tfoot標籤
                                               wrap[1] === "" && !hasBody ?
                                              [];
                                           // 使用的thead或tfoot標籤
       jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
              🎜>                                ( tbody[ j ] );
                               }
                     }
                     // IE completely kills leading whitespace when inner    9以下瀏覽器中,字串以空白字串開頭,將空白字串作為div元素的第一個文字子節點
                        div.insertBefore( context.createTextNode( rleadingWhitespace.exec(elem)[0] ), div.firstChild );
        🎜>                     // 取得已處理完畢的div子節點集合(nodeList物件)
     🎜>                     // Take out of fragment container (we need a fresh div   下一次循環處理字串陣列項目前,清除處理已建立的div元素
                     div. 🎜>             }
             // 若elem為DOM節點)
             if ( elem.nodeType ) {
                 ret.push( elem );
             }
             // 將nodeList對像中節點合併到返回的數組中
             else {
                 jQuery .merge( ret, elem );
             }
         }             elem = div = safe = null;
         }
         // Reset defaultChecked for any radios and checkboxes
          // 在ie6,7中,擁有checked屬性的單選按鈕,複選框在插入到其他標籤後,選中狀態會失效(下面代碼修復該bug)
         if ( !jQuery.support.appendChecked ) {                 if ( jQuery.nodeName( elem, "in   fixDefaultChecked( elem );
                 } else if ( typeof elem.getElementsByTagName != = "undefined" ) {
                     jQuery.grep( elem.getElementsBy     }
             }
         }
         // Append elements to a provided document fragment
         // // 將ret數組中的各DOM中，位置為其原父元素索引位置後
         if ( fragment ) {
            tion( elem ) {
                 // Check if we consider it executable
                 // 若elem元素中為type屬性或type值為javascript或為ecmascript
   ) ) {
                     // Detach the script and store it in the scripts array (if provided) or the fragment
                             return scripts ?
                       ( elem ) : elem ) :
                        
             };
             for ( i = 0; (elem = ret[i]) != null; i ) {
                 // Check if we're done after handling an executable script
   含) && handleScript( elem ) ) ) {
                     // Append to fragment and handle embedded scripts
                     // 將elem元素加入文件中並處理嵌入的腳本   fragment.appendChild( elem );
                    " ) {
                         // handleScript alters the DOM, so              jsTags = jQuery.grep( jQuery.merge( [], elem.getElementsByTagName("script") ), handleScript ) ;
                         // Splice the scripts into ret after their              // 將script標籤加入陣列，位置為其原父元素索引位置後
              ( ret, [i 1, 0].concat( jsTags ) );
                              }
                 }
             }
         }
       🎜>