读zepto核心源码学习JS笔记(1)--总体框架

一 总体结构

• 为了防止全局变量污染,zepto使用的是当即执行函数,写法结构为:

(function(global,factory){
    if(typeof define === 'function' && define.amd)
        define(function(){return factory(global)})
    else
        factory(global)
}(this,function(window){
    return Zepto
}))

• 其中框架的实现方式都是在当即执行函数的第二个函数内部实现的.
  定义了一个核心函数Zepto,也是个当即执行函数.

var Zepto =(function(){})()
//将Zepto赋值给window.Zepto;这样其余地方就能够调用zepto的方法了
window.Zepto = Zepto
//当$变量未被占用时,将Zepto赋值给$
window.$ === undefined && (window.$ = Zepto)

• Zepto函数是整个框架源码的核心部分.这里只对这一部分进行分析.下面来看看这里到底是怎么样的一个过程.

  咱们在使用zepto的时候.常常会用到$();咱们顺着这个过程去找代码
  • 首先$()中的$是什么呢,从下面代码能够明白$是Zepto函数的返回值,这里要注意Zepto是大写的;Zepto里定义了一个变量zepto,二者是不一样的;

  var Zepto =(function(){
        ...
        zepto.Z.prototype = Z.prototype = $.fn
        $.zepto = zepto
        return $
  })()

  • 知道了$;咱们再去找$();此函数的返回值为zepto.init

  $ = function(selector, context){
          return zepto.init(selector, context)
     }

  • 一样,咱们接着去找zepto.init()函数,返回值为zepto.Z()

  zepto.init = function(selector, context) {
        ...
        return zepto.Z(dom, selector)
  }

  • 再接着找zepto.Z();返回值为Z函数的实例化

  zepto.Z = function(dom, selector) {
      return new Z(dom, selector)
  }

  • 最后找Z函数;

  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源码节选:

$ = function(selector, context){
    return zepto.init(selector, context)
}

zepto.init = function(selector, context) {
    var dom
    if (!selector) return zepto.Z()
    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)
    }
    else if (isFunction(selector)) return $(document).ready(selector)
    else if (zepto.isZ(selector)) return selector
    else {
      if (isArray(selector)) dom = compact(selector)
      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)
    }
    return zepto.Z(dom, selector)
}

根据以上代码,能够将zepto.init()函数分为如下几种状况:

下面我来一个状况一个状况的分析,遇到一个知识点我就会岔开话题去整理下涉及到的知识点看到哪写到哪,因此会有些乱.