zepto源码解读（二）——zpeto.init()函数——（1）结构整理

前面第一节我们大致阐述了zepto的设计结构，看起来东西很多，但是化整为零就没那么繁杂了，一起来看一看，首先我们来看一看zepto源码中可以说是最关键的函数之一zepto.init()。

我们之前说到了$这个api会导致函数zepto返回$这个接口，$呢，是一个函数：

  // `$` will be the base `Zepto` object. When calling this
  // function just call `$.zepto.init, which makes the implementation
  // details of selecting nodes and creating Zepto collections
  // patchable in plugins.
  $ = function(selector, context){
    return zepto.init(selector, context)
  }

可以看到$函数会返回另一个名为zepto.init()的函数，并且将传入的参数响应传递进去。（这里之所以直接给$赋值而不是var $因为之前已经声明了变量$,所以变量$并不会污染全局）。

那么我们接着来看一看zepto.init()是一个什么样的函数,从字面上看init是初始化的意思。代码如下：

zepto.init = function(selector, context) {
    var dom
    // If nothing given, return an empty Zepto collection
    if (!selector) return zepto.Z()
    // Optimize for string selectors
    else if (typeof selector == 'string') {
      selector = selector.trim()
      // If it's a html fragment, create nodes from it
      // Note: In both Chrome 21 and Firefox 15, DOM error 12
      // is thrown if the fragment doesn't begin with <
      //如果是<开头 >结尾  基本的HTML代码时
      if (selector[0] == '<' && fragmentRE.test(selector))
      //调用片段生成dom
        dom = zepto.fragment(selector, RegExp.$1, context), selector = null
      // If there's a context, create a collection on that context first, and select
      // nodes from there
      else if (context !== undefined) return $(context).find(selector)
      // If it's a CSS selector, use it to select nodes.
      //通过css表达式查找元素
      else dom = zepto.qsa(document, selector)
    }
    // If a function is given, call it when the DOM is ready
    else if (isFunction(selector)) return $(document).ready(selector)
    // If a Zepto collection is given, just return it
    else if (zepto.isZ(selector)) return selector
    else {
      // normalize array if an array of nodes is given
      if (isArray(selector)) dom = compact(selector)
      // Wrap DOM nodes.
      else if (isObject(selector))
        dom = [selector], selector = null
      // If it's a html fragment, create nodes from it
      else if (fragmentRE.test(selector))
        dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
      // If there's a context, create a collection on that context first, and select
      // nodes from there
      else if (context !== undefined) return $(context).find(selector)
      // And last but no least, if it's a CSS selector, use it to select nodes.
      else dom = zepto.qsa(document, selector)
    }
    // create a new Zepto collection from the nodes found
    return zepto.Z(dom, selector)
  }

看起来很复杂对不对，还是用化整为零的思路，我们一步一步分开来看。首先看一下它的结构，用了很多的if else来判断并且处理传入的参数。最终！return zepto.Z()这个函数，可想而知，这个init函数应该是处理参数并且传出两个参数给zepto.Z()，一个名为dom，一个名为selector。至于这个zepto.Z是什么我们先不管，我们来好好看看其中几十行的if...else..是做什么用的。

---

　　· 无参数，即$()

if (!selector) return zepto.Z()

　　· selector参数是字符串，例如$('p') $('<div>') $('#content')

　　else if (typeof selector == 'string') {
      selector = selector.trim()
      // If it's a html fragment, create nodes from it
      // Note: In both Chrome 21 and Firefox 15, DOM error 12
      // is thrown if the fragment doesn't begin with <
      //如果是<开头 >结尾  基本的HTML代码时
      if (selector[0] == '<' && fragmentRE.test(selector))
      //调用片段生成dom
        dom = zepto.fragment(selector, RegExp.$1, context), selector = null
      // If there's a context, create a collection on that context first, and select
      // nodes from there
      else if (context !== undefined) return $(context).find(selector)
      // If it's a CSS selector, use it to select nodes.
      //通过css表达式查找元素
      else dom = zepto.qsa(document, selector)
    }

 首先用trim()函数处理selecor参数，清除参数中的空格。

　　情况1：参数为<div>这种形式，即是一个html标签的，那么dom变量会被赋值为用这个标签创建的DOM对象，就像dom = document.createElement('div')差不多。其中涉及到了fragmentRE和zepto.fragment两个我们尚未了解的东东，此处不要深究，知道这段代码的意思即可。

　　情况2，如果第二个参数有值，则先根据第二个参数生成zepto对象，（此处算是一个回调函数）然后再调用.find来获取，例如$('.item', '#content')这种用法。find()方法是zepto对象的一个函数。

　　情况3，以上两种情况都不是，则调用zepto.qsa来获取数据，后来聊这个方法的具体实现。qsa即querySelectAll的缩写。

　　· selector参数是函数，例如$(function(){...})

 else if (isFunction(selector)) return $(document).ready(selector)

　用到了isFunction()来判断是否为函数以及ready()函数的使用

　　· selector本身就是个zepto对象

这种用法比较少，但是也不能避免，例如：

var a = $('p');
$(a);  // 这里传入的 a 本身就是个 zepto 对象了。

　　· 其他情况

 　　else {
      // normalize array if an array of nodes is given
      if (isArray(selector)) dom = compact(selector)
      // Wrap DOM nodes.
      else if (isObject(selector))
        dom = [selector], selector = null
      // If it's a html fragment, create nodes from it
      else if (fragmentRE.test(selector))
        dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
      // If there's a context, create a collection on that context first, and select
      // nodes from there
      else if (context !== undefined) return $(context).find(selector)
      // And last but no least, if it's a CSS selector, use it to select nodes.
      else dom = zepto.qsa(document, selector)
    }

情况1：selector参数是数组，则通过一个compact()处理一下赋值给dom。

     if (isArray(selector)) dom = compact(selector)

情况2：selector参数是DOM节点，则将它作为数组赋值给dom。

　　　　 else if (isObject(selector))
        dom = [selector], selector = null

剩余情况：类似于字符串的操作，只是在输入时没有加入'' "导致不是字符串的情况。

　　　 else if (fragmentRE.test(selector))
        dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
      // If there's a context, create a collection on that context first, and select
      // nodes from there
      else if (context !== undefined) return $(context).find(selector)
      // And last but no least, if it's a CSS selector, use it to select nodes.
      else dom = zepto.qsa(document, selector)

总结

zepto.init函数算是zepto源码中比较复杂的一个函数，一开篇就遇到了个硬骨头。不过我们这里暂且先把那些分叉放在一边，先把大路疏通，然后在慢慢的去一个一个攻破那些分叉。

接下来我们再把init函数的结构梳理一下。

zepto.init = function(selector, context) {
    var dom

    // 分情况对dom赋值：
    // 1. selector 为空
    // 2. selector 是字符串，其中又分好几种情况
    // 3. selector 是函数
    // 4. 其他情况，例如 selector 是数组、对象等

    // create a new Zepto collection from the nodes found
    return zepto.Z(dom, selector)
}