zepto源码解读（二）——zpeto.init()函数——（2）zepto.fragment()函数详解

zepto.init（）函数里有几个非常重要的函数，zepto.fragment()函数是其中之一。它主要是对生成元素的一个处理，并对生成的dom元素进行返回。例如：$("<p>")或者为他添加属性$("<p>"，{height：200px}),就会生成一个新的P元素出来。源码如下：

 zepto.fragment = function(html, name, properties) {
   // 内部函数 HTML 转换成 DOM
   // 原理是 创建父元素，innerHTML转换
   // @param html  html片段
   // @param name  容器标签名
   // @param propertie  附加的属性对象
   // @returns {*}
    var dom, nodes, container

    // A special case optimization for a single tag
    //如果是传入单个元素，创建dom
    if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))

    if (!dom) {
      //修正自闭合标签 如<div />，转换成<div></div>
      if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")
      //给name取元素名
      if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
      //设置容器名，如果不是tr,tbody,thead,tfoot,td,th，则容器名为div
      //为什么设置容器，是严格按照HTML语法，虽然tr td th浏览器会会自动添加tbody
      if (!(name in containers)) name = '*'
      //创建容器
      container = containers[name]
      //生成dom
      container.innerHTML = '' + html
      dom = $.each(slice.call(container.childNodes), function(){
        container.removeChild(this)
      })
    }

    if (isPlainObject(properties)) {
      nodes = $(dom)
      $.each(properties, function(key, value) {
        if (methodAttributes.indexOf(key) > -1) nodes[key](value)
        else nodes.attr(key, value)
      })
    }

    return dom
  }

函数最上定义了几个变量，然后是这样一段代码：

  //如果是传入单个元素，创建dom
    if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))

· singleTagRE是我们zepto函数中一开始就定义的一个正则表达式，用于探测单个元素，解释如下：

    //用来匹配取出单个元素
    // var singleTagRE = /^<(w+)s*/?>(?:</1>|)$/;
    // var name = (singleTagRE.test("<p></p>")&&RegExp.$1);　　//这里可以正常匹配<p>,<p/>,<p></p>
    // console.log(name);
    // 结果：p
    singleTagRE = /^<(w+)s*/?>(?:</1>|)$/,

· container是先前定义的一个对象，代码如下,用于判断元素的容器：

    containers = {
      'tr': document.createElement('tbody'),
      'tbody': table, 'thead': table, 'tfoot': table,
      'td': tableRow, 'th': tableRow,
      '*': document.createElement('div')
    },

· isPlainObject是用于判断传入参数obj是否为纯粹的对象（哟个对象字面量{}创建的或者new出来的对象）,在这里的用途是为了判断元素是否需要添加属性，例如这样：

$("<p>",{200px,height:200px;})中的第二个参数对象。

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