读Zepto源码之代码结构

虽然最近工作中没有怎么用 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 中用到,后面也会介绍。

参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落花落雨不落叶

一个比较有意思的C语言问题

2727
来自专栏雪胖纸的玩蛇日常

老男孩Python全栈开发(92天全)视频教程 自学笔记19

1757
来自专栏吾爱乐享

java之学习date类的综合案例-算一下你来到这个世界多少天

964
来自专栏python小白到大牛

这里是最全面的 python 字符串拼接总结,赶快收藏!

在 Python 中字符串连接有多种方式,这里简单做个总结,应该是比较全面的了,方便以后查阅。

1413
来自专栏C语言C++游戏编程

C语言第一个字符串Hello,C语言基础教程之字符串

C 语言中,字符串实际上是使用 null 字符 '' 终止的一维字符数组。因此,一个以 null 结尾的字符串,包含了组成字符串的字符。

812
来自专栏苍云横渡学习笔记

【day 6】python编程:从入门到实践学习笔记-函数(末附练习答案代码)

学习笔记目录 【day 1】python编程:从入门到实践学习笔记-安装、变量和简单数据类型 【day 2】python编程:从入门到实践学习笔记-列表以及其操...

2995
来自专栏進无尽的文章

Swift| 基础语法(一)

总结下 swift下的基础语法,里面涉及到:常量&变量、Swift中的数据类型、逻辑分支、循环、字符串相关、数组和字典、方法的书写调用等内容,考虑到阅读体验分多...

612
来自专栏架构之路

Java关键字 Finally执行与break, continue, return等关键字的关系

长文短总结: 在程序没有在执行到finally之前异常退出的情况下,finally是一定执行的,即在finally之前的return语句将在finally执行...

4386
来自专栏绿巨人专栏

学习Scala: 初学者应该了解的知识

2584
来自专栏北京马哥教育

Python 的正则表达式彩蛋

虽然我觉得在 Python 的标准库里的确有不少很恶心的库,但是 re 库肯定不属于这种。尽管它真的有年头没有更新了,但是在我看来,仍不失为动态语言中最好的库...

2607

扫码关注云+社区