zepto.js源码解读(一）：初窥全貌

因为公司是电商公司的缘故，主做H5页面，故使用了zepto.js这个库。因此就萌生解读一下源码的想法。以此记录下，方便自己归纳知识，以及督促自己。don’t talk, show me the code.

down了1.1.6的未压缩版。打开源码，可以看到九百多行代码。

它定义了一个Zepto变量，它被包含在一个快速执行函数里面。

 var Zepto = (function(){
        //...
})();
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

可以看到，Zepto被挂载在了window这个全局对象上（window.Zepto = Zepto）。并且当window对象上的$未定义的时候，将Zepto赋给这个 $。那么我们平时用的$(ele)其实就是Zepto(ele)。

展开Zepto这个变量，我们发现包裹它的这个快速执行函数给我们返回了一个值：$。那么这个$是怎么来的呢?抽象下源码：

var Zepto = (function() {
    var $;
    //...
    $ = function(selector, context){
    return zepto.init(selector, context)
  }
  //...
$.zepto = zepto;
//zepto挂载到$上
return $
})()

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

$呢，其实就是function(selector, context){//…}这个函数的返回值。

总结下就是： 定义个Zepto变量 ==> 把它挂载在全局对象window上 ==> window上未定义$，就将Zepto赋给$。==> Zepto变量的执行结果是返回一个$, $又是一个函数（zepto.init()）的返回值，zepto这个对象被挂载到了这个$上。
注意这里的Zepto和小写的zepto不是一个概念。

那么 zepto又是什么?

//....
zepto = {};
//....
zepto.init = function(selector, context) {
//...
}

它一开始被定义为一个空对象，它有一个init方法。结合上面抽象出来的代码，我们发现，当$(‘div’)的时候，其实调用了zepto.init()这个函数的返回值。

zepto.init()又做了什么呢？

如果接着往下说，篇幅可能有点大，放在下篇去讲。