jquery3.0源码解读（四）Callbacks

最新推荐文章于 2021-04-22 11:43:29 发布

小马xml

最新推荐文章于 2021-04-22 11:43:29 发布

阅读量837

点赞数

分类专栏：前端文章标签： jquery 源码 callbacks 多线程 defer

本文链接：https://blog.csdn.net/m1213642578/article/details/52529407

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery 3.0中Callbacks模块，它用于管理回调函数列表，支持如once、memory、unique和stopOnFalse等选项。Callbacks提供了添加、禁用、删除回调等功能，常用于事件处理和复杂场景下的回调执行控制。文章通过源码分析，揭示了Callbacks的工作原理及其在多线程限制下的回调执行策略。

摘要由CSDN通过智能技术生成

本来想先分析defer的，但是在defer的文件中，发现它依赖于另外一个比较重要的模块callbacks。于是，这节就先分析callbacks吧。

前置知识

观察者模式
钩子
递延

应用场景

在js开发中，由于没有多线程，经常会遇到回调这个概念，比如说，在 ready 函数中注册回调函数，注册元素的事件处理等等。在比较复杂的场景下，当一个事件发生的时候，可能需要同时执行多个回调方法，可以直接考虑到的实现就是实现一个队列，将所有事件触发时需要回调的函数都加入到这个队列中保存起来，当事件触发的时候，从这个队列中依次取出保存的函数并执行。

功能说明

callbacks指一个多用途的回调列表对象，提供了强大的的方式来管理回调函数列表。简单的使用方式如下：

function fn1( value ){
    console.log( value );
}

function fn2( value ){
    fn1("fn2 says:" + value);
    return false;
}

var callbacks = $.Callbacks();
callbacks.add( fn1 );
callbacks.fire( "foo!" ); // outputs: foo!

callbacks.add( fn2 );
callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!

简单来说就是管理回调函数的执行的。这个模块主要还是提供给jquery内部的ajax和defer使用。

$.callbacks(flags)

$.callbacks(flags)中的flags是$.Callbacks()的一个可选参数, 结构为一个用空格标记分隔的标志可选列表,用来改变回调列表中的行为 (比如. $.Callbacks( ‘unique stopOnFalse’ ))。

可用的 flags:

once: 确保这个回调列表只执行一次
memory: 当队列已经触发之后，再添加进来的函数就会直接被调用（并且使用的是上一次fire的参数），不需要再触发一次。
unique: 保证函数的唯一。
stopOnFalse: 当一个回调返回false 时中断调用

方法说明

callbacks.add() 回调列表中添加一个回调或回调的集合。
callbacks.disable() 禁用回调列表中的回调
callbacks.disabled() 确定回调列表是否已被禁用。
callbacks.empty() 从列表中删除所有的回调.
callbacks.fire() 用给定的参数调用所有的回调
callbacks.fired() 访问给定的上下文和参数列表中的所有回调。
callbacks.fireWith() 访问给定的上下文和参数列表中的所有回调。
callbacks.has() 确定列表中是否提供一个回调
callbacks.lock() 锁定当前状态的回调列表。
callbacks.locked() 确定回调列表是否已被锁定。
callbacks.remove() 从回调列表中的删除一个回调或回调集合。

源码分析

源码如下：

jQuery.Callbacks = function( options ) {

    options = typeof options === "string" ?
        createOptions( options ) :
        jQuery.extend( {}, options );

    var firing,

        memory,

        fired,

        locked,

        list = [],

        queue = [],

        firingIndex = -1,

        fire = function() {

            locked = options.once;

            fired = firing = true;
            for ( ; queue.length; firingIndex = -1 ) {
                memory = queue.shift();
                while ( ++firingIndex < list.length ) {

                    if ( list[ firingIndex ].apply( memory[ 0 ], memory[ 1 ] ) === false &&
                        options.stopOnFalse ) {

                        firingIndex = list.length;
                        memory = false;
                    }
                }
            }

            if ( !options.memory ) {
                memory = false;
            }

            firing = false;

            if ( locked ) {

                if ( memory ) {
                    list = [];

                } else {
                    list = "";
                }
            }
        },

        self = {

            add: function() {
                if ( list ) {

                    if ( memory && !firing ) {
                        firingIndex = list.length - 1;
                        queue.push( memory );
                    }

                    ( function add( args ) {
                        jQuery.each( args, function( _, arg ) {
                            if ( jQuery.isFunction( arg ) ) {
                                if ( !options.unique || !self.has( arg ) ) {
                                    list.push( arg );
                                }
                            } else if ( arg && arg.length && jQuery.type( arg ) !== "string" ) {

                                // Inspect recursively
                                add( arg );
                            }
                        } );
                    } )( arguments );

                    if ( memory && !firing ) {
                        fire();
                    }
                }
                return this;
            },

            remove: function() {
                jQuery.each( arguments, function( _, arg ) {
                    var index;
                    while ( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
                        list.splice( index, 1 );

                        // Handle firing indexes
                        if ( index <= firingIndex ) {
                            firingIndex--;
                        }
                    }
                } );
                return this;
            },

            has: function( fn ) {
                return fn ?
                    jQuery.inArray( fn, list ) > -1 :
                    list.length > 0;
            },

            empty: function() {
                if ( list ) {
                    list = [];
                }
                return this;
            },

            disable: function() {
                locked = queue = [];
                list = memory = "";
                return this;
            },
            disabled: function() {
                return !list;
            },

            lock: function() {
                locked = queue = [];
                if ( !memory && !firing ) {
                    list = memory = "";
                }
                return this;
            },
            locked: function() {
                return !!locked;
            },

            fireWith: function( context, args ) {
                if ( !locked ) {
                    args = args || [];
                    args = [ context, args.slice ? args.slice() : args ];
                    queue.push( args );
                    if ( !firing ) {
                        fire();
                    }
                }
                return this;
            },

            fire: function() {
                self.fireWith( this, arguments );
                return this;
            },

            fired: function() {
                return !!fired;
            }
        };

    return self;
};