zepto源码解读（一）——整体架构

zepto源码解读（一）

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，针对移动端开发， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。

那么zepto这个库是怎么做的呢？一直都非常好奇，所以在上个礼拜开始就在开始慢慢的读zepto源码，也算是有一些体会，所以想开始记录自己这些不大不小的体会，也是一种成长的积累吧。那么废话不多说，直接开始写：

Zepto核心模块架构代码

下列代码展示了Zepto的核心模块架构代码，忽略了所有实现的细节。

var Zepto = (function() {
    // 私有变量($和zepto不是私有变量，它们会被暴露出去)
    var undefined, emptyArray = [], filter = emptyArray.filter, slice = emptyArray.slice,
        $, zepto = {};

    // 私有函数
    function likeArray() {}
    // Z类
    function Z() {}
　　 $ = function(seclecor,context){
    　　return zepto.init(selector,context)
    }
    // 构建Z对象的主要函数
    zepto.matches = function() {};
    zepto.fragment = function() {};
    zepto.Z = function() {
        return new Z(dom, selector)
    };
    zepto.isZ = function() {
        return object instanceof zepto.Z
    };
    zepto.init = function() {};
    zepto.qsa = function() {};
　　
    // Z对象的共享方法
    $.fn = {
        constructor: zepto.Z,
        length: 0,

        forEach: emptyArray.forEach,
        reduce: emptyArray.reduce,
        push: emptyArray.push,
        sort: emptyArray.sort,
        splice: emptyArray.splice,
        indexOf: emptyArray.indexOf,

        concat: function() {}
    }

    // 静态方法
    $.extend = function() {};

    // plugin compatibility
    $.uuid = 0
    $.support = {}
    $.expr = {}
    $.noop = function() {}

    // 修改zepto.Z和Z的原型都指向$.fn
    zepto.Z.prototype = Z.prototype = $.fn

    // 把内部的一些API函数通过$.zepto命名空间暴露出去
    zepto.uniq = uniq
    zepto.deserializeValue = deserializeValue
    $.zepto = zepto

    return $
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

我们首先一步一步来分析，我们平时调用$("selector")的时候中的$是什么？就是这段代码最底部的window.$，但是看代码我们知道调用$实际上是调用Zepto这个自调用函数，这个函数会返回一个$,那么这里的这个$是什么呢？很显然是代码中的一个函数，$函数又返回了一个zepto.init()，那么我们跳到zepto.init()看，这个zepto.init()会处理传入的参数，并且再次return出一个zepto.Z(),zepto.Z()会return 一个新的构造函数即 return new Z(),并且通过 zepto.Z.prototype = Z.prototype = $.fn 来使Z对象拥有$.fn中的方法。

那么整个zepto代码的一个笼统的结构就是这样了。