Zepto 框架源碼解析一(結構篇)

Zepto是一個面向高級瀏覽器的JavaScript框架的，並實現JQuery的大部分API，尤爲針對手機上web開發(流量金貴，JQ又過重了)，所以選擇Zepto.js一個很是不錯的選擇！

若是要真正去了解一個框架，去讀其源碼仍是最直接的方式 ，本系列會根絕我對zepto源碼的理解，對每一個功能模塊逐個解析。

整體架構：

 

 1 var Zepto = (function() {
 2   zepto.Z = function(dom, selector) {
 3     dom = dom || []
 4     dom.__proto__ = arguments.callee.prototype
 5     dom.selector = selector || ''
 6     return dom
 7   }
 8  zepto.init = function(selector, context) {
 9     // If nothing given, return an empty Zepto collection
10     if (!selector) return zepto.Z()
11     // If a function is given, call it when the DOM is ready
12     else if (isFunction(selector)) return $(document).ready(selector)
13     // If a Zepto collection is given, juts return it
14     else if (zepto.isZ(selector)) return selector
15     else {
16       var dom
17       // normalize array if an array of nodes is given
18       if (isArray(selector)) dom = compact(selector)
19       // if a JavaScript object is given, return a copy of it
20       // this is a somewhat peculiar option, but supported by
21       // jQuery so we'll do it, too
22       else if (isPlainObject(selector))
23         dom = [$.extend({}, selector)], selector = null
24       // wrap stuff like `document` or `window`
25       else if (elementTypes.indexOf(selector.nodeType) >= 0 || selector === window)
26         dom = [selector], selector = null
27       // If it's a html fragment, create nodes from it
28       else if (fragmentRE.test(selector))
29         dom = zepto.fragment(selector.trim(), RegExp.$1), selector = null
30       // If there's a context, create a collection on that context first, and select
31       // nodes from there
32       else if (context !== undefined) return $(context).find(selector)
33       // And last but no least, if it's a CSS selector, use it to select nodes.
34       else dom = zepto.qsa(document, selector)
35       // create a new Zepto collection from the nodes found
36       return zepto.Z(dom, selector)
37     }
38   }
39   $ = function(selector, context){
40     return zepto.init(selector, context)
41   }
42  ... 代碼
43 
44  zepto.Z.prototype = $.fn
45 
46   // Export internal API functions in the `$.zepto` namespace
47   zepto.camelize = camelize
48   zepto.uniq = uniq
49   $.zepto = zepto
50 
51   return $
52 })()
53 
54 // If `$` is not yet defined, point it to `Zepto`
55 window.Zepto = Zepto
56 '$' in window || (window.$ = Zepto)
57 ;

當咱們用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的執行流程是很是類似的    接下來是事件篇 盡情期待。。。