jQuery技術內幕電子版5

標籤：blog   http   java   使用   io   檔案   for   2014   div   

4. 轉換HTML代碼為DOM元素

先建立一個文檔片段DocumentFragment，然後調用方法jQuery.clean(elems, context, frag-ment, scripts)將HTML代碼轉換為DOM元素，並儲存在建立的文檔片段中。

!fragment為true時可能有三種情況： •HTML代碼不符合緩衝條件。 •HTML代碼符合緩衝條件，但此時是第一次轉換，不存在對應的緩衝。 •HTML代碼符合緩衝條件，但此時是第二次轉換，對應的緩衝值是1。

5. 把轉換後的DOM元素放入緩衝對象jQuery.fragments

 •如果HTML代碼不符合緩衝條件，則總是會執行轉換過程。 •如果HTML代碼符合緩衝條件，第一次轉換後設定緩衝值為1，第二次轉換後設定為文檔片段，從第三次開始則從緩衝中讀取。

6. 返迴文檔片段和緩衝狀態{fragment: fragment, cacheable: cacheable}

小結

2.5　jQuery.clean(elems, context, fragment, scripts)

2.5.1　實現原理

該方法先建立一個臨時的div元素，並將其插入一個安全文檔片段中，然後把HTML代碼賦值給div元素的innerHTML 屬性，瀏覽器會自動產生DOM元素，最後解析div元素的子項目得到轉換後的DOM元素

如果HTML代碼中含有需要包裹在父標籤中的子標籤，例如，子標籤<option>需要包裹在父標籤<select>中，方法jQuery.clean()會先在HTML代碼的前後加上父標籤和關閉標籤，在設定臨時div元素的innerHTML 屬性產生DOM元素後，再層層剝去包裹的父元素，取出HTML代碼對應的DOM元素

如果HTML代碼中含有<script>標籤，為了能執行<script>標籤所包含的JavaScript代碼或引用的JavaScript檔案，在設定臨時div元素的inner-HTML 屬性產生DOM元素後，方法jQuery.clean()會提取其中的script元素放入數組scripts。在產生的DOM元素插入文檔樹後，數組scripts中的script元素會被逐個手動執行。

2.5.2　源碼分析

1. 定義jQuery.clean(elems, context, fragment, scripts)

2. 修本文檔對象context

既然方法jQuery.buildFragment()已經謹慎地修正了文檔對象doc，並傳給了方法jQuery.clean()，那麼這裡為什麼要再次做類似的修正呢？

這是為了方便直接調用jQuery.clean()轉換HTML代碼為DOM元素。

3. 遍曆待轉換的HTML代碼數組elems

在for語句的第1部分，聲明了迴圈變數elem，在for語句的第2部分取出elems[i]賦值給elem，並判斷elem的有效性。另外，判斷elem的有效性時使用的是“!=”，這樣可以同時過濾null和undefined，卻又不會過濾整型數字0，如果elem是數值型，通過讓elem自加一個Null 字元串，把elem轉換為字串。

如果!elem為true，即elem可以轉換為false，那麼跳過本次迴圈，執行下一次迴圈。這行代碼用於過濾Null 字元串的情況。如果elem是整型數字0，因為在前面的代碼中已經被轉換成了字串“0”，所以這裡可以簡單地判斷!elem

如果elem是字串，即HTML代碼，則開始轉換HTML代碼為DOM元素

（1）建立文本節點

用正則rhtml檢測HTML代碼中是否含有標籤、字元代碼或數字代碼，該正則的定義代碼

原生方法document.createTextN-ode()用於建立文本節點，但是對於傳給它的字串參數不會做轉義解析，也就是說，該方法不能正確地解析和建立包含了字元代碼或數字代碼的字串，而瀏覽器的innerHTML機制則可以

（2）修正自關閉標籤

用正則rxhtmlTag匹配HTML代碼中的自關閉標籤，並通過方法replace()替換為成對的標籤

正則rxhtmlTag是修正自關閉標籤的關鍵所在

jQuery技術內幕電子版5