zepto源码--整体框架--学习笔记

为了深入学习javascript，根据别人推荐的方法之一：研究源码。

相对而言，之前的项目中仅仅使用过zepto和jquery，当前阶段，看到好几千行的jquery源码，心生敬畏，望而却步，所以选择相对精简一点的zepto。

首先，最重要的是理清楚zepto的结构。

zepto采用的立即执行函数来实现避免对全局变量污染。

javascript立即执行函数有两张写法：

1、 (function(形参){...})(实际传入参数);

2、 (function(形参){...}(实际传入参数));

zepto为了实现对模块化js，(只认识名词)，初始传入两个参数，并且第二个传入的参数是一个函数，

(function(形参1, 形参2){...}(实际传入参数1, function(){...}));

我们在源码上看到的就是这样的一种效果了

也可以将此种写法改为第一种立即执行函数的写法，可能更符合习惯（反正我更习惯第一种写法）。

真正的实现方式都是在立即执行函数的第二个参数的函数内部实现的。

定义一个主体函数Zepto，依然是立即执行的函数，通过函数内部返回一个实际函数。

然后将该Zepto函数赋值给全局的Zepto，即window.Zepto，如果全局上没有使用过$，则使用$作为函数命名。

其中window.$ === undefined && (window.$ = Zepto); 涉及到了&&运算符，这句可以简单的转换为

if (window.$ === undefined) window.$ = Zepto;

将Zepto赋值给window.Zepto是为了在其他地方能够调用到Zepto所封装的各种方法。将Zepto作为window的属性使用。

赋值给Zepto的立即执行函数，封装了所有需要用到的方法。

使用到了JavaScript6中对象继承方法中的“原型式继承”的方法。

原型式继承：

　　基本想法：借助原型可以基于已有的对象创建新对象，同时还不必须因此创建自定义的类型。

　　原型式继承的思想可用以下函数来说明：　　

　　　

在Zepto封装的即时执行函数内部定义了一个函数名为Z的构造函数

将内部构造函数Z实例化，作为变量zepto的属性

在初始化的方法中返回实例化之后的zepto.Z对象

zepto初始化之后的对象赋值给$

将zepto赋值给$.zepto，并返回$。

剩下的就是各种方法的实现的过程。

就是通过如此结构，实现了Zepto和$符号调用zepto的主函数。