因为公司是电商公司的缘故,主做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()又做了什么呢?
如果接着往下说,篇幅可能有点大,放在下篇去讲。