今天讲一个jQuery封装好的方法:$.Callbacks。这个东西有什么用呢?这个东西其实没有什么具体的效果,而更像是一个现成的工具,一个快速使用观察者模式的一个工具。

    观察者一般具有订阅,删除,发布等功能,而这些正好都是$.Callbacks具备的,而且有更多的配置,这样就省得每次我们想用观察者的时候自己再去实现一遍了,直接用$.Callbacks就好了。今天我们就来看看这个是怎么玩的。

    常用功能

    最常用的估计就是add,remove,fire了,这个也是观察者最常用的三个方法,先来一个最简单的demo看一下如何使用:

    1. var f1=function(value){
    2.     console.log('this is f1:'+value);
    3. }
    4. var f2=function(value){
    5.     console.log('this is f2:'+value);
    6. }
    7. var callback=$.Callbacks();
    8. callback.add(f1);
    9. callback.add(f2);
    10. callback.fire('AA');
    11. /*
    12. this is f1:AA
    13. this is f2:AA
    14. */

    上面就是最简单的使用方法,$.Callbacks内部维护了一个数组,通过add方法往数组加内容,通过fire方法执行数组内的方法,让数组内的每个方法执行。

    不过在$.Callbacks里面不是每次都会执行数组内的所有方法的,而是有四种不同的方式,once,unique,memory,stopOnFalse。

    once

    这个简单,就是永远只会执行一个fire,其他的fire不再执行了。

    1. var f1=function(value){
    2.     console.log('this is f1:'+value);
    3. }
    4. var f2=function(value){
    5.     console.log('this is f2:'+value);
    6. }
    7. var callback=$.Callbacks('once');
    8. callback.add(f1);
    9. callback.fire('AA');
    10. callback.add(f2);
    11. callback.fire('BB');
    12. /*
    13. this is f1:AA
    14. */

       

    注意:第一次fire会执行在数组内的方法,但是假如你延迟加入了一个方法,那么fire是不会执行它的,因为这个时候它还不在数组内。

    memory

    这种执行方式是比较难理解的,memory在fire的时候会看后面有没有add(下一次fire之前的add),如果有add那么一起执行(如果有remove不计算):

    1. var f1=function(value){
    2.     console.log('this is f1:'+value);
    3. }
    4. var f2=function(value){
    5.     console.log('this is f2:'+value);
    6. }
    7. var callback=$.Callbacks('memory');
    8. callback.add(f1);
    9. callback.fire('AA');
    10. callback.add(f2);
    11. callback.fire('BB');
    12. callback.remove(f2);
    13. callback.fire('CC');
    14. /*
    15. this is f1:AA
    16. this is f2:AA
    17. this is f1:BB
    18. this is f2:BB
    19. this is f1:CC
    20. */

    图示如下:    

         

    这个就是本次fire的时候,下次fire之前的add都会被执行,如果是remove不会删除,只会执行下一个fire前的add。

    unique

    这个比较好理解,就是每次fire只是执行不同的方法,相同的方法只会执行一次:

    1. var f1=function(value){
    2.     console.log('this is f1:'+value);
    3. }
    4. var f2=function(value){
    5.     console.log('this is f2:'+value);
    6. }
    7. var callback=$.Callbacks('unique');
    8. callback.add(f1);
    9. callback.fire('AA');
    10. callback.add(f1);
    11. callback.add(f2);
    12. callback.fire('BB');
    13. callback.remove(f2);
    14. callback.fire('CC');
    15. /*
    16. this is f1:AA
    17. this is f1:BB
    18. this is f2:BB
    19. this is f1:CC
    20. */

    图示如下:    

       

    stopOnFalse

    这个就是在每次fire的时候,如果一旦发现有返回false的,那么就会停止执行后面的:

    1. var f1=function(value){
    2.     console.log('this is f1:'+value);
    3.     return false;
    4. }
    5. var f2=function(value){
    6.     console.log('this is f2:'+value);
    7.     return false;
    8. }
    9. var callback=$.Callbacks('stopOnFalse');
    10. callback.add(f1);
    11. callback.fire('AA');
    12. callback.add(f2);
    13. callback.fire('BB');
    14. /*
    15. this is f1:AA
    16. this is f1:BB
    17. */

    图示如下:    

       

    这个和其他的不太一样,需要在方法内return false才能停止。

    上面的四种模式是可以混合使用的,例如$.Callback('unique memory'),这种则是两种模式的混合。

    其他方法

    上面讲解了$.Callbacks的一些主要方法和fire规则,现在看一些其他的方法:

    fireWith

    这个和fire的区别就是它可以自定义上下文,fireWith([context],[arg]),其中第一个参数为上下文,第二个参数为参数,注意参数要用括号括起来:

    1. var f1=function(value){
    2.     console.log(this.name+' 喜欢 '+value);
    3. }
    4. var obj={
    5.     name:'张三'
    6. }
    7. var callback=$.Callbacks();
    8. callback.add(f1);
    9. callback.fireWith(obj,['打篮球,踢足球,打羽毛球等']);
    10. /*
    11. 张三 喜欢 打篮球,踢足球,打羽毛球等
    12. */

    empty,lock,disable

    empty表示清空数组,lock表示锁定数组,disable表示禁用数组。第一个好理解,后两个基本上一调用数组就废了,不能再fire了。

    后两者唯一的区别就是在memory的模式下,lock后还可以执行add,但是disable后不行:

    1. var f1=function(value){
    2. console.log('this is f1:'+value);
    3. }
    4. var f2=function(value){
    5. console.log('this is f2:'+value);
    6. }
    7. var callback=$.Callbacks('memory');
    8. callback.add(f1);
    9. callback.fire('AA');
    10. callback.lock();
    11. //callback.disable();
    12. callback.add(f2);
    13. /*
    14. this is f1:AA
    15. this is f2:AA
    16. */
    回到顶部
    我要评论

    所有评论

      相关文章