Detailed explanation of the complete functional code of jQuery Callbacks by yourself

The usage is exactly the same as $.Callbacks, but it only implements add, remove, fire, empty, has and constructor functions with parameters. $.Callbacks also has disable, disabled, fireWith, fired, lock, locked methods

The code is as follows:

Copy code The code is as follows:

String.prototype.trim = function ()
        {
            return this.replace( /^\s+|\s+$/g, '' );
        };

        // Simulate jQuery.Callbacks object
        function MyCallbacks( options )
        {
            var ops = { once: false, memory: false, unique: false, stopOnFalse: false };

            if ( typeof options === 'string' && options.trim() !== '' )
            {
                var opsArray = options.split( /\s+/ );
                for ( var i = 0; i < options.length; i++ )
{
if ( opsArray[i] === 'once' )
ops.once = true;
else if ( opsArray[i] === 'memory' )
ops.memory = true;
else if ( opsArray[i] === 'unique' )
ops.unique = true;
else if ( opsArray[i] === 'stopOnFalse' )
ops.stopOnFalse = true;
}
}

var ar = [];
var lastArgs = null;
var firedTimes = 0;

function hasName( name )
{
var h = false;

if ( typeof name === 'string'
&& name !== null
&& name.trim() !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === name )
{
h = true;
break;
}
}
}

return h;
}

// add a function
this.add = function ( fn )
{
if ( typeof fn === 'function' )
{
if ( ops.unique )
{
// check whether it had been added before
if ( fn.name !== '' && hasName( fn.name ) )
{
return this;
}
}

ar.push( fn );

if ( ops.memory )
{
// after added , call it immediately
fn.call( this, lastArgs );
}
}

return this;
};

// remove a function
this.remove = function ( fn )
{
if ( typeof ( fn ) === 'function'
&& fn.name !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === fn.name )
{
ar.splice( i, 1 );
}
}
}

return this;
};

// remove all functions
this.empty = function ()
{
ar.length = 0;
return this;
};

// check whether it includes a specific function
this.has = function ( fn )
{
var f = false;

if ( typeof ( fn ) === 'function'
&& fn.name !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === fn.name )
{
f = true;
break;
}
}
}

return f;
};

            // invoke funtions it includes one by one
            this.fire = function ( args )
            {
                if ( ops.once && firedTimes > 0 )
                {
                    return this;
                }

                if ( ar.length > 0 )
                {
                    var r;

                    for ( var i = 0; i < ar.length; i )
                    {
                        r = ar[i].call( this, args );

                        if ( ops.stopOnFalse && r === false )
                        {
                            break;
                        }
                    }
                }

firedTimes ;

                if ( ops.memory )
                {
                    lastArgs = args;
                }

                return this;
            };
        };

测试函数如下：（注意fn1 fn2是匿名函数， fn2返回false , fn3是有“名”函数）

复制代码代码如下:

var fn1 = function ( v )
        {
            console.log( 'fn1 ' ( v || '' ) );
        };

        var fn2 = function ( v )
        {
            console.log( 'fn2 ' ( v || '' ) );
            return false;
        };

        function fn3( v )
        {
            console.log( 'fn3 ' ( v || '' ) );
        };

1. Test add & fire

var cb=new MyCallbacks();

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.fire('hello')

Output:

fn1 hello
fn2 hello
fn3 hello

2. Test remove
var cb=new MyCallbacks();

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.remove(fn1)
cb.fire('hello')
cb.remove(fn3)
cb.fire('hello')
Output:

fn1 hello
fn2 hello
fn3 hello
----------------------------------
fn1 hello
fn2 hello

2. Test has
var cb=new MyCallbacks();

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.has(fn1)

cb.has(fn3)

Output:

false

---------------

true

3. Test the constructor with parameters: once

var cb=new MyCallbacks('once')

cb.add(fn1)

cb.fire('hello')

cb.add(fn2)

cb.fire('hello')

Output:

hello

------------------

-----------------------------

4. Test the constructor with parameters: memory

var cb=new MyCallbacks('memory')

cb.add(fn1)

cb.fire('hello') // Output: fn1 hello

cb.add(fn2) // Output: fn2 hello

cb.fire('hello')

Output:

fn1 hello

fn2 hello

5. Test the constructor with parameters: stopOnFalse

var cb=new MyCallbacks('stopOnFalse')

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.fire('hello')

Output:

fn1 hello
fn2 hello
6. Test the constructor with parameters: unique

var cb=new MyCallbacks('unique')

b.add(fn3)

cb.fire('hello')

Output:

fn3 hello

7. Test the constructor with combined parameters: the four setting parameters can be combined at will. Only test all combinations at once, otherwise you will have to write 16 test cases T_T

var cb=new MyCallbacks('once memory unique stopOnFalse')

cb.add(fn1) // Output: fn1

cb.add(fn2) // Output: fn2

cb.add(fn3) // Output: fn3

cb.fire('hello')

Output:

