javascript - Backbone.js 中的自定义事件调度

Question

我想编写一个简单的 JavaScript 动画，让一些球在 Canvas 内移动。我想检测与使用 Backbone.js 处理的自定义事件的碰撞，而不是使用嵌套的 for 循环来检查每对球之间的碰撞。

var j;
for (j = 0; j < N_BALLS; j++) {
    ball_center = new Point(..., ...);
    ball_shape = new Circle(ball_center, ball_radius);
    ball_velocity = ...;
    ball_ID = j;
    balls[j] = new Ball(ball_shape, ball_velocity, ball_ID);
    _.extend(balls[j], Backbone.Events);
    balls[j].on("imhere", balls[j].event_handler);
}

function animate() {
    if (!paused) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        var j;
        for (j = 0; j < N_BALLS; j++){
            balls[j].updatePosition();
            balls[j].trigger("imhere", balls[j].shape, balls[j].ID);
        }
        for (j = 0; j < N_BALLS; j++)
           balls[j].draw(context, '#0000ff');
        window.requestNextAnimationFrame(animate);
    }
}

event_handler是每个Ball对象的成员方法

Ball.prototype.event_handler = function(shape, ID) {
    console.log("ball " + this.ID + " caught message from ball " + ID);
};

我预计有时一个球会从另一个球接收到一条消息，但事实并非如此。

我想以事件处理程序可以的方式安排事情:

• 当 this.ID == ID 时转发事件
• 如果 this.ID != ID 停止事件传播

Answer 1

Backbone 事件

this.ID 可能未定义，因为 Backbone .on() needs the context as the last param除非您已经手动将上下文绑定(bind)到其他地方的函数。

---

您还在 Ball 本身上注册事件，并在 ball 上触发。

Backbone 中的事件不是全局的，您需要自己创建一个全局事件 channel 或使用插件。寻找事件总线，或事件聚合器等。

一个简单的例子可以很简单:

var GlobalEvents = _.extend({}, Backbone.Events);

Backbone 本身是一个扩展 Backbone.Events 功能的对象，但最好为您的用例创建一个本地事件 channel 。

---

说到使用 Backbone.Events 对象，当您真正应该扩展 Ball 时，您正在扩展 Ball 的每个实例原型(prototype)一次。

_.extend(Ball.prototype, Backbone.Events);

---

你应该 favor listenTo over on .

销毁球时，您可以调用 ball.stopListening() 来避免内存泄漏。它还可以解决 context event_handler 回调中的问题。

因此，使用全局事件聚合器:

balls[j].listenTo(GlobalEvents, "imhere", balls[j].event_handler);

---

主干事件不是 DOM 事件，它们不会上下冒泡，因此没有 stopPropagation 或 preventDefault。在后台，它只是 Backbone 的普通 JS。

---

碰撞检测

既然我们已经介绍了事件部分，我只想说这不是碰撞检测的最佳解决方案。

这与在更新位置时对每个其他球调用 isCollindingWith(ball) 函数完全一样。这就是事件发生的情况，但循环隐藏在事件实现中。

在此答案中处理优化的碰撞检测算法过于宽泛，因此我将链接到关于 2D collision detection 的这篇精彩文章.

有趣的部分在最后，他们谈论空间数据结构，例如四叉树、R 树或空间 HashMap 。