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)   // 123

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

 

源码结构

;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了。