zepto源码阅读笔记（二）

整体结构

我们看构造Zepto的函数体，大致可以分为三个部分：

1. 定义Zepto 同时初始化，这部分主要包含了Zepto的核心API。

2. 对外暴露接口，即将变量Zepto与$挂载到全局变量window上，以便外部访问。

3. 在核心API基础上，对Zepto进行扩展。比如 Event、Ajax、Form模块。

核心函数

逐步分解，先从核心部分的声明、初始化Zepto开始。先看下这部分的代码轮廓：

var Zepto = (function() {
    var undefined, key, $, classList, emptyArray = [],
    
    //...

    return $
})()

可以看到，后面就是一个立即执行函数，返回了一个变量$ ，然后赋值给变量Zepto 。那么继续找一下这里的变量$究竟是个什么东西？

// `$` will be the base `Zepto` object. When calling this
// function just call `$.zepto.init, which makes the implementation
// details of selecting nodes and creating Zepto collections
// patchable in plugins.
$ = function(selector, context) {
    return zepto.init(selector, context)
}

它实际上就是一个函数。你可能已经看到了，第一个参数selector 就是我们经常调用时传递的选择器（当然，也可以是其他参数，这里单说最常见的一种场景）。具体作用这段源码的注释，已讲的很清楚。

下面这里就不再一步步跟踪，直接跳到最后的构造函数，就是我们今天要说的所谓“核心函数”。

function Z(dom, selector) {
    var i, len = dom ? dom.length : 0
    for (i = 0; i < len; i++) this[i] = dom[i]
    this.length = len
    this.selector = selector || ''
}

这便是我们在使用zepto选择dom元素时（比如$('.demo')），所得结果的构造器，返回的结构其实就是 new Z(dom, selector)。分析这个构造函数的实现过程，主要就是三个步骤：

1. 遍历所查询到的dom元素，以下标为key，分别作为当前对象的属性。
2. 将所查询到的dom元素集合的长度，赋值给当前对象的length属性。
3. 将所查询的选择器，赋值给当前对象的selector属性。

曾经在面试中遇到这样一个问题：（大意）jQuery获取一个元素，返回的结果是什么？现在，至少弄清楚zepto获取元素时的返回结果了。

（水平有限，欢迎指正）

转载于:https://www.cnblogs.com/CodingJS/p/6688148.html