jQueryソースコード解析の$().animate(上)

前言:jQueryソース解析の$を先に見る必要がある.queue()、 $ .dequeue()とjQuery.Callbacks()
一、例divAの幅はまず500 pxになり、300 pxになり、最後に1000 pxになる.

  
  A


  let A = document.querySelector('#A');
  //      ，      
  //      
  A.onclick = function() {
    //      animation.add()
    $('#A').animate({
      'width': '500'
    }).animate({
      'width': '300'
    }).animate({
      'width': '1000'
    });
  };

二、$().animate()の役割:CSSスタイルで要素をある状態から別の状態に変更する
ソース:

  //     ： jQuery.fn.extend()  $()   
  jQuery.fn.extend( {
   //  8062 
    //{'width': '500'}
    animate: function( prop, speed, easing, callback ) {
      //      ，false
      var empty = jQuery.isEmptyObject( prop ),
        // optall={
        //   complete:function(){jQuery.dequeue()},
        //   old:false,
        //   duration: 400,
        //   easing: undefined,
        //   queue:"fx",
        // }
        
        //undefined undefined undefined
        optall = jQuery.speed( speed, easing, callback ),

        doAnimation = function() {
         
          // Operate on a copy of prop so per-property easing won't be lost
          //Animation            
          //doAnimation      Animation  

          //this:    
          //{'width': '500'}
          //optall={xxx}
          var anim = Animation( this, jQuery.extend( {}, prop ), optall );

          // Empty animations, or finishing resolves immediately
          //finish            
          //   true，      
          if ( empty || dataPriv.get( this, "finish" ) ) {
            anim.stop( true );
          }
        };
      //    
      //   .finish=  
      doAnimation.finish = doAnimation;

      return empty || optall.queue === false ?
        this.each( doAnimation ) :
        //     
        //   queue          
        //optall.queue:"fx"
        //doAnimation:function(){}
        this.queue( optall.queue, doAnimation );
    },

  })

解析:(1)jQuery.speed()アクションspeed()アクションspeed()アクションspeed()アクションspeed()アクションspeed()アクションspeed()アクションspeed()アクションspeed()アクションspeed()
ソース:

  //  8009 
  //undefiend undefined undefined

  //            opt  
  jQuery.speed = function( speed, easing, fn ) {
    // opt={
    //   complete:false,
    //   duration: undefined,
    //   easing: undefined,
    // }

    var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
      complete: fn || !fn && easing ||
        isFunction( speed ) && speed,
      duration: speed,
      easing: fn && easing || easing && !isFunction( easing ) && easing
    };
    
    // Go to the end state if fx are off
    /*    opt.duration   */

    //undefiend
    if ( jQuery.fx.off ) {
      opt.duration = 0;

    } else {
      if ( typeof opt.duration !== "number" ) {
        if ( opt.duration in jQuery.fx.speeds ) {
          opt.duration = jQuery.fx.speeds[ opt.duration ];

        } else {
          //   
          //_default=400
          opt.duration = jQuery.fx.speeds._default;
        }
      }
    }
    /* opt.queue  */
    // Normalize opt.queue - true/undefined/null -> "fx"
    //    ==，     
    if ( opt.queue == null || opt.queue === true ) {
      opt.queue = "fx";
    }

    // Queueing
    /* opt.old  */
    opt.old = opt.complete;

    opt.complete = function() {
      if ( isFunction( opt.old ) ) {
        opt.old.call( this );
      }
      //  queue    ，    
      //  queue   "fx"，       dequeue  
      if ( opt.queue ) {
        //this     
        //opt.queue
        jQuery.dequeue( this, opt.queue );
      }
    };
    //   opt ：
    // opt={
    //   complete:function(){jQuery.dequeue()},
    //   old:false,
    //   duration: 400,
    //   easing: undefined,
    //   queue:"fx",
    // }
    return opt;
  };

解析:入力された3つのパラメータにより、optオブジェクトを処理し、3つのパラメータがすべてundefinedであれば、opt等しい:

   opt={
       complete:function(){jQuery.dequeue()},
       old:false,
       duration: 400,
       easing: undefined,
       queue:"fx",
   }

(2)animate内部は何をしていますか?作用:animate内部に1つ封入されているdoAnimationフリップフロップ、フリップフロップが作動するAnimation方法、animate最後に戻ったのはqueue()方法、注意queue()方法のパラメータにフリップフロップ付きdoAnimation (3)$().queue()役割:エンキュー操作を実行(jQuery.queue())、fxアニメーションであれば同時にエンキュー操作を実行(jQuery.dequeue())
ソースコードという方法は前の文章で分析しましたが、ここでは簡単に分析します.

  jQuery.fn.extend( {
    //optall.queue:"fx"
    //doAnimation:function(){}

    //fx    ，   dequeue()，     callback  
    queue: function( type, data ) {
          //      [doAnimate,doAnimate,xxx]
          var queue = jQuery.queue( this, type, data );
 
          //   hooks
          jQuery._queueHooks( this, type );
          /*   fx     */
          //         ，        
          if ( type === "fx" && queue[ 0 ] !== "inprogress" ) {
            jQuery.dequeue( this, type );
          }

    },

解析:inprogressは、前のアニメーションの実行が終了した後、次のアニメーションを実行することを目的とするアニメーションキューのロックです
入队ごとに1つdoAnimate関数は、首にinprogress ロックがない场合は、1つdoAnimate関数を実行しますjQuery._queueHooks()キューを空にする方法を追加することを意味するempty.remove()(4)queue役割:前編でも分析したがjQuery.queue()関数doAnimate進push配列中
(5)queue役割:チームトップ要素がjQuery.dequeue()ではなくinprogress方法であれば、まずdoAnimationチームを出てからdoAnimationチームトップに入れてからinprogress方法を実行する.キューヘッダがdoAnimationの場合、ロックを削除
キューが空の場合はクリアinprogressメモリ節約
ソース:

   //  4624 
    //    ，'type'
    dequeue: function( elem, type ) {
      //'type'
      type = type || "fx";
      //get，         
      var queue = jQuery.queue( elem, type ),
        //  
        startLength = queue.length,
        //      ，      
        fn = queue.shift(),
        //        hooks
        hooks = jQuery._queueHooks( elem, type ),
        //next   dequeue    
        next = function() {
          jQuery.dequeue( elem, type );
        };

      // If the fx queue is dequeued, always remove the progress sentinel
      //  fn='inprogress'，   fx        ，   inprogress
      if ( fn === "inprogress" ) {
        fn = queue.shift();
        startLength--;
      }

      if ( fn ) {

        // Add a progress sentinel to prevent the fx queue from being
        // automatically dequeued
        //   fx      ，   inprogress  ，         
        //                ，        
        if ( type === "fx" ) {
          queue.unshift( "inprogress" );
        }

        // Clear up the last queue stop function
        //  hooks stop    
        delete hooks.stop;
        //  dequeue  
        fn.call( elem, next, hooks );
      }
      console.log(startLength,'startLength4669')
      //          ，  hooks    ，     
      if ( !startLength && hooks ) {
        //      
        hooks.empty.fire();
        console.log(hooks.empty.fire(),'bbbb4671')
      }
    },

解析:キューが空になるまで複数のqueueメソッドを循環同期して実行
以上、doAnimation()内のロジックを除き、全体doAnimationのフローチャートは、