Zepto 框架源码解析一(结构篇)

Zepto是一个面向高级浏览器的JavaScript框架的，并实现JQuery的大部分API，尤其针对手机上web开发(流量金贵，JQ又太重了)，因此选择Zepto.js一个非常不错的选择！

如果要真正去了解一个框架，去读其源码还是最直接的方式 ，本系列会根绝我对zepto源码的理解，对每个功能模块逐个解析。

总体架构：

var Zepto = (function() {
  zepto.Z = function(dom, selector) {
    dom = dom || []
    dom.__proto__ = arguments.callee.prototype
    dom.selector = selector || ''
    return dom
  }
 zepto.init = function(selector, context) {
    // If nothing given, return an empty Zepto collection
    if (!selector) return zepto.Z()
    // 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, juts return it
    else if (zepto.isZ(selector)) return selector
    else {
      var dom
      // normalize array if an array of nodes is given
      if (isArray(selector)) dom = compact(selector)
      // if a JavaScript object is given, return a copy of it
      // this is a somewhat peculiar option, but supported by
      // jQuery so we'll do it, too
      else if (isPlainObject(selector))
        dom = [$.extend({}, selector)], selector = null
      // wrap stuff like `document` or `window`
      else if (elementTypes.indexOf(selector.nodeType) >= 0 || selector === window)
        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), 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)
    }
  }
  $ = function(selector, context){
    return zepto.init(selector, context)
  }
 ... 代码

 zepto.Z.prototype = $.fn

  // Export internal API functions in the `$.zepto` namespace
  zepto.camelize = camelize
  zepto.uniq = uniq
  $.zepto = zepto

  return $
})()

// If `$` is not yet defined, point it to `Zepto`
window.Zepto = Zepto
'$' in window || (window.$ = Zepto)
;

当我们用Zepto来获取一个元素的时候比如($("#zepto"))，具体步骤如下：

1. 执行zepto.init
2. 获取这个元素  ,最后返回一个数组 然后执行 

   zepto.Z(dom, selector)

3. 将数组化后的节点列表的__proto__指向zepto.Z.prototype 注意到zepto.Z.prototype = $.fn ，$.fn下的所有方法都挂在了zepto.Z的prototype下   也就是说$("#zepto") 已经拥有了$.fn 的所有方法 
4. 返回数组

大致流程就这么简单，其实和jQ的执行流程是非常相似的    接下来是事件篇 尽情期待。。。