Zepto源码分析之一（代码结构及初始化）

关于读源码，读jQuery天然是不错，但太过于庞大不易解读，对于小白，最好从Zepto，Lodash这样的小库入手。

这里使用的是zepto1.1.6版本为例。

 

自执行函数

在阅读以前，先弄清楚闭包和自执行函数

两种方式： (function() {})() 和 (function() {}())

1 (function() {
2   console.log('这里直接执行')
3 })()

1 (function () {
2   console.log('这里直接执行')
3 }())

自执行函数的优点在于，避免了全局变量的污染，即在自执行函数体内声明的变量，外部是没法访问到的。

1 (function () {
2     let val = '123'
3 })()
4 
5 console.log(val)   // val is not defined

如须要获取变量val的值，只能在函数体内部返回，而后将函数赋值给一个全局变量

1 let temp= (function () {
2   let val = '123';
3   return val;     // 必须return, 不然获取不到值
4 })()
5 
6 window.temp = temp;
7 
8 console.log(temp)   // 123

而关于闭包，简单理解就是在自执行函数内部声明变量或方法，在自执行函数内就造成了一个闭合的上下文环境，外部是没法直接访问的。

 

源码结构

1 ;let Zepto = (function () {
2     let $, zepto = {};
3 
4    return $;   // 最终返回值
5 })()
6 
7 window.Zepto = Zepto;
8 window.$ === undefined && (window.$ = Zepto);

首先声明一个字支持函数并赋给变量Zepto, 再将变量Zepto赋给全局变量window.Zepto

若是$未被声明，则也将Zepto赋给window.$全局变量

此时，外部访问Zepto或者$均可以返回自执行函数内部的$（即 return $）

 

再看$究竟是什么

 $返回一个函数，传入的参数是selector选择器（即tagName，id，或className），context暂为空。

 1 ;let Zepto = (function () {
 2   let $, zepto = {};
 3   $ = function(selector, context) {
 4     console.log('获取节点');
 5     return zepto.init(selector, context);
 6   };
 7   return $;
 8 })();
 9 
10 window.Zepto = Zepto;
11 window.$ === undefined && (window.$ = Zepto);

此时，若是访问节点， 会输出'获取节点'

1 <div>
2     <span>测试</span>
3     <span>测试</span>
4     <span>测试</span>
5 </div>

1 let span = $('span');
2 console.log(span)

这里报错是由于init方法还未定义；

继续建立 init方法

init函数是绑定在zepto对象上的方法（以前已经声明一个zepto空对象）

1 zepto.init = function(selector, context) {
2     let dom;
      // 处理dom的代码
3     return zepto.Z(dom, selector);
4 };

init处理dom部分，分为几种状况

1 . 当不传参数 $()， 直接返回zepto.Z(）不传参

1 if (!selector) return zepto.Z()

2 . 当传入字符串参数，又分为几种

 1 else if (typeof selector == 'string') {
 2       selector = selector.trim()
 3 
 4       if (selector[0] == '<' && fragmentRE.test(selector))
 5         dom = zepto.fragment(selector, RegExp.$1, context), selector = null
 6      
 7       else if (context !== undefined) return $(context).find(selector)
 8     
 9       else dom = zepto.qsa(document, selector)   //这里的qsa其实就是document.querySelectorAll()
10 }

　　(1) $(' span ')

　　首先将清除字符串先后空格 selector.trim()

　　(2) $('<div></div>')

　　若是第一个字符是<，而且正则fragmentRE成立，

　　则使用fragment方法处理dom节点

1 if (selector[0] == '<' && fragmentRE.test(selector))
2         dom = zepto.fragment(selector, RegExp.$1, context), selector = null

　　

　　(3) $('span', 'div')

　　若是传入第二个参数，即以前的context不等于undefined，则至关于执行$('div').find('span')

1 else if (context !== undefined) return $(context).find(selector)

　　若div中存在span则返回span，不然返回空数组。

       (4)如以上三种不知足则执行最后一步，zepto.qsa()

 

 

 3 . 若是传入函数,用document调用一个zepto对象，而后$.ready()方法， ready方法和上面的find方法同样在后面建立。

1 else if (isFunction(selector)) return $(document).ready(selector);

 

4 . 若已是一个zepto对象，则直接返回该对象，没必要再调用$()， 即 $($('span')) === $('span')

1 else if (zepto.isZ(selector)) return selector

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

 

5 . 如果引用类型

 1 else {
 2       // 如参数是数组，则调用compact方法， 会将null或undefined剔除
 3       if (isArray(selector)) dom = compact(selector)
 4       // 如是DOM节点，则数组化
 5       else if (isObject(selector))
 6         dom = [selector], selector = null
 7       // 如下和上面字符串参数的重复，何意未知。
 8       else if (fragmentRE.test(selector))
 9         dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
10       // 
11       // 
12       else if (context !== undefined) return $(context).find(selector)
13       // 
14       else dom = zepto.qsa(document, selector)
15     }

 

 

init是一个初始化方法，调用init时去执行zepto.Z()函数

1 zepto.Z = function(dom, selector) {
2     dom = dom || []
3     dom.__proto__ = $.fn;
4     dom.selector = selector || '';
5     console.log(dom)
6     console.log(selector)
7     return dom;
8  };

 

关于Z()

1 . 传入dom，若是未传则返回[]空数组

　　若是不传DOM节点 $()， 则返回一个空值。

　　

2 . 若是有dom $('span')，则

       

3 . 同时在该数组的原型对象上建立$.fn对象

　　在未定义$.fn以前，dom.__proto__原型对象上的方法是Array构造函数的内置方法

　　

　　而这里使用了dom.__proto__ = $.fn 从新定义了原型对象上的方法

1 $.fn = {
2     get: function () {
3       console.log('自定义get方法')
4     },
5     on: function () {
6       console.log('自定义on方法')
7     }
8 }

　　

能够看出，经过原型对象上建立新方法后，原来的内置方法都没有了。

若是只是想追加方法，则应该在原型对象上添加属性。

dom.__proto__.get = function() {}

dom.__proto__.on = function() {}

　　

4 . 最后返回该DOM节点对象。此时$('span')对象就能够调用方法get和on了。