我什么时候会使用JQuery.Callbacks？

Question

我正在查看添加到jQuery 1.7的新内容,我看到他们现在有jQuery.Callbacks()http://api.jquery.com/jQuery.Callbacks/.

该文档向您展示了如何使用jQuery.callbacks(),但没有任何适用于我何时想要使用它们的示例.

看起来你可以在回调列表中添加/删除回调,你可以执行jQuery.callbacks().fire(args),但这只会触发该列表中的所有回调.也许我错过了一些东西,但这似乎没有用.

在我第一次看到这个新功能时,我认为你可以将它与键/值对一起使用.然后,这将提供一种在应用程序的单个位置管理回调函数的简单方法.就像是

$.callbacks.add("foo", myFunction);

然后例如,如果我想在函数结束时调用该回调,我可以做类似的事情

$.callbacks().fire("foo", args);

但是,它看起来不像你可以触发特定的回调,你只能使用给定的参数或它们都不会触发所有这些回调.

我看到的最接近的事情就是能够给.fire()函数一个上下文来设置"this"属性

.fireWith(context, args)

但这也没有多大帮助.

1. 我误解了文档吗？

2. 如果这是所需的功能,那么有用的示例是什么.

Answer 1

要扩展@Rockets,请回答一下并澄清一些困惑:

人们可能需要使用jQuery的原因$.Callbacks是多方面的:

1. 用户在一个函数中有很多代码,并希望将其拆分

2. 他们获取该信息并通过jQuery回调函数发送,然后允许他们将代码拆分为更易于管理的部分.
   所以(例如)如果你看看@Rocket的代码:

   var clickCallbacks = $.Callbacks();
   
   clickCallbacks.add(function() { //one one function piece
       //parse and do something on the scope of `this`
       var c = parseInt(this.text(), 10);
       this.text(c + 1);
   });
   clickCallbacks.add(function(id) { //add a second non-related function piece
       //do something with the arguments that were passed
       $('span', '#last').text(id);
   });
   
   $('.click').click(function() {
       var $ele = $(this).next('div').find('[id^="clickCount"]');
       clickCallbacks.fireWith($ele, [this.id]); //do two separate but related things.
   });
   

3. 您现在可以拥有的是多个回调批次的功能,您可以在需要时调用它们,而无需在整个代码中进行如此多的更改.

Answer 2

当您使用相同的方法更新不同的DOM元素时,我可以看到回调很有用.

这是一个俗气的例子:http://jsfiddle.net/UX5Ln/

var clickCallbacks = $.Callbacks();

clickCallbacks.add(function() {
    var c = parseInt(this.text(), 10);
    this.text(c + 1);
});
clickCallbacks.add(function(id) {
    $('span', '#last').text(id);
});

$('.click').click(function() {
    var $ele = $(this).next('div').find('[id^="clickCount"]');
    clickCallbacks.fireWith($ele, [this.id]);
});

当您点击某些内容时,它会更新点击计数器和"最后点击".

Answer 3

一个(几乎)开箱即用的jQuery Pub/Sub系统

这是恕我直言最有趣的应用程序,因为它没有在答案中明确说明(虽然有些人暗示使用),我将它添加到这个相对较旧的帖子.

注意:在jQuery文档中有一个例子清楚地表明了用法,但我想这是在问题发布后添加的.

Pub/sub,也就是观察者模式,是一种促进应用程序中松散耦合和单一责任的模式.对象不是让对象直接调用其他对象的方法,而是订阅特定的任务或活动,并在发生时通知.有关使用Pub/Sub模式的好处的更详细说明,您可以检查为什么要使用Publish/Subscribe模式(在JS/jQuery中)？.

当然,这是可能的自定义事件使用trigger,.on()和.off(),但我觉得jQuery.Callbacks是很多更适合的任务,产生更清晰的代码.

以下是jQuery文档中的示例代码段:

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;
};

一个用法示例:

// Subscribers
$.Topic( "mailArrived" ).subscribe( fn1 );
$.Topic( "mailArrived" ).subscribe( fn2 );
$.Topic( "mailSent" ).subscribe( fn1 );

// Publisher
$.Topic( "mailArrived" ).publish( "hello world!" );
$.Topic( "mailSent" ).publish( "woo! mail!" );

// Here, "hello world!" gets pushed to fn1 and fn2
// when the "mailArrived" notification is published
// with "woo! mail!" also being pushed to fn1 when
// the "mailSent" notification is published.

/*
output:
hello world!
fn2 says: hello world!
woo! mail!
*/