讀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()函數分爲如下幾種狀況:

下面我來一個狀況一個狀況的分析,遇到一個知識點我就會岔開話題去整理下涉及到的知識點看到哪寫到哪,因此會有些亂.