File d'attente du module de file d'attente d'apprentissage du code source jQuery

1. Module de file d'attente de jQuery

Le module de file d'attente de jQuery fournit principalement la prise en charge du module d'animation EFFECTS. Un espace de noms séparé est extrait afin que les programmeurs puissent personnaliser le vôtre. file d'attente.

Pour les méthodes d'appel d'API spécifiques, veuillez vous référer à ce blog http://snandy.iteye.com/blog/1978428

2. Structure du code du module de file d'attente

Méthodes de bas niveau jQuery a trois méthodes : les méthodes de file d'attente, de retrait de file d'attente et _queueHooks ne sont pas recommandées pour être appelées directement en externe

Les méthodes avancées incluent .queue, .dequeue, .clearQueue, .delay, .promise

3. Code d'implémentation

Pour plus de points d'attention, veuillez consulter les commentaires dans le code pour des idées

   jQuery.fn.extend({        //.queue([queuename]);返回第一个匹配元素关联的函数队列        //.queue([queueName],newQueue);修改匹配元素关联的函数队列，使用函数数组newQueue替换当前队列        //.queue([queueName],callback(next，hooks))；修改匹配元素关联的函数队列，添加callback到队列中        //如果queueName省略，则默认是动画队列fx        queue:function(type,data){            var setter=2;            if(typeof type!=='string'){                //进行参数修正
                data=type;
                type='fx';
                setter--;
            }            //靠，这种判断是获取还是设置的点子是怎么想出来的
            if(arguments.length<setter){                //说明是获取操作，根据jQuery的思想，获取的时候，仅获取首个
                return jQuery.queue(this[0],type);
             }             //否则说明是设置操作，根据jQuery的思想，设置的时候，进行遍历设置
             if(data){                this.each(function(i,item){                    var queue=jQuery.queue(this,type,data);                    //确定添加了hooks
                    jQuery._queueHooks(this,type);                    //如果是动画队列，那么首次入队的时候回自动出队执行，不必手动调用dequeue
                    if(type==='fx'&&queue[0]!=='inprogress'){
                        jQuery.dequeue(this,type);
                    }
                });
             }

        },
        dequeue:function(type){            this.each(function(){
                jQuery.dequeue(this,type);
            });
        },        //使得队列中下一个函数延迟执行        delay:function(time,type){
            time=jQuery.fx?jQuery.fx.speeds[time]||time:time;
            type=type||'fx';            //next和hooks的参数赋值是在dequeue的fn.call中，还记得么？
            return this.queue(type,function(next,hooks){                var timerId=setTimeout(next,time);
                hooks.stop=function(){
                    clearTimeout(timerId);
                }
            });
        },
        clearQueue:function(type){            this.queue(type||'fx',[]);
        },        //针对每一个匹配元素，对其添加监控，当所有匹配元素的type队列中的函数都执行完毕时，调用Promise的done添加的成功回调函数        promise:function(type,obj){            var elems=this,
                count=0,
                i=elems.length,
                defered=jQuery.Deferred(),
                hook;            if(typeof type!=='string'){
                obj=type;
                type=undefined;
            }
            type=type||'fx';
            function resolve(){                if(!(--count)){                    //如果计数器count变为0                    defered.resolveWith(elems,[elems]);
                }
            }            //添加监控
            while(i--){
                hook=elems[i]&&data_priv.get(elems[i],type+'queueHooks');                if(hook&&hook.empty){
                    count++;
                    hook.empty.add(resolve);
                }
            }            //这里为毛要调用一次呢?           // resolve();
            return defered.promise(obj);

        }
    });

Vue complète du code myJquey.js jusqu'à présent

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!