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代码的一个笼统的结构就是这样了。