zepto源码分析

前言

想比10000多行的jQuery，zepto可谓是短小精悍，作为主要应用在移动端的低配版jQuery，源代码只有大概1500行，代码很容易理解，也写的很巧妙。有可以借鉴的东西。

最外层的闭包

最外层是一个立即执行的函数

(function(global, factory) {  if (typeof define === 'function' && define.amd)    define(function() { return factory(global) })  else    factory(global)}(this, function(window){    var Zepto = (function(){        //代码写在这里面        var zepto = {};    //zepto是一个空对象        var $;        ...        $.zepto = zepto;        return $    })    window.Zepto = Zepto;    window.$ === undefined && (window.$ = Zepto);}))

最后把$和Zepto作为属性挂在了window对象上，对外部只有$使用，不会污染全局环境。

zepto对象

重点要说一下zepto这个对象，这个对象很重要，贯穿始终。需要注意的是，zepto就是一个对象，而jquery里边是一个类。这是不一样的地方。一些方法会挂在zepto对象上。比如Z()这个方法，一会会重点说。

关于$的解读

接下来说的是zepto中的对象$.

$ = function(selector, context){    return zepto.init(selector, context)}

$是一个很重要的函数，接收两个参数，selector选择器，和context(可选的)。$也是定于在Zepto函数中，我们看他的代码实际上发现，调用$的时候，其实是调用了zepto对象上的init方法，那么这个init方法又是个什么东西呢？

zepto.init()

init这个方法里边有点复杂。

zepto.init = function(selector, context) {    var dom    //如果没有传递参数，返回一个空对象。    if (!selector) return zepto.Z()        // 如果selector是一个字符串（css选择器）    else if (typeof selector == 'string') {      //去掉前后空格      selector = selector.trim()           // 如果是
    
     这样的html代码      if (selector[0] == '<' && fragmentRE.test(selector))        dom = zepto.fragment(selector, RegExp.$1, context),        selector = null      // 如果有context参数，则在上下文中寻找selector      else if (context !== undefined) return $(context).find(selector)      // 如果是一个css表达式，通过qsa方法来寻找元素      else dom = zepto.qsa(document, selector)    }    //如果是一个方法，在ready的时候加载它    else if (isFunction(selector)) return $(document).ready(selector)    // 如果是zepto对象，返回自身    else if (zepto.isZ(selector)) return selector    else {      // 如果是一个数组，      if (isArray(selector)) dom = compact(selector)      // 如果是一个对象，转成一个数组      else if (isObject(selector))        dom = [selector], selector = null      // 如果是一个html代码，创建之。      else if (fragmentRE.test(selector))        dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null      // 如果上下文参数不为空，跟上边一样      else if (context !== undefined) return $(context).find(selector)      // 否则在document查找selector      else dom = zepto.qsa(document, selector)    }    // 经过一系列判断来适配不同的情况，反正是有dom了。    return zepto.Z(dom, selector)  }
    

前边经过各种判断，init最后会返回zepto对象的Z方法，那个Z方法看名字应该是类似于构造函数之类的。看一下Z的代码。

zepto.Z()

zepto.Z = function(dom, selector) {    return new Z(dom, selector)  }

好吧，这个方法返回了一个Z对象，我们知道用new创建的对象需要构造函数，接下来自然我们要看一下构造函数Z了。

function Z

function Z(dom, selector) {    var i, len = dom ? dom.length : 0    for (i = 0; i < len; i++) this[i] = dom[i]    this.length = len    this.selector = selector || ''  }

好了，看到这里，暂时告一段落，我们来分析一波。我们调用$(selector,context)这个方法，经过zepto.init(selector,context)--->zepto.Z(dom,selector)----->new Z(dom,selector).

既然如此，那么我们是如何在Z这个实例上调用那些各种方法，比如addClass()这类的方法。

$.fn

在zepto中$.fn()是一个简简单单的对象。这个对象是一个空对象。而那些操作dom的方法都是写在这个对象里边。我们大概看一下这个对象。

$.fn = {    constructor: zepto.Z,    length:0,    map:function(){...},    addClass:function(){...},    remove:function(){...}    ....}//接下来很重要zepto.Z.prototype = Z.prototype = $.fn

重要的事情说三遍

其实很简单，把$.fn这个对象挂在了Z的原型对象上，那么new Z()出来的实例就都能访问$.fn上面定义的属性了，所以也就能执行各种dom操作。

至此，zepto的精髓基本讲的差不多了。大概用了1000行代码实现了这个过程，接下来的代码基本是分析了一些事件的问题还有ajax相关的东西。暂且不说了。