这两天把zepto.js源码重新读了一遍,对其中的一些要点做了笔记(zepto版本号:1.1.6)。
Zepto代码主要分为两部分,一部分是Zepto核心,包括Zepto集合的初始化以及常见的函数,另一部分为插件模式,包括事件绑定、ajax等。
先看一下Zepto的基本结构,简化后代码如下:
var Zepto = (function() {
var $, zepto = {}
//这里主要是绑定原型,返回zepto集合
zepto.Z = function(dom, selector) {
dom = dom || [] //对象数组
dom.__proto__ = $.fn //将dom的原型指向$.fn
dom.selector = selector || ''
return dom
}
//判断是否为Zepto集合
zepto.isZ = function(object) {
return object instanceof zepto.Z
}
//初始化
zepto.init = function(selector, context) {
return zepto.Z(dom, selector)
}
//创建
$ = function(selector, context){
return zepto.init(selector, context)
}
//复制属性,这个函数主要用于扩展插件
$.extend = function(target){
return target
}
//原型
$.fn = {}
zepto.Z.prototype = $.fn
$.zepto = zepto
return $
}());
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)
这里面有疑问的是__proto__属性,这个属性指向对象的原型,通过这个属性,zepto对象无需采用new就可以访问到原型中的方法,有些浏览器如IE10以下并没有__proto__属性,zepto是如何处理的呢?