jQuery.clean()方法源碼分析

在jQuery 1.7.1中調用jQuery.clean方法的地方有三處，第一次就是在我之前的隨筆分析jQuery.buildFramgment方法裡面的，其實還是構造函數的一部分，在處理諸如$('<div>123</div>')形式的參數時會首選調用jQuery.buildFramgment創建文檔片段，而這個方法有依賴jQuery.clean方法來實現dom轉換，所以這個方法的第一個用處就是在構造jQuery對象上面。另外兩處則是在兩個dom操作方法before和after方法中，主要是處理dom相關操作的，相關源碼代碼如下：

方法 jQuery.clean( elems, context, fragment, scripts ) 執行的 8 個關鍵步驟如下：

1）創建一個臨時 div 元素，並插入一個安全文檔片段中。

2）為 HTML 代碼包裹必要的父標籤，然後賦值給臨時 div 元素的 innerHTML 屬性，從而

將 HTML 代碼轉換為 DOM 元素，之後再層層剝去包裹的父元素，得到轉換後的 DOM 元素。

3）移除 IE 6/7 自動插入的空 tbody 元素，插入 IE 6/7/8 自動剔除的前導空白符。

4）取到轉換後的 DOM 元素集合。

5）在 IE 6/7 中修正複選框和單選按鈕的選中狀態。

6）合併轉換後的 DOM 元素。

7）如果傳入了文檔片段 fragment，則提取所有合法的 script 元素存入數組 scripts，並把

其他元素插入文檔片段 fragment。

8）最後返迴轉換後的 DOM 元素數組。

下面開始源碼分析：

還是先分析一下參數：

elems：保存待轉換html字符串的數組

為了更好地理解不如還是在前台調用一下然後再看看源碼中執行的結果；現在在html頁面執行一段js代碼（默認在dom加載之後執行）

然後再看看源碼執行的情況，相信了解jQuery源碼或者看過我之前隨筆的讀者都會知道這段這段代碼是怎麼一步一步走到clean方法裡面的，下面直接看執行的結果看看第一個參數的值是什麼？

通過日誌方法看到得到的就是一個數組裡面包含著傳遞進來的字符串標籤

context：文檔對象，該參數在方法 jQuery.buildFragment 中被修正為正確的文

檔對象（變量 doc） ，稍後會調用它的方法 createTextNode 創建文本節點、調用方法

createElement 創建臨時 div 元素。

由於是通過buildFragment方法傳遞進來，之前使用的例子會被修改為文檔對象document，即使不是後面也會在做進一步處理

fragment：文檔片段，作為存放轉換後的 DOM 元素的占位符，該參數在 jQuery.

buildFragment 中被創建。

下面是在源碼中輸出此參數的結果