目录

回调的使用有一点像事件绑定,先绑定好,等到有点击事件或者其他时就触发。

 <script src="js/jquery-2.0.3.js"></script>
    <script>
        function aaa(){
            alert(1);
        }
        function bbb(){
            alert(2);
        }
        function ccc(){
            alert(3);
        }
        var cb=$.Callbacks();
        cb.add(aaa);
        cb.add(bbb);
        cb.add(ccc);
        cb.fire();
        //看起来有点像事件绑定,add负责添加,fire负责触发
    </script>

工作原理相当于add方法负责收集事件list,fire负责统一触发,触发时以for循环来做到。

jquery的2.0.3版本源码系列(6):2880-3042行,回调对象,对函数的统一管理

回调对象的好处是统一管理。

看一个未使用回调对象的例子:

<script src="js/jquery-2.0.3.js"></script>
    <script>
       function aaa(){
           alert(1);
       }
       (function(){
           function bbb(){
               alert(2);
           }
       })();
       aaa();//可调用
        bbb();//报错,说not defined
    </script>

那么为了能够调用匿名函数里的bbb函数,可以绑定到全局的回调对象上。

<script src="js/jquery-2.0.3.js"></script>
<script>
        var  cb=$.Callbacks();
        function aaa(){
            alert(1);
        }
        cb.add(aaa);
        (function(){
            function bbb(){
                alert(2);
            };
            cb.add(bbb);
        })();
       cb.fire();//依次弹出1和2
</script>

2.callbacks的参数说明                                                                  

1.4个选项

回调函数有once、memory、unique、stopOnFalse个选项。

once的作用是只能触发一次。

<script src="js/jquery-2.0.3.js"></script>
    <script>
        function aaa(){
            alert(1);
        }
        function bbb(){
            alert(2);
        }
        var cb=$.Callbacks('once');
        cb.add(aaa);
        cb.add(bbb);
        cb.fire();//生效
        cb.fire();//并不生效
    </script>

memory的作用是记忆功能。

<script src="js/jquery-2.0.3.js"></script>
    <script>
        function aaa(){
            alert(1);
        }
        function bbb(){
            alert(2);
        }
        var cb=$.Callbacks('memory');
        cb.add(aaa);
        cb.fire();//两个函数都生效
        cb.add(bbb);
    </script>

unique的作用是对相同的函数去重。

<script src="js/jquery-2.0.3.js"></script>
    <script>
        function aaa(){
            alert(1);
        }
        function bbb(){
            alert(2);
        }
        var cb=$.Callbacks('unique');
        cb.add(aaa);
        cb.add(aaa);
        cb.fire()//这样就只触发一次aaa
    </script>

stopOnFalse的作用是当函数返回值为false时就不再执行后续函数。

<script src="js/jquery-2.0.3.js"></script>
    <script>
        function aaa(){
            alert(1);
            return false;
        }
        function  bbb(){
            alert(2);
        }
        var cb=$.Callbacks('stopOnFalse');
        cb.add(aaa);
        cb.add(bbb);
        cb.fire()//遇到返回False,那么后续就不再执行
    </script>

另:callbacks接收多个选项的组合,比如 var cb=$.Callbacks('once unique'); 。

2.options源码

有3个部分

var optionsCache = {};

这里定义了选项缓存的空对象。

function createOptions( options ) {
    var object = optionsCache[ options ] = {};
        //定义了一个options作为属性的对象
    jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) {
        object[ flag ] = true;
    });
      //options.match( core_rnotwhite )根据空格分割字符串,并返回结果数组
    return object;
}

那么传进来的选项options进行字符串分割, var cb=$.Callbacks('once unique');  的option匹配的结果是 ['one','unique'] 。接下来在each循环里第一个选项时索引,第二个选项分别是one和unique。

所以把选项存进optionsCache并返回object。

<script>
        var optionsCache={};
        function  cache (options){
            var object = optionsCache[ options ] = {};
            object[options]=true;
            console.log(object);//{once:true}
        }
        cache('once');
    </script>
创建选项object

相关文章: