jquery源码学习笔记（二十四）

Posted 2021-04-08 蓝度飞

    昨天，我们已经对jQuery中的队列有了基本的了解，并且分析了jQuery中队列的两个工具方法：$.queue和$.dequeue。

    今天我们来继续阅读队列的源码，我们之前有过举例，所以不再重复的举例，直接看源码。

// 4418jQuery.fn.extend( { queue: function( type, data ) { var setter = 2;    // 当type不是字符串，那么我们视为没有传递type    // 设为默认的名字 fx    // 并且执行 setter--      // setter == 1 if ( typeof type !== "string" ) { data = type; type = "fx"; setter--; }     // 1、仅仅传入了字符串类型的type，未传data，才会为真    // 2、没有给方法传参    //     这时，我们认为是想要读队列内容    //    调用工具方法queue，返回队列内容    //    jQuery中，设置是遍历每一个都设置，读取是读第一个元素 if ( arguments.length < setter ) { return jQuery.queue( this[ 0 ], type ); }     // 如果直接传入了data是undefined，返回加jQuery对象    // 否则，遍历jQuery对象， return data === undefined ? this : this.each( function() {        // 给jQuery对象中的每个元素添加队列，并返回queue        var queue = jQuery.queue( this, type, data );        // 给该队列添加挂钩        // 个人觉得不设置也行，因为在dequeue中也会再次判断设置 jQuery._queueHooks( this, type );        // 当type为默认值，且队列中第一个不是inprogress        // 说明此队列不是正在进行中，执行出队列        // 这里我们多说几句：        //  例如：jQuery中的animate方法        //     给一个元素连续设置多个animate        //     是会一个一个依次执行        //     其实里面就用到了队列        //     并且animate队列的名字就是 fx        //     设置好animate后，我们没有看到出队列操作        //     就是因为这里默认队列自动执行出队列        //     $("div").animate({},1000).animate({},1000)        //     上面这行代码会依次执行两个动画，就是因为自动出队列 if ( type === "fx" && queue[ 0 ] !== "inprogress" ) { jQuery.dequeue( this, type ); } } ); }, dequeue: function( type ) { return this.each( function() {      // 出队列，遍历jQuery对象上的每一个元素，让其上的队列执行出队 jQuery.dequeue( this, type ); } ); }, clearQueue: function( type ) { // 清空队列，给队列设置空数组    // 我们之前了解过，设置数组会覆盖队列内的数据 return this.queue( type || "fx", [] ); },  // 当所有队列结束后，会触发promise promise: function( type, obj ) { var tmp, // 记录有多少个需要执行的队列      count = 1,      // 延时对象 defer = jQuery.Deferred(),      // jQuery对象 elements = this,      // jQuery对象中元素个数 i = this.length,      // 有选择性的执行延迟对象的成功回调 resolve = function() { // 执行队列的时候，count-1        // 减到0，触发延迟对象的完成 if ( !( --count ) ) { defer.resolveWith( elements, [ elements ] ); } };     // 当传入的type不是字符串，改为默认的fx if ( typeof type !== "string" ) { obj = type; type = undefined; } type = type || "fx";     while ( i-- ) {      // 遍历获取每一个元素队列 tmp = dataPriv.get( elements[ i ], type + "queueHooks" ); // 当队列存在，count累加 if ( tmp && tmp.empty ) { count++;        // 每次出队的时候，调用resolve tmp.empty.add( resolve ); } }    // 上面代码，队列中有数据，则累加，队列出队，则递减    // 执行这个代码时，--count == 0    // 就会执行延迟对象的完成方法 resolve(); return defer.promise( obj ); }} );

    OK，队列的所有代码看到这里就基本上结束了，下次，我们分析jQuery是如果显示隐藏（show、hide、toggle）一个元素的。