Callbacks : 对函数的统一管理

Callbacks的options参数接受4个属性,分别是
once : 只执行一次
momery : 记忆
stopOnFalse : 强制退出循环
unique : 唯一

暂时先不管4个属性有什么意思,我们看代码开始部分对options做了处理,如果options是字符串则调用createOptions方法转成json
比如:var cb = $.Callbacks('once momery');
转换为:{once:true,momery:true}
这里就不贴createOptions的源码了,大家可以自己去看一下。

jQuery.Callbacks = function( options ) {

    // Convert options from String-formatted to Object-formatted if needed
    // (we check in cache first)
    options = typeof options === "string" ?
        ( optionsCache[ options ] || createOptions( options ) ) :
        jQuery.extend( {}, options );

处理完options后定义了一堆变量和方法:

var // Last fire value (for non-forgettable lists)
        memory,
        // Flag to know if list was already fired
        fired,
        // Flag to know if list is currently firing
        firing,
        // First callback to fire (used internally by add and fireWith)
        firingStart,
        // End of the loop when firing
        firingLength,
        // Index of currently firing callback (modified by remove if needed)
        firingIndex,
        // Actual callback list
        list = [],
        // Stack of fire calls for repeatable lists
        stack = !options.once && [],
        // Fire callbacks
        fire = function( data ) {

                    ..................
                },
                self = {
                    add: function() {

                        ..............
                    },
                    remove: function() {

                        ................

                    },
                    has: function( fn ) {

                        ..................
                    },
                    empty: function() {

                        ..................
                    },
                    disable: function() {

                        ..................
                    },
                    disabled: function() {

                        ................
                    },
                    lock: function() {

                        ..............
                    },
                    locked: function() {

                        ..............
                    },
                    fireWith: function( context, args ) {

                        ...................
                    },
                    fire: function() {

                        ................
                    },
                    fired: function() {

                        ................
                    }
                };

最后Callbacks返回了self对象,所以在self上面定义的仅供Callbacks内部使用。

内部方法中有2个比较重要,一个是list,所有add添加的函数都存放在list中,另一个是fire方法,它实现了触发list中的函数的具体逻辑。稍后我会重点讲一下它。

接下来我们分析一下self方法:

add : 添加函数
remove : 删除函数
has : 检测list中是否有相同的函数
empty : 情空list
disable : 禁止所有操作 list = stack = memory = undefined
disabled : list是否可用
lock : 锁
locked :锁是否可用
fireWith : 为触发list中的函数做预处理,最终调用fire方法
fire : 调用fireWith方法
fired : fire方法是否运行过

通过属性的名称不难发现,disabled、locked、fired这3个方法返回的是状态,代码也比较简单,不多做解释相信大家也能看懂。

disabled: function() {
    return !list;
},
locked: function() {
    return !stack;
},
fired: function() {
    return !!fired;
}

fire方法也比较简单,它调用了fireWith后返回自身,方便链式调用。

fire: function() {
    self.fireWith( this, arguments );
    return this;
},

fireWith方法也不算太复杂,它有2个参数:
context : 执行上下文
              我们看fire方法:self.fireWith( this, arguments );
              是不是就很清楚啦,context就是self对象,args就是arguments
args : arguments

然后对args做了处理。把context与args合并在一个数组中。有经验的朋友应该不难看出,这种形式的数组是给apply用的,没错,私有的fire方法中会用到它。

if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {

接着往下看,if ( list && ( !fired || stack ) )  这个判断主要是为了once也就是只fire一次。

fireWith: function( context, args ) {
    args = args || [];
    args = [ context, args.slice ? args.slice() : args ];
    if ( list && ( !fired || stack ) ) {
        if ( firing ) {
            stack.push( args );
        } else {
            fire( args );
        }
    }
    return this;
},

我对这个判断语句拆分一下,方便理解,list就不说了,主要说后面2个:
首次执行fireWith,因为fired是undefined,在这里取反所以为真,确保fire方法至少执行一次,然后在私有fire方法中赋值为true,下一次再执行到这里取反,则为假。

fire = function( data ) {
    memory = options.memory && data;
    fired = true;
    firingIndex = firingStart || 0;
    firingStart = 0;

        ......................

看到这里相信大家明白了,要实现once必须stack为假才可以。

stack = !options.once && [],

没有设置options.once,取反为真,则stack为空数组,否则stack等于false

接下去又是一个判断:
if ( firing ) {
          stack.push( args );
} else {
          fire( args );
}

firing是为了避免死循环,当循环内需要执行的函数还没走完,则stack.push( args );

firing = true;
    for ( ; list && firingIndex < firingLength; firingIndex++ ) {
        if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {
            memory = false; // To prevent further calls using add
            break;
        }
    }
firing = false;

当循环走完,检测到stack有长度则再调用fire

if ( list ) {
    if ( stack ) {
        if ( stack.length ) {
            fire( stack.shift() );
        }
    } else if ( memory ) {
        list = [];
    } else {
        self.disable();
    }
}

再看add方法,先是一个函数自执行,接收的参数是arguments,然后遍历arguments,判断如果是函数则list.push(arg),否则调用自己add(arg),由此可以看出,add方法不仅可以传一个函数,还能多个函数逗号隔开,如:cb.add(fn1,fn2);

add: function() {
    if ( list ) {
        // First, we save the current length
        var start = list.length;
        (function add( args ) {
            jQuery.each( args, function( _, arg ) {
                var type = jQuery.type( arg );
                if ( type === "function" ) {
                    if ( !options.unique || !self.has( arg ) ) {
                        list.push( arg );
                    }
                } else if ( arg && arg.length && type !== "string" ) {
                    // Inspect recursively
                    add( arg );
                }
            });
        })( arguments );
        // Do we need to add the callbacks to the
        // current firing batch?
        if ( firing ) {
            firingLength = list.length;
        // With memory, if we're not firing then
        // we should call right away
        } else if ( memory ) {
            firingStart = start;
            fire( memory );
        }
    }
    return this;
},

else if ( memory )  当有记忆功能的时候执行,firingStart = start把循环的起始值设为当前数组的长度值,然后调用fire则只会触发当前添加的函数

私有方法fire定义了索引值、起始值、长度,就开始循环,如果触发的函数返回false,并且options.stopOnFalse为true,则终止循环。

fire = function( data ) {
    memory = options.memory && data;
    fired = true;
    firingIndex = firingStart || 0;
    firingStart = 0;
    firingLength = list.length;
    firing = true;
    for ( ; list && firingIndex < firingLength; firingIndex++ ) {
        if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {
            memory = false; // To prevent further calls using add
            break;
        }
    }
    firing = false;
    if ( list ) {
        if ( stack ) {
            if ( stack.length ) {
                fire( stack.shift() );
            }
        } else if ( memory ) {
            list = [];
        } else {
            self.disable();
        }
    }
},

读了一遍源码后,我们应该对使用Callbacks非常熟悉了:

//once
var cb = $.Callbacks('once');
cb.add(function(){
    alert('a');
});
cb.add(function(){
    alert('b');
});
cb.fire();//弹出a,b
cb.fire();//不执行

//memory
var cb = $.Callbacks('memory');
cb.add(function(){
    alert('a');
});
cb.add(function(){
    alert('b');
});
cb.fire();//弹出a,b

cb.add(function(){ //弹出c
    alert('c');
});

//once memory
var cb = $.Callbacks('once memory');
cb.add(function(){
    alert('a');
});
cb.add(function(){
    alert('b');
});
cb.fire();//弹出a,b

cb.add(function(){ //弹出c
    alert('c');
});
cb.fire(); //不执行

//add方法多个参数逗号隔开
var cb = $.Callbacks();
cb.add(function(){
    alert('a');
},function(){
    alert('b');
});

cb.fire(); //弹出a,b

//stopOnFalse
var cb = $.Callbacks('stopOnFalse');
cb.add(function(){
    alert('a');
    return false;
},function(){
    alert('b');
});

cb.fire();//弹出a

//lock()
var cb = $.Callbacks('memory');
cb.add(function(){
    alert('a');
});

cb.fire();//弹出a
cb.lock();//锁住fire()

cb.add(function(){ //弹出b
    alert('b');
});
cb.fire();//不执行

//remove()
var cb = $.Callbacks();
var fn1 = function(){
    alert('a');
};
var fn2 = function(){
    alert('b');
};
cb.add(fn1);
cb.add(fn2);
cb.fire(); //弹出a,b

cb.remove(fn1,fn2);
cb.fire();//不执行

jquery的回调对象Callbacks详解的更多相关文章

  1. jQuery的deferred对象使用详解——实现ajax线性请求数据

    最近遇到一个ajax请求数据的问题 ,就是想要请求3个不同的接口,然后请求完毕后对数据进行操作,主要问题就是不知道这3个请求誰先返回来,或者是在进行操作的时候不能保证数据都已经回来,首先想到能完成的就 ...

  2. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  3. jquery $.trim()去除字符串空格详解

    jquery $.trim()去除字符串空格详解 语法 jQuery.trim()函数用于去除字符串两端的空白字符. 作用 该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止 ...

  4. 010-Scala单例对象、伴生对象实战详解

    010-Scala单例对象.伴生对象实战详解 Scala单例对象详解 函数的最后一行是返回值 子项目 Scala伴生对象代码实战 object对象的私有成员可以直接被class伴生类访问,但是不可以被 ...

  5. openerp经典收藏 对象定义详解(转载)

    对象定义详解 原文地址:http://shine-it.net/index.php/topic,2159.0.htmlhttp://blog.sina.com.cn/s/blog_57ded94e01 ...

  6. jQuery回调、递延对象总结(一)jQuery.Callbacks详解

    前言: 作为参数传递给另一个函数执行的函数我们称为回调函数,那么该回调又是否是异步的呢,何谓异步,如:作为事件处理器,或作为参数传递给 (setTimeout,setInterval)这样的异步函数, ...

  7. jQuery 2.0.3 源码分析 回调对象 - Callbacks

    源码API:http://api.jquery.com/jQuery.Callbacks/ jQuery.Callbacks()是在版本1.7中新加入的.它是一个多用途的回调函数列表对象,提供了一种强 ...

  8. jquery中的ajax方法详解

    定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...

  9. 【Jquery系列】JqGrid参数详解

    1   概述 本篇文章主要与大家分享JqGrid插件参数问题. 2   参数详解 2.1 初始化参数 2.2  ColModel参数 3   json数据 jqGrid可支持的数据类型:xml.jso ...

随机推荐

  1. Lite Your Android English

    https://litesuits.com/ 一些话   简约的背后,往往是复杂 还原面向对象应有的体验,让应对繁多业务所增加的,并未增加. 展开设计理念 Lite每个项目仅几十KB,这相当于你项目中 ...

  2. IO流知识点总结

    IO流的使用:(Input  OutPut)       输入输出流: 输入:将文件读到内存中 输出:将文件从内存输出到其他地方   IO技术的作用: 主要就是解决设备和设备之间的数据传输问题.比如: ...

  3. Missing artifact com.oracle:ojdbc14:jar:10.2.0.4.0

    下载jar,导入到maven中cmd中输入:mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=1 ...

  4. zabbix3.0安装部署文档

    zabbix v3.0安装部署 摘要: 本文的安装过程摘自http://www.ttlsa.com/以及http://b.lifec-inc.com ,和站长凉白开的<ZABBIX从入门到精通v ...

  5. 逐个访问URL的每个查询字符串参数

    下面介绍一个函数,用于处理location.search的结果,以解析查询字符串,然后返回包含所有参数的一个对象. 比如  www.baidu.com?q=javascript&num=10 ...

  6. springboot使用之二:整合mybatis(xml方式)并添加PageHelper插件

    整合mybatis实在前面项目的基础上进行的,前面项目具体整合请参照springboot使用之一. 一.整合mybatis 整合mybatis的时候可以从mybatis官网下载mybatis官网整合的 ...

  7. EF架构~linq模拟left join的两种写法,性能差之千里!

    回到目录 对于SQL左外连接我想没什么可说的,left join将左表数据都获出来,右表数据如果在左表中不存在,结果为NULL,而对于LINQ来说,要实现left join的效果,也是可以的,在进行j ...

  8. 从Nodejs脚本到vue首页看开源始末的DemoHouse

    最近上Github看见了大漠的DemoHouse项目,看到Issues说准备做一个首页,于是我的第一想法就是做一个md列表页面,md文件可以很容易的生成一个html文件.刚刚做好脚本文件,可以生成li ...

  9. [云] 1、云服务器——从ILP\DLP\TLP谈起

    1) ABOUT:ILP\DLP\TLP 1-1.ILP 大约在1985年之后的所有处理器都使用流水线来重叠指令的执行过,以提高性能.由于指令可以并行执行,所以指令之间可能实现这种重叠称为指令级并行( ...

  10. 为SM30视图分配事务代码

    Tcode:SE93