zepto源碼研究 - fx_methods.js

簡要：依賴fx.js，主要是針對show，hide，fadeIn，fadeOut的封裝。

源碼以下：

//  Zepto.js
//  (c) 2010-2015 Thomas Fuchs
//  Zepto.js may be freely distributed under the MIT license.

;(function($, undefined){
  var document = window.document, docElem = document.documentElement,
      origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle// origShow展現    origHide隱藏  origToggle展現隱藏開關

  /**
   * 便捷動畫的核心方法
   * @param el  DOM
   * @param speed 持續時間
   * @param opacity 不透明度
   * @param scale 縮放
   * @param callback 回調
   * @returns {*}
   */
  // anim 主要針對縮放和透明度的過渡效果
  // 對 animate方法的進一步的封裝
  function anim(el, speed, opacity, scale, callback) {
    //修正參數  anim(el，callback）
    if (typeof speed == 'function' && !callback) callback = speed, speed = undefined
    var props = { opacity: opacity }
    if (scale) {
      props.scale = scale
      el.css($.fx.cssPrefix + 'transform-origin', '0 0')  //設置變形原點
    }
    return el.animate(props, speed, null, callback)//不支持速率變化，
  }

  /**
   * 底層方法：隱藏顯示的元素
   * @param el
   * @param speed
   * @param scale
   * @param callback
   * @returns {*}
   */
  // TODO 這裏既然是hide的功能，爲何還要傳入scale參數 ，這裏有點多餘
  function hide(el, speed, scale, callback) {
    //不透明度設爲0，即徹底透明，至關於隱藏元素。這裏的原理是播放不透明-透明的過渡。
    //具體代碼爲 $(dom).animate({opacity: 0, '-webkit-transform-origin': '0px 0px 0px', '-webkit-transform': 'scale(0, 0)' },800)
    //設置了變形原點，縮放爲0，它就會縮到左上角再透明
    return anim(el, speed, 0, scale, function(){
      origHide.call($(this)) //調用隱藏
      callback && callback.call(this)
    })
  }

  /**
   * 顯示
   * @param speed  持續時間
   * @param callback   回調函數
   * @returns {*}
   */
  $.fn.show = function(speed, callback) {
    origShow.call(this)
    //具體代碼爲 $(dom).animate({opacity: 1, '-webkit-transform-origin': '0px 0px 0px', '-webkit-transform': 'scale(1, 1)' },800)
    //設置了變形原點，縮放爲0，它就會縮到左上角再透明
    if (speed === undefined) speed = 0
    // TODO 這個if，else有點奇怪
    else this.css('opacity', 0)
    return anim(this, speed, 1, '1,1', callback)
  }

  /**
   * 隱藏
   * @param speed      持續時間
   * @param callback   回調函數
   * @returns {*}
   */
  // TODO 爲何在上一不要封裝出hide函數，難道其餘地方有調用
  $.fn.hide = function(speed, callback) {
    if (speed === undefined) return origHide.call(this)
    else return hide(this, speed, '0,0', callback)
  }

  /**
   * 顯示、隱藏開關
   * @param speed     持續時間
   * @param callback   回調函數
   * @returns {*}
   */
  $.fn.toggle = function(speed, callback) {
    if (speed === undefined || typeof speed == 'boolean')
      return origToggle.call(this, speed)
    else return this.each(function(){
      var el = $(this)
      //這是toggle的關鍵邏輯
      el[el.css('display') == 'none' ? 'show' : 'hide'](speed, callback)
    })
  }

  /**
   * 淡入淡出
   * 原理： $(dom).animate({opacity: 1/0, '-webkit-transform-origin': '0px 0px 0px'},800)
   * @param speed  持續時間
   * @param opacity 不透明度
   * @param callback  回調函數
   * @returns {*}
   */
  // 淡入淡出總函數
  $.fn.fadeTo = function(speed, opacity, callback) {
    return anim(this, speed, opacity, null, callback)
  }

  /**
   *  淡入
   * 原理： $(dom).animate({opacity: 1, '-webkit-transform-origin': '0px 0px 0px'},800)
   * @param speed   持續時間
   * @param callback  回調函數
   * @returns {*}
   */
  $.fn.fadeIn = function(speed, callback) {
    var target = this.css('opacity').
    if (target > 0) this.css('opacity', 0)
    else target = 1
    // 首先顯示，而後變不透明
    return origShow.call(this).fadeTo(speed, target, callback)
  }
  
  /**
   *  淡出
   * 原理： $(dom).animate({opacity: 0, '-webkit-transform-origin': '0px 0px 0px'},800)
   * @param speed   持續時間
   * @param callback  回調函數
   * @returns {*}
   */
  // fadeOut 會將元素先變爲透明，而後隱藏
  $.fn.fadeOut = function(speed, callback) {
    return hide(this, speed, null, callback)
  }

  /**
   * 淡入淡出開關
   * @param speed   持續時間
   * @param callback  回調函數
   * @returns {*}
   */
  $.fn.fadeToggle = function(speed, callback) {
    return this.each(function(){
      var el = $(this)
      el[

          (el.css('opacity') == 0 || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
          ](speed, callback)
    })
  }

})(Zepto)

$.fn.show:

先調用原方法顯示出來，若是參數有speed，callback則先讓元素變透明調用anim逐步將元素顯示出來，最後調用callback回調方法。

$.fn.hide:

和$.fn.show的過程相反，先調用anim將元素透明化，而後調用callback和原hide方法。固然，若是未傳入參數，則直接隱藏。

$.fn.fadeIn:

首先將元素變爲不透明，而後調用       origShow.call(this).fadeTo(speed,1, callback)；

$.fn.fadeOut:

直接調用：  hide(this, speed, null, callback)   注：$.fn.hide也調用了hide方法，但不一樣的是$.fn.hide要求非但透明化，而且以（0,0）爲中心scale縮爲0。