閱讀(2.4k) 書簽贊(0) 我要糾錯

jQuery.Callbacks()方法

2018-11-22 13:01 更新

jQuery.Callbacks()方法

實例

向 $.Callbacks 的列表添加回調函數(shù)

$(function () {
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
        fn1("fn2 says: " + value);
        return false;
    }
    var callbacks = $.Callbacks();
    callbacks.add( fn1 );
    // 輸出: foo!
    callbacks.fire( "foo!" );
    callbacks.add( fn2 );
    // 輸出: bar!, fn2 says: bar!
    callbacks.fire( "bar!" );
})

嘗試一下 ?

定義和用法

$.Callbacks() 指一個多用途的回調函數(shù)列表對象，提供了一種強大的方法來管理回調函數(shù)列對。

提示： $.Callbacks 是在 jQuery 內部使用，如為 .ajax，$.Deferred 等組件提供基礎功能的函數(shù)。它也可以用在類似功能的一些組件中，如自己開發(fā)的插件。

語法

$.Callbacks( flags )

參數(shù)	描述
flags	可選。 String類型一個用空格標記分隔的可選列表,用來改變回調列表中的行為

實例

嘗試一下 ?

支持的 Flags 參數(shù)

這個 flags 參數(shù)是 $.Callbacks() 的一個可選參數(shù)，結構為一個用空格標記分隔的標志可選列表，用來改變回調列表中的行為 (比如. $.Callbacks( 'unique stopOnFalse' ))。
以下是可用的 flags:

參數(shù)	描述
once	確保這個回調列表只執(zhí)行一次
memory	緩存上一次fire時的參數(shù)值，當add()添加回調函數(shù)時，直接用上一次的參數(shù)值立刻調用新加入的回調函數(shù)
unique	確保一次只能添加一個回調，不會重復添加
stopOnFalse	某個回調函數(shù)返回false之后中斷后面的回調函數(shù)

下面是 $.Callbacks( "once" ) 的一個例子

實例

$(function () {
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
         fn1("fn2 says: " + value);
         return false;
    }
    var callbacks = $.Callbacks( "once" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    /*只輸出:foo*/
})

嘗試一下 ?

下面是 $.Callbacks( "memory" ) 的一個例子

實例

$(function () {
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
        fn1("fn2 says: " + value);
        return false;
    }
    var callbacks = $.Callbacks( "memory" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    /*輸出 :
    foo
    fn2 says:foo
    bar
    fn2 says:bar
    foobar */
})

嘗試一下 ?

下面是 $.Callbacks( "unique" ) 的一個例子

實例

$(function () {
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
        fn1("fn2 says: " + value);
        return false;
    }
    var callbacks = $.Callbacks( "unique" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn1 ); // repeat addition
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    /*輸出:
    foo
    bar
    fn2 says:bar
    foobar */
})

嘗試一下 ?

下面是 $.Callbacks( "stopOnFalse" ) 的一個例子

實例

$(function () {
    function fn1( value ) {
        alert( value );
        return false;
     }
    function fn2( value ) {
        fn1( "fn2 says: " + value );
        return false;
    }
    var callbacks = $.Callbacks( "stopOnFalse" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    /*輸出:
    foo
    bar
    foobar
    */
})

嘗試一下 ?

$.Callbacks() 支持一個列表設置多個flags（標識）而不僅僅是一個，有一個累積效應，類似"&&"。
下面是 $.Callbacks( 'unique memory' ) 的一個例子

實例

$(function () {
    function fn1( value ) {
        alert( value );
        return false;
    }

    function fn2( value ) {
        fn1( "fn2 says: " + value );
        return false;
    }
    var callbacks = $.Callbacks( "unique memory" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn1 ); // repeat addition
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.add( fn2 );
    callbacks.fire( "baz" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    /*輸出:
    foo
    fn2 says:foo
    bar
    fn2 says:bar
    baz
    fn2 says:baz
    foobar*/
})

嘗試一下 ?

$.Callbacks 方法也可以被分離, 例如：

實例

$(function () {
    function fn1( value ) {
        alert( value );
    }
    var callbacks = $.Callbacks(),
    add = callbacks.add,
    remove = callbacks.remove,
    fire = callbacks.fire;
    add( fn1 );
    fire( "hello world" );
    remove( fn1 );
    /*輸出:hello world*/
})

嘗試一下 ?

$.Callbacks, $.Deferred 和 Pub/Sub

pub / sub（觀察者模式）背后的一般思路是促進應用程序的松散耦合和高效通信。觀察家也被稱為訂閱者，它指向觀察對象。觀察者（Publisher）事件發(fā)生時通知用戶。

作為 $.Callbacks() 的創(chuàng)建組件的一個演示，只使用回調函數(shù)列表，就可以實現(xiàn) Pub/Sub 系統(tǒng)。將 $.Callbacks 作為一個文章隊列，可以向下面這樣，實現(xiàn)文章的發(fā)布和訂閱：

實例

$(function () {
    function fn1( value ) {
      alert( value );
      return false;
    }

    function fn2( value ) {
      fn1( "fn2 says: " + value );
      return false;
    }
    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( fn1 );
    $.Topic( "mailArrived" ).subscribe( fn2 );
    $.Topic( "mailSent" ).subscribe( fn1 );
    // 發(fā)布者
    $.Topic( "mailArrived" ).publish( "hello world!" );
    $.Topic( "mailSent" ).publish( "woo! mail!" );
    /*輸出:
    hello world!
    fn2 says: hello world!
    woo! mail!*/
})

嘗試一下 ?

進一步改進使用 $.Deferreds，可以保證當特定的任務被完成（或被解決）時，發(fā)布者只能向訂閱者發(fā)布通知。參見下面的示例代碼：

實例

$(function () {
    function fn1( value ) {
      alert( value );
      return false;
    }

    function fn2( value ) {
      fn1( "fn2 says: " + value );
      return false;
    }
    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;
     };
     // 訂閱 mailArrived 通知
     $.Topic( "mailArrived" ).subscribe( fn1 );
     // 創(chuàng)建一個新對象替代延遲$.Deferreds
     var dfd = $.Deferred();
     // 定義一個新的文章 (不直接發(fā)布)
     var topic = $.Topic( "mailArrived" );
     // 當延遲被受理, 發(fā)布一個通知給訂閱者
     dfd.done( topic.publish );
     /*這里將被回傳給訂閱者的消息延遲被受理，它盡可能整合了復雜的程序（例如等待一個 Ajax調用完成），所以事實上消息只發(fā)布了一次。*/
     // 完成。
     dfd.resolve( "已經(jīng)被發(fā)布!" );
})

嘗試一下 ?

jQuery 雜項方法

以上內容是否對您有幫助：

寫筆記

我要補充

jQuery.Callbacks()方法

jQuery.Callbacks()方法

實例

定義和用法

語法

更多實例

實例

支持的 Flags 參數(shù)

實例

實例

實例

實例

實例

實例

$.Callbacks, $.Deferred 和 Pub/Sub

實例

實例

推薦文章

推薦教程

推薦課程