首页 / 脚本样式 / JavaScript / 自己动手实现jQuery Callbacks完整功能代码详解

用法和$.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. 测试带组合参数的构造函数：四个设置参数可以随意组合，一下只测试全部组合的情况， 不然要写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 ）;