删除“包装”事件处理程序以用于发布/订阅消息

Question

我已经使用 jQuery 事件完成了一些发布/订阅。

基本功能有效：

var publish = function(name) {                        // --- works
  var args = Array.prototype.slice.call(arguments);   // convert to array
  args = args.slice(1);                               // remove arg1 (name)
  $("html").trigger(name, args);
}

var subscribe = function(name, callback) {            // --- works
  $("html").on(name, callback);
}

var unsubscribe = function(name, callback) {          // --- works
  $("html").off(name, callback);
}

// usage:                                             // --- works
var myhandler = function () { /* ... */ };
subscribe("foo", myhandler);
publish("foo", 1, false, "bob", {a:1, b:"2"});
unsubscribe("foo", myhandler);

但是以我想要的方式订阅，却没有：

var subscribe = function(name, callback) {            // --- can't unsub this
  $("html").on(name, function () {
    var args = Array.prototype.slice.call(arguments);
    args = args.slice(1);
    callback.apply(null, args);
  });
}

我想要第二个 subscribe 函数，因为匿名回调会删除我不希望在“干净”客户端代码中出现的第一个参数（Event 对象）。我只想在回调中接收到事件数据，我不想要 Event 对象本身。

但这意味着我不能成功调用unsubscribe，因为我没有传递给off() 与传递给on() 相同的回调——这不是实际的回调，而是一个包装的匿名函数。

有没有办法解决这个问题？

Answer 1

通常的方式是使用jQuery的"namespaced" events:

$("html").on(name + ".my-pub-sub", function () {
    // ...
});

然后退订：

$("html").off(name + ".my-pub-sub");

这告诉 jQuery 删除所有具有给定事件名称和特定命名空间的处理程序。

这是一个简化的例子：

// Add two click handlers:
$("button").on("click", function() {
  $("<p>Non-namespaced click</p>").appendTo(document.body);
});
$("button").on("click.namespace", function() {
  $("<p>Namespaced click</p>").appendTo(document.body);
});

// Show they both trigger
$("<p>Clicking...</p>").appendTo(document.body);
$("button").click();

// Remove the namespaced one without a function ref
$("button").off("click.namespace");

// Now just the non-namespaced one runs
$("<p>Clicking again...</p>").appendTo(document.body);
$("button").click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>The button</button>

Answer 2

您可以像这样返回新创建的事件处理程序：

var subscribe = function(name, callback) {
  var handler = function () {
    var args = Array.prototype.slice.call(arguments);
    args = args.slice(1);
    callback.apply(null, args);
  };
  $("html").on(name, handler);
  return handler;
};

现在你可以像这样使用它了：

var myhandler = function () { console.log(arguments); };
var eventHandler = subscribe("foo", myhandler);
publish("foo", 1, false, "bob", {a:1, b:"2"}); // logs to console
unsubscribe("foo", eventHandler);
publish("foo", 1, false, "bob", {a:1, b:"2"}); // don't log anymore

这里是demo

Answer 3

我所做的是基于@TJCrowder 提出的命名空间理念。但我已将他的答案标记为谢谢。

var subscribe = function(name, callback) {

  // create a unique "key" for this specific event handler
  // - use this format: ORIGINALNAME.MILLISECONDS.RANDOMNUMBER
  // - include time in random string, as could be lots of subs happening at once
  // - then include a random number, just to be safe
  var key = name + "." + (new Date().getTime()) + (Math.random()*1000);

  $("html").on(key, function () {
    var args = Array.prototype.slice.call(arguments);
    args = args.slice(1);
    callback.apply(null, args);
  });

  return key;
}

var unsubscribe = function (key) {
  $("html").off(key);
};

// usage:
var myhandler = function () { /* ... */ };
var key = subscribe("foo", myhandler);
publish("foo", 1, false, "bob", {a:1, b:"2"});
unsubscribe(key);

由于这个键是唯一的（嗯，它应该是？！），它只会删除 这个特定的 处理程序。所以我可以有很多订阅者，并且只能取消订阅其中一个。