zepto源碼解讀（二）——zpeto.init()函數——（2）zepto.fragment()函數詳解

zepto.init（）函數裏有幾個很是重要的函數，zepto.fragment()函數是其中之一。它主要是對生成元素的一個處理，並對生成的dom元素進行返回。例如：$("<p>")或者爲他添加屬性$("<p>"，{height：200px}),就會生成一個新的P元素出來。源碼以下：

 1  zepto.fragment = function(html, name, properties) {
 2    // 內部函數 HTML 轉換成 DOM
 3    // 原理是 建立父元素，innerHTML轉換
 4    // @param html  html片斷
 5    // @param name  容器標籤名
 6    // @param propertie  附加的屬性對象
 7    // @returns {*}
 8     var dom, nodes, container
 9 
10     // A special case optimization for a single tag
11     //若是是傳入單個元素，建立dom
12     if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))
13 
14     if (!dom) {
15       //修正自閉合標籤 如<div />，轉換成<div></div>
16       if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")
17       //給name取元素名
18       if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
19       //設置容器名，若是不是tr,tbody,thead,tfoot,td,th，則容器名爲div
20       //爲何設置容器，是嚴格按照HTML語法，雖然tr td th瀏覽器會會自動添加tbody
21       if (!(name in containers)) name = '*'
22       //建立容器
23       container = containers[name]
24       //生成dom
25       container.innerHTML = '' + html
26       dom = $.each(slice.call(container.childNodes), function(){
27         container.removeChild(this)
28       })
29     }
30 
31     if (isPlainObject(properties)) {
32       nodes = $(dom)
33       $.each(properties, function(key, value) {
34         if (methodAttributes.indexOf(key) > -1) nodes[key](value)
35         else nodes.attr(key, value)
36       })
37     }
38 
39     return dom
40   }

函數最上定義了幾個變量，而後是這樣一段代碼：

  //若是是傳入單個元素，建立dom
    if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))

· singleTagRE是咱們zepto函數中一開始就定義的一個正則表達式，用於探測單個元素，解釋以下：

1     //用來匹配取出單個元素
2     // var singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;
3     // var name = (singleTagRE.test("<p></p>")&&RegExp.$1);　　//這裏能夠正常匹配<p>,<p/>,<p></p>
4     // console.log(name);
5     // 結果：p
6     singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,

· container是先前定義的一個對象，代碼以下,用於判斷元素的容器：

1     containers = {
2       'tr': document.createElement('tbody'),
3       'tbody': table, 'thead': table, 'tfoot': table,
4       'td': tableRow, 'th': tableRow,
5       '*': document.createElement('div')
6     },

· isPlainObject是用於判斷傳入參數obj是否爲純粹的對象（喲個對象字面量{}建立的或者new出來的對象）,在這裏的用途是爲了判斷元素是否須要添加屬性，例如這樣：

$("<p>",{width:200px,height:200px;})中的第二個參數對象。

1   function isPlainObject(obj) {
2     return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) == Object.prototype
3   }