zoukankan      html  css  js  c++  java
  • jQuery源码笔记——回调对象

    回调对象是一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表。

    最简单的缓存对象

    function Callbacks(){
        var list = [],
        self = {
            add: function(fn){
                list.push(fn);
            },
            remove: function(fn){
                var  index;
                if((index = list.indexOf(fn)) > -1){
                    list.splice( index, 1 );
                }
            },
            fire: function(value){
                for(var i in list){
                    list[i](value);
                }
            },
        }
        return self;
    }
    var callbacks = Callbacks();
    function fn1( value ) {
        console.log( value );
    }
    callbacks.add(fn1);
    callbacks.fire( "foo!" );//foo!
    callbacks.remove(fn1);
    callbacks.fire( "foo!" );//nothing

    回调对象是为了将回调函数统一管理,如添加,删除,调用等功能。

    在jQuery当中,除了实现基本的管理,还提供了由Callbacks参数决定的回调对象的模式。这四个属性有once,memory,unique,stopOnFalse;

    once的实现

    function Callbacks( options ){
        var object = {};
        object[options] = true;
        options = object;
        var list = [],
        self = {
            add: function(fn){
                if ( list ) {
                    list.push(fn);
                }
            },
            remove: function(fn){
                if ( list ) {
                    var  index;
                    if((index = list.indexOf(fn)) > -1){
                        list.splice( index, 1 );
                    }
                }
            },
            fire: function(value){
                for(var i in list){
                    list[i](value);
                }
                //在Once模式下,当fire过一次后清空回调函数列表。
                if( options.once ){
                    list = undefined;
                }
            },
        }
        return self;
    }
    var callbacks = Callbacks( "once" );
    function fn1( value ) {
        console.log( value );
    }
    callbacks.add(fn1);
    callbacks.fire( "foo!" );//foo!
    callbacks.fire( "foo!" );//nothing

    在once模式下,fire过一次后,清空回调函数列表。

    memory实现

    function Callbacks( options ){
        var object = {};
        object[options] = true;
        options = object;
        var list = [],
        firingStart = 0,
        memory;
        self = {
            add: function(fn){
                if ( list ) {
                    list.push(fn);
                }
                //如果存在记忆的参数,则直接调用fire
                if( memory ){
                    self.fire( memory );
                }
            },
            remove: function(fn){
                if ( list ) {
                    var  index;
                    if((index = list.indexOf(fn)) > -1){
                        list.splice( index, 1 );
                    }
                }
            },
            fire: function(value){
                //保存当前长度
                var start = list.length;
                for( ; firingStart < list.length;firingStart++){
                    list[firingStart](value);
                }
                //在memory模式下,记忆参数,并修改add时调用列表的起始位置。
                if( options.memory ){
                    firingStart = start;
                    memory = value
                }
            },
        }
        return self;
    };
    function fn1( value ) {
        console.log( value );
    }
    function fn2( value ) {
        fn1("fn2 says: " + value);
        return false;
    }
    var callbacks = Callbacks( "memory" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn2 );

    在memory下,记忆上次调用的参数,和已经执行了函数的位置,当有新函数add时,直接调用。

    unique实现

    function Callbacks( options ){
        var object = {};
        object[options] = true;
        options = object;
        var list = [],
        firingStart = 0,
        memory;
        self = {
            add: function(fn){
                if ( list ) {
                    //在unique模式下,当函数已存在,则不添加。
                    if ( !options.unique || !(list.indexOf(fn) > -1))
                        list.push(fn);
                }
            },
            remove: function(fn){
                if ( list ) {
                    var  index;
                    if((index = list.indexOf(fn)) > -1){
                        list.splice( index, 1 );
                    }
                }
            },
            fire: function(value){
                for( ; firingStart < list.length;firingStart++){
                    list[firingStart](value);
                }
            },
        }
        return self;
    };
    function fn1( value ) {
        console.log( value );
    }
    var callbacks = Callbacks( "unique" );
    callbacks.add( fn1 ); 
    callbacks.add( fn1 );
    callbacks.fire( "bar" );//bar

    主要针对add函数的判断

    stopOnFalse的实现

    function Callbacks( options ){
        var object = {};
        object[options] = true;
        options = object;
        var list = [],
        firingStart = 0,
        memory;
        self = {
            add: function(fn){
                if ( list ) {
                    list.push(fn);
                }
            },
            remove: function(fn){
                if ( list ) {
                    var  index;
                    if((index = list.indexOf(fn)) > -1){
                        list.splice( index, 1 );
                    }
                }
            },
            fire: function(value){
                for( ; firingStart < list.length;firingStart++){
                    if( !list[firingStart](value) )
                        break;
                }
            },
        }
        return self;
    };
    function fn1( value ) {
        console.log( value );
        return false;
    }
    function fn2( value ){
        fn1( "fn2 says: " + value );
        return false;
    }
    var callbacks = Callbacks( );
    callbacks.add( fn1 ); 
    callbacks.add( fn2 );
    callbacks.fire( "bar" );

    每次fire判断是否返回的是false,是则停止继续调用。

     

  • 相关阅读:
    iOS 从0到1搭建高可用App框架
    ios 判断用户是否开启权限---并跳转设置
    用PHP做服务器接口客户端用http协议POST访问安全性一般怎么做
    示例浅谈PHP与手机APP开发,即API接口开发
    iOS百度地图简单使用详解
    UICollectionViewCell「居左显示」
    IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息
    iOS开发融云即时通讯集成详细步骤
    iOS
    修改hosts文件
  • 原文地址:https://www.cnblogs.com/winderby/p/4103053.html
Copyright © 2011-2022 走看看