读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
    ```java
    	$ = function(selector, context){
            return zepto.init(selector, context)
       }
    ```
    * 同样,我们接着去找zepto.init()函数,返回值为zepto.Z()
    ```java
    zepto.init = function(selector, context) {
          ...
          return zepto.Z(dom, selector)
    }
    ```
    * 再接着找zepto.Z();返回值为Z函数的实例化
    ```java
    zepto.Z = function(dom, selector) {
      	return new Z(dom, selector)
    }
    ```
    * 最后找Z函数;
    ```java
    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源码节选:
```javascript
$ = 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()函数分为以下几种情况:

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