自己动手实现 jQuery Callbacks

最近大量的用到jQuery Callbacks 对象，jQuery库中的$.ajax()和$.Deferred() 对象也是基于这个对象实现，中午不困， 利用这点时间片自己动手模拟实现了这个对象的部分功能（没有100%完全测试）， 以加深理解：

用法和$.Callbacks完全一致 ， 但是只是实现了add , remove , fire , empty, has和带参数的构造函数功能，  $.Callbacks 还有disable,disabled, fireWith , fired , lock, locked 方法

 代码如下： 

  1  String.prototype.trim = function ()

  2         {

  3             return this.replace( /^\s+|\s+$/g, '' );

  4         };

  5 

  6         // Simulate jQuery.Callbacks object

  7         function MyCallbacks( options )

  8         {

  9             var ops = { once: false, memory: false, unique: false, stopOnFalse: false };

 10 

 11             if ( typeof options === 'string' && options.trim() !== '' )

 12             {

 13                 var opsArray = options.split( /\s+/ );

 14                 for ( var i = 0; i < options.length; i++ )

 15                 {

 16                     if ( opsArray[i] === 'once' )

 17                         ops.once = true;

 18                     else if ( opsArray[i] === 'memory' )

 19                         ops.memory = true;

 20                     else if ( opsArray[i] === 'unique' )

 21                         ops.unique = true;

 22                     else if ( opsArray[i] === 'stopOnFalse' )

 23                         ops.stopOnFalse = true;

 24                 }

 25             }

 26 

 27             var ar = [];

 28             var lastArgs = null;

 29             var firedTimes = 0;

 30 

 31             function hasName( name )

 32             {

 33                 var h = false;

 34 

 35                 if ( typeof name === 'string'

 36                     && name !== null

 37                     && name.trim() !== ''

 38                     && ar.length > 0 )

 39                 {

 40                     for ( var i = 0; i < ar.length; i++ )

 41                     {

 42                         if ( ar[i].name === name )

 43                         {

 44                             h = true;

 45                             break;

 46                         }

 47                     }

 48                 }

 49 

 50                 return h;

 51             }

 52 

 53             // add a function

 54             this.add = function ( fn )

 55             {

 56                 if ( typeof fn === 'function' )

 57                 {

 58                     if ( ops.unique )

 59                     {

 60                         // check whether it had been added before

 61                         if ( fn.name !== '' && hasName( fn.name ) )

 62                         {

 63                             return this;

 64                         }

 65                     }

 66 

 67                     ar.push( fn );

 68 

 69                     if ( ops.memory )

 70                     {

 71                         // after added , call it immediately

 72                         fn.call( this, lastArgs );

 73                     }

 74                 }

 75 

 76                 return this;

 77             };

 78 

 79             // remove a function

 80             this.remove = function ( fn )

 81             {

 82                 if ( typeof ( fn ) === 'function'

 83                     && fn.name !== ''

 84                     && ar.length > 0 )

 85                 {

 86                     for ( var i = 0; i < ar.length; i++ )

 87                     {

 88                         if ( ar[i].name === fn.name )

 89                         {

 90                             ar.splice( i, 1 );

 91                         }

 92                     }

 93                 }

 94 

 95                 return this;

 96             };

 97 

 98             // remove all functions 

 99             this.empty = function ()

100             {

101                 ar.length = 0;

102                 return this;

103             };

104 

105             // check whether it includes a specific function

106             this.has = function ( fn )

107             {

108                 var f = false;

109 

110                 if ( typeof ( fn ) === 'function'

111                     && fn.name !== ''

112                     && ar.length > 0 )

113                 {

114                     for ( var i = 0; i < ar.length; i++ )

115                     {

116                         if ( ar[i].name === fn.name )

117                         {

118                             f = true;

119                             break;

120                         }

121                     }

122                 }

123 

124                 return f;

125             };

126 

127             // invoke funtions it includes one by one 

128             this.fire = function ( args )

129             {

130                 if ( ops.once && firedTimes > 0 )

131                 {

132                     return this;

133                 }

134 

135                 if ( ar.length > 0 )

136                 {

137                     var r;

138 

139                     for ( var i = 0; i < ar.length; i++ )

140                     {

141                         r = ar[i].call( this, args );

142 

143                         if ( ops.stopOnFalse && r === false )

144                         {

145                             break;

146                         }

147                     }

148                 }

149 

150                 firedTimes++;

151 

152                 if ( ops.memory )

153                 {

154                     lastArgs = args;

155                 }

156 

157                 return this;

158             };

159         };

 

 测试函数如下：（注意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. 测试带组合参数的构造函数：四个设置参数可以随意组合，一下只测试全部组合的情况， 不然要写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' } );