Callbacks完整意义代码详解

作者: 关于计算机  发布:2019-09-13

用法和$.Callbacks完全一致 , 可是只是完毕了add , remove , fire , empty, has和带参数的构造函数成效,  $.Callbacks 还应该有disable,disabled, fireWith , fired , lock, locked 方法

 代码如下:

 

复制代码 代码如下:

 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 . 测试add & fire

var cb=new MyCallbacks();

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.fire('hello')

输出:

fn1 hello
fn2 hello
fn3 hello

2.测试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')
输出:

fn1 hello
fn2 hello

fn3 hello

fn1 hello
fn2 hello

2.测试has
var cb=new MyCallbacks();

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.has(fn1) 

cb.has(fn3) 

输出:

false


true

3.测量检验带参数的布局函数 : once

var cb=new MyCallbacks('once')

cb.add(fn1)

cb.fire('hello')

cb.fire('hello')

cb.add(fn2)

cb.fire('hello')

输出:

hello




4.测量试验带参数的协会函数 : memory

 var cb=new MyCallbacks('memory')

cb.add(fn1)

cb.fire('hello') // 输出 : fn1 hello

cb.add(fn2) // 输出 : fn2 hello

cb.fire('hello')

 输出 :

 fn1 hello

 fn2 hello

5.测量试验带参数的结构函数 : stopOnFalse

var cb=new MyCallbacks('stopOnFalse')

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.fire('hello')

输出:

fn1 hello
fn2 hello
6.测量检验带参数的布局函数 :unique

var cb=new MyCallbacks('unique')

 

b.add(fn3)

b.add(fn3)

cb.fire('hello')

输出:

fn3 hello

 

7. 测验带组合参数的构造函数:多个设置参数能够Infiniti制组合,一下只测量检验全体结缘的景观, 否则要写16个测验用例 T_T

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

cb.add(fn1) // 输出: fn1

cb.add(fn2) // 输出: fn2

cb.add(fn3) //  输出: fn3

cb.fire('hello')

输出:

fn1 hello
fn2 hello
cb.fire('hello') // 输出:未有出口

 

以下是官方API 文书档案:

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.

组织函数 : 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.

动用Callbacks 实现揭橥订阅方式 pub/sub: (官方文书档案)

复制代码 代码如下:

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;
                }

                // 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;
                };

                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 );

你只怕感兴趣的稿子:

  • jQuery源码深入分析之Callbacks详解
  • jQuery.Callbacks()回调函数队列用法详解
  • jQuery回调函数的定义及用法实例
  • 运用jQuery中的when完结多个AJAX央求对应单个回调的例证分享
  • jQuery Tips 为AJAX回调函数字传送递额外参数的法子
  • Jquery版本导致Ajax不试行success回调函数
  • jQuery AJAX回调函数this指向难点
  • Jquery Post管理后不步向回调的由来及消除方法
  • 从零学jquery之如何行使回调函数
  • jquery.Callbacks的完结详解

本文由今晚开什么码发布于关于计算机,转载请注明出处:Callbacks完整意义代码详解

关键词:

上一篇:JavaScript中的分号插入机制详细介绍
下一篇:没有了