zepto源码学习（1）

izhuhaodev 发布于2019-08-20 10:15 / 1968人阅读

摘要：实际上，内部维护的的对象是一个类数组对象这里的。粗略的流程可以归纳为调用函数根据传入的参数生成对象。重置对象的原型，使之拥有一系列方法

zepto版本为1.0。
这一章来看看入口是怎么实现的。

我们一般是这样用的：$("#test"),在196行，zepto定义了函数$:

$ = function(selector, context){
    return zepto.init(selector, context)
  }

这里的init方法做了些什么呢？在160行，可以看到，这里是根据不同参数返回不同的对象：

什么都没有传入，返回一个空的zepto对象

如果是一个函数，那么执行dom ready

如果已经是一个zepto对象，直接返回

如果是window,document，实际上也是直接返回

如果是一个html片段，那么生成节点

如果上述情况都不是，那么就用选择器document.querySelectorAll获取dom对象

然后将得到的对象传入zepto.Z，来到143-148行：

zepto.Z = function(dom, selector) {
    dom = dom || []
    dom.__proto__ = arguments.callee.prototype
    dom.selector = selector || ""
    return dom
  }

这里是入口最关键的步骤之一。实际上，zepto内部维护的的对象是一个类数组对象(这里的dom)。然后用zepto.Z的原型覆盖了此类数组的的原型。那么zepto.Z的原型又是什么呢？我们跳到第608行：

zepto.Z.prototype = $.fn

那么$.fn是什么呢？再看278-550行：

$.fn = {
   //各种方法
}

因此，zepto.Z返回的类数组对象就有了$.fn的各种方法了。粗略的流程可以归纳为：

调用$函数

根据传入的参数生成对象。

重置对象的原型，使之拥有一系列方法

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

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

Zepto.js源码学习之一

摘要：元旦假期转眼即过，终于在最后一天想起最初那个宏伟的计划，然后默默捡起源码的第一行。在具体深入之前，我希望能对库结构有一个整体的了解。最外层为一个匿名的立即执行函数，因为只需要执行一次。元旦假期转眼即过，终于在最后一天想起最初那个宏伟的计划，然后默默捡起Zepto源码的第一行。在具体深入之前，我希望能对Zepto库结构有一个整体的了解。看的时间比较短，以下如果有不正确的地方，欢迎指出。...

hlcc 2019-08-21 11:28 评论0 收藏0
zepto源码分析-代码结构

摘要：本来想学习一下的源码，但由于的源码有多行，设计相当复杂，所以决定从开始，分析一个成熟的框架的代码结构及执行步骤。同时发表在我的博客源码分析代码结构本来想学习一下jQuery的源码，但由于jQuery的源码有10000多行，设计相当复杂，所以决定从zepto开始，分析一个成熟的框架的代码结构及执行步骤。网上也有很多zepto的源码分析，有的给源码添加注释，有的谈与jQuery的不同，...

sherlock221 2019-08-20 12:20 评论0 收藏0
zepto源码ajax模块学习

摘要：对象待会讲，我认为是设计最巧妙的地方。在跨域的时候会使用到，这是为了禁止使用。的目的在于创建一个事件，然后在触发他，如果默认行为被取消了，则返回。这是的初始化，默认是请求，是新建的对象，表示浏览器是否应该被允许缓存响应。在学习zepto的源码的时候，不得不称赞这些人的厉害，我虽然能看明白，但是要我写，估计吭哧吭哧写不出来。虽然现在很少人使用zepto了，但是学习这些源码我相信每次看都...

hizengzeng 2019-08-23 10:46 评论0 收藏0
向zepto.js学习如何手动(trigger)触发DOM事件

摘要：好啦我们已经解决了是啥的疑问了，现在回去开始一步步解读如何实现手动触发事件。我们主要看看这里面几乎含有如何手动触发一个事件的大部分步骤和内容。前言前端在最近几年实在火爆异常，vue、react、angular各路框架层出不穷，咱们要是不知道个双向数据绑定，不晓得啥是虚拟DOM，也许就被鄙视了。火热的背后往往也是无尽的浮躁，学习这些先进流行的类库或者框架可以让我们走的更快，但是静下心...

spacewander 2019-08-20 17:04 评论0 收藏0
向zepto.js学习如何手动(trigger)触发DOM事件

摘要：好啦我们已经解决了是啥的疑问了，现在回去开始一步步解读如何实现手动触发事件。我们主要看看这里面几乎含有如何手动触发一个事件的大部分步骤和内容。前言前端在最近几年实在火爆异常，vue、react、angular各路框架层出不穷，咱们要是不知道个双向数据绑定，不晓得啥是虚拟DOM，也许就被鄙视了。火热的背后往往也是无尽的浮躁，学习这些先进流行的类库或者框架可以让我们走的更快，但是静下心...

fuyi501 2019-08-29 12:44 评论0 收藏0