虽然最近工作中没有怎么用 zepto ,但是据说 zepto 的源码比较简单,而且网上的资料也比较多,所以我就挑了 zepto 下手,希望能为以后阅读其他框架的源码打下基础吧。

源码版本

本文阅读的源码为 zepto1.2.0

阅读zepto之前需要了解 javascript 原型链和闭包的知识,推荐阅读王福朋的这篇文章:深入理解 Javascript 原型和闭包,写得很详细,也非常易于阅读。

源码结构

整体结构

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

如果在编辑器中将 zepto 的源码折叠起来,看到的就跟上面的代码一样。

zepto 的核心是一个闭包,加载完毕后立即执行。然后暴露给全局变量 zepto ,如果 $ 没有定义,也将 $ 赋值为 zepto

核心结构

在这部分中,我们先不关注 zepto 的具体实现,只看核心的结构,因此我将zepto中的逻辑先移除,得出如下的核心结构:

var zepto = {}, $

function Z(doms) {
var len = doms.length
for (var i = 0; i < len; i++) {
this[i] = doms[i]
}
this.length = doms.length
} zepto.Z = function(doms) {
return new Z(doms)
} zepto.init = function(doms) {
var doms = ['domObj1','domObj2','domObj3']
return zepto.Z(doms)
} $ = function() {
return zepto.init()
} $.fn = {
constructor: zepto.Z,
method: function() {
return this
}
} zepto.Z.prototype = Z.prototype = $.fn return $

在源码中,可以看出, $ 其实是一个函数,同时在 $ 身上又挂了很多属性和方法(这里体现在 $.fn 身上,其他的会在后续的文章中谈到)。

我们在使用 zepto 的时候,会用 $ 去获取 dom ,并且在这些 dom 对象身上都有 zepto 定义的各种各样的操作方法。

从上面的伪代码中,可以看到,$ 其实调用了 zepto.init() 方法,在 init 方法中,会获取到 dom 元素集合,然后将集合交由 zepto.Z() 方法处理,而 zepto.Z 方法返回的是函数 Z 的一个实例。

函数 Z 会将 doms 展开,变成实例的属性,key 为对应 domObj 的索引, 并且设置实例的 length 属性。

zepto.Z.prototype = Z.prototype = $.fn

读到这里,你可能会有点疑惑,$ 最终返回的是 Z 函数的实例,但是 Z 函数明明没有 dom 的操作方法啊,这些操作方法都定义在 $.fn 身上,为什么 $ 可以调用这些方法呢?

其实关键在于这句代码 Z.prototype = $.fn ,这句代码将 Zprototype 指向 $.fn ,这样,Z 的实例就继承了 $.fn 的方法。

既然这样就已经让 Z 的实例继承了 $.fn 的方法,那 zepto.Z.prototype = $.fn 又是为什么呢?

如果我们再看源码,会发现有这样的一个方法:

zepto.isZ = function(object) {
return object instanceof zepto.Z
}

这个方法是用来判读一个对象是否为 zepto 对象,这是通过判断这个对象是否为 zepto.Z 的实例来完成的,因此需要将 zepto.ZZprototype 指向同一个对象。 isZ 方法会在 init 中用到,后面也会介绍。

参考

读Zepto源码之代码结构的更多相关文章

  1. 读 Zepto 源码之内部方法

    数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray ...

  2. 读 zepto 源码之工具函数

    Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性.目标对象的同名属性会被源对象的 ...

  3. 读 Zepto 源码之神奇的 $

    经过前面三章的铺垫,这篇终于写到了戏肉.在用 zepto 时,肯定离不开这个神奇的 $ 符号,这篇文章将会看看 zepto 是如何实现 $ 的. 读Zepto源码系列文章已经放到了github上,欢迎 ...

  4. 读Zepto源码之集合操作

    接下来几个篇章,都会解读 zepto 中的跟 dom 相关的方法,也即源码 $.fn 对象中的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码 ...

  5. 读 Zepto 源码之集合元素查找

    这篇依然是跟 dom 相关的方法,侧重点是跟集合元素查找相关的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zept ...

  6. 读Zepto源码之操作DOM

    这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...

  7. 读Zepto源码之样式操作

    这篇依然是跟 dom 相关的方法,侧重点是操作样式的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2. ...

  8. 读Zepto源码之属性操作

    这篇依然是跟 dom 相关的方法,侧重点是操作属性的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2. ...

  9. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

随机推荐

  1. sublime与Emment

    sublime与Emment 作为一个开发者,想必用过sublime和Emment 的无不大快朵颐,这两者结合在一起简直是天合之作.它不仅仅提高编码的速度而且令开发者感到编码的乐趣和舒适感,今天准备写 ...

  2. 2017年2月22日-----------乱码新手自学.net 之Entity Framework 增删改

    由于我是自学的,没有人教,在网上查资料也查不到个所以然.问大神们也是爱理不理的. 所以这篇随笔纯粹源自于我自己的认识.是否真正正确我也没有把握. 如果有什么错误,请大神们给予指正 ========== ...

  3. js中可转bool为false的值

    number :0为false,其他都为true. string:""为false,其他字符串都为真,PS: " "空格为true,"false&qu ...

  4. 最新虚拟机SAP ECC6.0 EHP7带示例数据IDES版+BW740

    学习SAP,需要虚拟机,请联系QQ:858-048-581 版本:ECC6.0 EHP7.虚拟机操作系统:windows server 2008 64bit..数据库:SQL2008 R2.系统已经做 ...

  5. Ubuntu 小白安装血泪史

    介绍: 新入手的Ubuntu:版本 命令行模式下 出现 ♦♦♦♦ 图形界面无法获取最高权限:gurb.cfg 无法再图形界面下修改 安装类型: 1.安装Ubuntu,与Window 7共存 2.清除整 ...

  6. 文件上传----FTP部署

  7. HTML第一课

    <标签名 属性>内容</标签名> <标签/> 静态网页与动态网页的区别:是否从数据库提取数据相对路径跟绝对路径../代表高一级的&nbsp牛逼的空格< ...

  8. C# .NET更智能的数据库操作封装项目

    前面两篇文章介绍了框架的思路及里面大概的实现过程,那时候忘记上传项目,就补发一下.顺便介绍下框架使用方式,并分析下框架使用的优缺点. 先发一下前两章的链接 篇一:http://www.cnblogs. ...

  9. React组件开发经典案例--todolist

    点开查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  10. 初次接触java中的递归算法

    一道关于兔子繁衍的编程题: 有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 自己考虑了挺久,思路出现了问题,甚至连 ...