fn1 hello
fn2 hello
cb.fire('hello') // Output: No output

The following is the official API document:

Description: A multi-purpose callbacks list object that provides a powerful way to manage callback lists.The $.Callbacks() function is internally used to provide the base functionality behind the jQuery $.ajax() and$.Deferred( ) components. It can be used as a similar base to define functionality for new components.

Constructor: jQuery.Callbacks( flags )

flags
Type: String
An optional list of space-separated flags that change how the callback list behaves.
Possible flags:
once: Ensures the callback list can only be fired once ( like a Deferred).
memory: Keeps track of previous values and will call any callback added after the list has been fired right away with the latest "memorized" values (like a Deferred).
unique: Ensures a callback can only be added once (so there are no duplicates in the list).
stopOnFalse: Interrupts callings when a callback returns false.
By default a callback list will act like an event callback list and can be "fired" multiple times.

Two specific methods were being used above: .add() and .fire(). The .add() method supports adding new callbacks to the callback list, while the .fire() method executes the added functions and provides a way to pass arguments to be processed by the callbacks in the same list.

Use Callbacks to implement publish-subscribe mode pub/sub: (official document)

Copy code The code is as follows:

var topics = {};

        jQuery.Topic = function ( id )
        {
            var callbacks,
                method,
                topic = id && topics[id];

            if ( !topic )
            {
                callbacks = jQuery.Callbacks();
                topic = {
                    publish: callbacks.fire,
                    subscribe: callbacks.add,
                    unsubscribe: callbacks.remove
                };
                if ( id )
                {
                    topics[id] = topic;
                }
            }
            return topic;
        };

使用

复制代码代码如下:

$.Topic( 'mailArrived' ).subscribe( function ( e )
        {
            console.log( 'Your have new email! ' );
            console.log( "mail title : " e.title );
            console.log( "mail content : " e.content );
        }
        );

$.Topic( 'mailArrived' ).publish( { title: 'mail title', content: 'mail content' } );

实现了其余的全部功能：callbacks.disable , callbacks.disabled, callbacks.fired,callbacks.fireWith, callbacks.lock, callbacks.locked ,然后重构了下代码结构，将实现放入了匿名函数内，然后通过工厂方法 window.callbacks 返回实例，以免每次使用必须 new .

具体代码如下，有兴趣和时间的可以对照jQuery版本的Callbacks对比下：

复制代码代码如下:

( function ( window, undefined )
{
// Simulate jQuery.Callbacks object
function Callbacks( options )
{
var ops = { once: false, memory: false, unique: false, stopOnFalse: false },
ar = [],
lastArgs = null,
firedTimes = 0,
_disabled = false,
_locked = false;

if ( typeof options === 'string' && options.trim() !== '' )
{
var opsArray = options.split( /\s+/ );
for ( var i = 0; i < options.length; i++ )
{
if ( opsArray[i] === 'once' )
ops.once = true;
else if ( opsArray[i] === 'memory' )
ops.memory = true;
else if ( opsArray[i] === 'unique' )
ops.unique = true;
else if ( opsArray[i] === 'stopOnFalse' )
ops.stopOnFalse = true;
}
}

function hasName( name )
{
var h = false;

if ( typeof name === 'string'
&& name !== null
&& name.trim() !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === name )
{
h = true;
break;
}
}
}

return h;
}

ar.push( fn );

if ( ops.memory )
{
// after added , call it immediately
fn.call( this, lastArgs );
}
}

return this;
};

// remove all functions
this.empty = function ()
{
ar.length = 0;
return this;
};

// check whether it includes a specific function
this.has = function ( fn )
{
var f = false;

if ( typeof ( fn ) === 'function'
&& fn.name !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === fn.name )
{
f = true;
break;
}
}
}

return f;
};

this.disable = function ()
{
_disabled = true;
return this;
};

this.disabled = function ()
{
return _disabled;
};

this.fired = function ()
{
return firedTimes > 0;
};

                function _fire( context, args )
                {
                    if ( _disabled || ops.once && firedTimes > 0 || _locked )
                    {
                        return;
                    }

                    if ( ar.length > 0 )
                    {
                        var r;

                        for ( var i = 0; i < ar.length; i++ )
                        {
                            r = ar[i].call( context, args );

                            if ( ops.stopOnFalse && r === false )
                            {
                                break;
                            }
                        }
                    }

firedTimes++;

                    if ( ops.memory )
                    {
                        lastArgs = args;
                    }

};

                this.fireWith = function ( context, args )
                {
                    context = context || this;
                    _fire( context, args );
                    return this;
                };

                this.fire = function ( args )
                {
                    _fire( this, args );
                    return this;
                };

                this.lock = function ()
                {
                    _locked = true;
                    return this;
                };

                this.locked = function ()
                {
                    return _locked;
                };

};

            // exposed to global as a factory method
            window.callbacks = function ( options )
            {
                return new Callbacks( options );
            };

} )( window );

Detailed explanation of the complete functional code of jQuery Callbacks by yourself_jquery