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

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

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

自执行函数

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

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

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

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

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

 (function () {
     let val = '123'
 })()

 console.log(val)   // val is not defined

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

 let temp= (function () {
   let val = '123';
   return val;     // 必须return, 否则获取不到值
 })()

 window.temp = temp;

 console.log(temp)   //

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

源码结构

 ;let Zepto = (function () {
     let $, zepto = {};

    return $;   // 最终返回值
 })()

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

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

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

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

再看$到底是什么

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

 ;let Zepto = (function () {
   let $, zepto = {};
   $ = function(selector, context) {
     console.log('获取节点');
     return zepto.init(selector, context);
   };
   return $;
 })();

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

此时，如果访问节点， 会输出'获取节点'

 <div>
     <span>测试</span>
     <span>测试</span>
     <span>测试</span>
 </div>

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

这里报错是因为init方法还未定义；

继续创建 init方法

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

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

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

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

 if (!selector) return zepto.Z()

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

 else if (typeof selector == 'string') {
       selector = selector.trim()

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

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

       else dom = zepto.qsa(document, selector)   //这里的qsa其实就是document.querySelectorAll()
 }

　　(1) $(' span ')

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

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

　　如果第一个字符是<，并且正则fragmentRE成立，

　　则使用fragment方法处理dom节点

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

　　

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

　　如果传入第二个参数，即之前的context不等于undefined，则相当于执行$('div').find('span')

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

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

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

3 . 如果传入函数,用document调用一个zepto对象，然后$.ready()方法， ready方法和上面的find方法一样在后面创建。

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

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

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

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

5 . 若是引用类型

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

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

 zepto.Z = function(dom, selector) {
     dom = dom || []
     dom.__proto__ = $.fn;
     dom.selector = selector || '';
     console.log(dom)
     console.log(selector)
     return dom;
  };

关于Z()

1 . 传入dom，如果未传则返回[]空数组

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

　　

2 . 如果有dom $('span')，则

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

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

　　

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

 $.fn = {
     get: function () {
       console.log('自定义get方法')
     },
     on: function () {
       console.log('自定义on方法')
     }
 }

　　

可以看出，通过原型对象上创建新方法后，原来的内置方法都没有了。

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

dom.__proto__.get = function() {}

dom.__proto__.on = function() {}

　　

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