zepto源码阅读-（二）获取Z对象：elector选择符

在我们使用 jquery 或 zepto 的时候，我们最先注意到的就是 $(xxx) 这种表示形式，下面让我们探究之。

1.获取Z对象的流程

其实$函数里面什么也没干，只是单纯的调用$.zepto.init方法：

return zepto.init(selector, context)。

$.zepto.init方法里面的逻辑就是获取Z对象的逻辑。
在$.zepto.init方法内部通过不同的参数执行不同的流程，最后返回一个Z对象或者在DOMContentLoaded事件触发后执行传进来的回调函数。

zepto.init = function(selector, context) {
    var dom
    // case 1：
    // 选择器为false，返回一个空的zepto对象
    if (!selector) return zepto.Z()
    // case 2：
    // 选择器为字符串
    else if (typeof selector == 'string') {
        selector = selector.trim()
        // case2.1：
        // 字符串为html标签时，交给zepto.fragment来创建一个片段
        if (selector[0] == '<' && fragmentRE.test(selector))
            dom = zepto.fragment(selector, RegExp.$1, context), selector = null
        // case2.2：
        // 传入上下文时，调用find方法返回zepto对象
        else if (context !== undefined) return $(context).find(selector)
        // case2.3：
        // 此时选择器应该是一个css选择器了，用zepto.qsa来找到存在的dom
        else dom = zepto.qsa(document, selector)
    }
    // case 3：
    // 选择器为一个函数，在dom加载完后执行它
    else if (isFunction(selector)) return $(document).ready(selector)
    // case 4：
    // 选择器为一个zepto的对象，直接返回
    else if (zepto.isZ(selector)) return selector
    // case 5：
    // 其他情况：
    else {
        // case 5.1：
        // 为数组时，将它包装成zepto对象后返回
        if (isArray(selector)) dom = compact(selector)
        // case 5.2：
        // 为对象时，放入一个数组中交给zepto.Z方法来创建zepto对象
        else if (isObject(selector))
            dom = [selector], selector = null
        // case 5.3：
        // 为html片段时，创建一个片段的dom数组
        else if (fragmentRE.test(selector))
            dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
        // case 5.4：
        // 有上下文时，调用find方法返回zepto对象
        else if (context !== undefined) return $(context).find(selector)
        // case 5.5：
        // 最后，还是用zepto.qsa方法来试试能不能找到dom
        else dom = zepto.qsa(document, selector)
    }
    // 从发现的节点创建一个新的Zepto集合
    return zepto.Z(dom, selector)
}

总结以上代码得知
具体会分为以下几种情况：

• 有传入 context ，回调自身：$(context).find(selector)；
• selector 参数为空，直接调用$.zepto.Z方法获取 Z 对象：zepto.Z()；
• selector 参数为 html 片段，调用$.zepto.fragment方法获取对应 DOM 节点再调用$.zepto.Z方法获取Z 对象；
• selector 参数为 css 选择器，调用$.zepto.qsa方法获取对应 DOM 节点再调用$.zepto.Z方法获取Z 对象；
• selector 参数为 DOM 节点数组，去掉数组中值为 null 的项, 然后调用$.zepto.Z方法获取Z 对象；
• selector 参数为单个 DOM 节点，dom=[selector], 然后调用$.zepto.Z方法获取Z 对象；
• selector 参数为 Z 对象，直接返回 Z 对象；
• selector 参数为函数，执行$(document).ready(selector),在 DOM 加载完的时候调用该函数。