读Zepto源码之代码结构

warkiz 发布于2019-08-20 15:35 / 681人阅读

摘要：源码结构整体结构如果在编辑器中将的源码折叠起来，看到的就跟上面的代码一样。参考源码分析代码结构对象思想与源码分析设计和源码分析源码中关于的问题最后，所有文章都会同步发送到微信公众号上，欢迎关注欢迎提意见

虽然最近工作中没有怎么用 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 ，这句代码将 Z 的 prototype 指向 $.fn ，这样，Z 的实例就继承了 $.fn 的方法。

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

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

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

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

参考

zepto源码分析-代码结构

zepto对象思想与源码分析

zepto设计和源码分析

zepto源码中关于zepto.Z.prototype = $.fn的问题

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

云服务器 GPU云服务器读源码源码中文说明之读java代码 linux读代码工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82365.html

读Zepto源码之Gesture模块

摘要：模块基于上的事件的封装，利用属性，封装出系列事件。这个判断需要引入设备侦测模块。然后是监测事件，根据这三个事件，可以组合出和事件。其中变量对象和模块中的对象的作用差不多，可以先看看读源码之模块对模块的分析。 Gesture 模块基于 IOS 上的 Gesture 事件的封装，利用 scale 属性，封装出 pinch 系列事件。读 Zepto 源码系列文章已经放到了github上，欢...

coolpail 2019-08-21 16:43 评论0 收藏0
读Zepto源码之Stack模块

摘要：读源码系列文章已经放到了上，欢迎源码版本本文阅读的源码为改写原有的方法模块改写了以上这些方法，这些方法在调用的时候，会为返回的结果添加的属性，用来保存原来的集合。方法的分析可以看读源码之模块。 Stack 模块为 Zepto 添加了 addSelf 和 end 方法。读 Zepto 源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的...

crossea 2019-08-21 17:03 评论0 收藏0
读Zepto源码之assets模块

摘要：模块是为解决移动版加载图片过大过多时崩溃的问题。因为没有处理过这样的场景，所以这部分的代码解释不会太多，为了说明这个问题，我翻译了这篇文章作为附文怎样处理移动端对图片资源的限制，更详细地解释了这个模块的应用场景。 assets 模块是为解决 Safari 移动版加载图片过大过多时崩溃的问题。因为没有处理过这样的场景，所以这部分的代码解释不会太多，为了说明这个问题，我翻译了《How to...

thursday 2019-08-21 16:25 评论0 收藏0
读Zepto源码之Form模块

摘要：模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发事件，提交表单。最终返回的结果是一个数组，每个数组项为包含和属性的对象。否则手动绑定事件，如果没有阻止浏览器的默认事件，则在第一个表单上触发，提交表单。 Form 模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发 submit 事件，提交表单。读 Zepto 源码系列文章已...

陈江龙 2019-08-21 17:12 评论0 收藏0
读Zepto源码之IOS3模块

摘要：用法与参数要理解这段代码，先来看一下的用法和参数用法参数回调函数，有如下参数上一个回调函数返回的值或者是初始值当前值当前值在数组中的索引调用的数组初始值，如果没有提供，则为数组的第一项。接下来，检测回调函数是否为，如果不是，抛出类型错误。 IOS3 模块是针对 IOS 的兼容模块，实现了两个常用方法的兼容，这两个方法分别是 trim 和 reduce 。读 Zepto 源码系列文章...

lavnFan 2019-08-21 16:51 评论0 收藏0