jQueryのシミュレーションは$().animate(上)

上図に従ってdoAnimationを除く論理を実現する.

  
  




  
  A


  //       ，       function  $
  //    $   function(){xxx}
  (function($) {

    window.$ = $;

  })(
    //           
    //             chenQuery     $，   window.$
    function() {
      //  ID
      let rquickExpr = /^(?:#([\w-]*))$/;
      //jQuery   
      function chenQuery(selector) {
        return new chenQuery.fn.init(selector);
      }

      //             
      const Queue=[]

      //    
      const dataPriv={
        get:function (type) {
          if(type==='queue') return Queue
        },

      }

      const dequeue=function() {
        const Queue=dataPriv.get("queue")
        let fn = Queue.shift()
        //        ，      
        const next = function() {
          dequeue();
        }

        if ( fn === "inprogress" ) {
          fn = Queue.shift();
        }

        if (fn) {
          Queue.unshift( "inprogress" );
          /*  doAnimation  ,doAnimation(element, options,function() {firing = false;_fire();})*/
          /*fn       func*/
          /*func             ，         function*/
          //func              ，          
          const func=function() {
            next();
          }
          fn(func);
        }


      }

      //  type
      const queue=function(element, options, callback, ) {
        //             ,   Queue.push  
        const Queue=dataPriv.get("queue")
        //        doAnimation   
        Queue.push(function(func) {
          //doAnimation
          callback(element, options, func);
        });
        //         ，    
        //   inprogress
        if(Queue[0]!=='inprogress'){
          dequeue()
        }

      }

      /*  */
      const animation = function(element,options) {

        const doAnimation = function(element, options, func) {
          const width = options.width

          /*===           ，   Animation     ===*/
          //       2s
          element.style.transitionDuration = '400ms';
          element.style.width =  width + 'px';

          /*        */
          //transitionend     CSS        
          element.addEventListener('transitionend', function() {
            func()
          });
        }
        //     animation，     
        return queue(element, options,doAnimation,);
      }


      // chenQuery fn prototype       animate  
      chenQuery.fn = chenQuery.prototype = {
        //      animation        ，       ，      
        animate: function(options) {
          animation(this.element, options);
          //      this,   $("#A"),        animate  
          //        
          return this;
        }
      }
      // chenQuery fn    init  
      const init = chenQuery.fn.init = function(selector) {
        // ["#A", "A",groups: undefined,index: 0,input: "#A"]
        const match = rquickExpr.exec(selector);
        //       id   
        const element = document.getElementById(match[1])
        //this chenQuery.fn.init  
        //      element  
        this.element = element;
        //  chenQuery.fn.init
        return this;
      }
      //   ，  init     chenQuery.fn  
      init.prototype = chenQuery.fn;

      //chenQuery     function(){}
      // chenQuery{
      //init   fn，fn   init
      //   fn:{
      //     animate:function(){},
      //     init:function(){},
      //     // init.prototype=fn
      //   },
      //   prototype:{
      //     animate:function(){},
      //   }
      // }

      return chenQuery;
    }());


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

解析:(1)匿名関数の自己呼び出しのパラメータ:

   (function(a){
     console.log(a) //name
   })('name')
  
   (function (b) {
     console.log(b) //function(){console.log('name')}
   })(function () {
     console.log('name')
   })

(2)クイックマッチングidセレクタ

      //  ID
      let rquickExpr = /^(?:#([\w-]*))$/;

(3)inprogressは、アニメーションロック1つ目のアニメーションが実行されると、Queueにロックinprogressを追加し、非同期呼び出しアニメーションを阻止する、すなわちアニメーションの同期実行を要求し、アニメーションが終了すると、ロックを除去し、次のアニメーションを呼び出す.
(4)transitiononend transitionendイベントはCSS完了遷移後にトリガーされ、ここでは単一のアニメーション完了の合図としてトリガーされ、トリガー後、次のアニメーション進行を知らせる
次の図の実装は、次の記事に掲載されます.
(完)