使用 google 关闭创建事件

Question

我想使用事件在谷歌闭包（GC）环境中的对象之间进行通信。

假设我有两个类 foobar.Boss 和 foobar.Employee。老板想知道员工什么时候煮了咖啡，以及咖啡是否不含咖啡因（他本周将不再喝咖啡因）。

GC 已经提供了一些类，它们似乎提供了执行此操作的方法：goog.events.Event 和 goog.events.EventTarget。

如果不知道更多，我认为它会像这样工作：

foobar.Employee.prototype.makeCoffee = function(isDecaf)
{        
    this.coffeeMaker.putCoffeeInMachine(isDecaf);
    this.coffeeMaker.start();
    var event = new goog.event.Event('COFFEE_ON', { isDecaf: isDecaf });
    goog.events.dispatchEvent(event);
}

foobar.Boss.prototype.addEmployee = function(employee)
{
    ...
    goog.events.listen(employee, 'COFFEE_ON', function(e)
    {
        if (e.target.isDecaf)
        {
            this.refillMug();
        }
    }, false, this);
    ...
}

这是正确的模式吗？我对 goog.events.EventTarget 类感到困惑——目标如何调度事件？难道目标没有发生什么事情吗？

这个问题很有帮助，但答案更直接将不胜感激。

Answer 1

经过一段时间的研究，我现在的理解是，EventTarget 实际上扮演着双重角色，既是调度事件的实体，也是被监听的实体。因此，一种选择是让 Employee 继承 goog.events.EventTarget 但我走了一条不同的路线。

首先，我创建了一个新的事件类型，让老板知道咖啡是否不含咖啡因。

/**
 * @constructor
 * @extends {goog.events.Event}
 */
foobar.CoffeeEvent = function(isDecaf)
{
  goog.events.Event.call(this, 'COFFEE_ON');
  this.isDecaf = isDecaf;
};
goog.inherits(foobar.CoffeeEvent, goog.events.Event);

接下来，我创建了一个事件侦听器类型来调度这些事件。

/**
 * @constructor
 * @extends {goog.events.EventTarget} 
 */
foobar.CoffeeEventTarget = function()
{
  goog.events.EventTarget.call(this);
};
goog.inherits(foobar.CoffeeEventTarget, goog.events.EventTarget);

我将这种类型的对象添加到我的 Employee 中。

foobar.Employee = function()
{
  ...
  this.coffeeEvents = new foobar.CoffeeEventTarget();
  ...
}

当员工重新倒咖啡时：

foobar.Employee.prototype.makeCoffee = function(isDecaf)
{        
    this.coffeeMaker.putCoffeeInMachine(isDecaf);
    this.coffeeMaker.start();
    var event = new foobar.CoffeeEvent(isDecaf);
    this.coffeeEvents.dispatchEvent(event);
}

博斯曼先生会倾听。

foobar.Boss.prototype.addEmployee = function(employee)
{
    ...
    goog.events.listen(employee.coffeeEvents, 'COFFEE_ON', function(e)
    {
        if (e.isDecaf)
        {
            this.refillMug();
        }
    }, false, this);
    ...
}

请注意，这不会告诉我哪个员工重新倒了咖啡，因为事件目标将是 CoffeeEventTarget 的实例。如果您想要其中的所有Employee，我想您可以将其添加为成员字段。如果您同意从 goog.events.EventTarget 继承 Employee，那么您可以免费获得 Employee 作为目标。

Answer 2

我对 EventTarget 的看法是这样的：

按钮是一个目标，您可以注册该目标，以便在发生点击事件时收到有关其点击事件的通知。因此，单击的“目标”是按钮（您瞄准按钮，然后单击它）。但是，当按钮被单击时，并不是鼠标告诉每个人该按钮已被单击 - 按钮本身会发送该消息。

触及@ben-flynn提出的关于为什么有人需要/想要子类化EventTarget的问题：

如果你想监听按键按下事件，你可能会关心关于按下了什么键。您知道按下了什么键的方法是查找由 KeyDownEventTarget 调度的事件对象上的 keyCode 字段。另一方面，ButtonEventTarget 调度不同的事件对象，即 ClickEvent，其中没有 keyCode 字段。总而言之，您将 EventTarget 子类化的原因是，无论谁正在侦听将由该目标分派的事件，都知道触发事件时将分派哪个事件对象。

Answer 3

我会这样做...

让我们设置一个咖啡类型。如果我们要更进一步，我们可以有一个基本的 Coffee 类，然后用 DecafCoffee 类对其进行子类化。但让事情变得简单。

foobar.Coffee.js

/**
 * @fileoverview Coffee class
 */

goog.provide('foobar.Coffee');

/**
 * @constructor
 */
foobar.Coffee = function(){
   //...
};

我们的 Employee 类必须实现 goog.events.EventTarget 才能分派事件。您一定不要忘记使用 goog.base 或 goog.events.EventTarget.call 调用父构造函数，因为这将设置类所需的内部变量。

foobar.Employee.js

/**
 * @fileoverview Implements the Employee class
 */

goog.provide('foobar.Employee');
goog.require('goog.events.EventTarget');
goog.require('foobar.Coffee');

/**
 * @constructor
 */
foobar.Employee = function(){
    // Calls the parent class (goog.events.EventTarget)
    goog.base(this);
};
goog.inherits(foobar.Employee, goog.events.EventTarget);

/**
 * Make a coffee
 */
foobar.Employee.prototype.makeCoffee = function(){
    // Determine what coffee type to make ...
    // Create the coffee
    var coffee = new foobar.Coffee();
    this.dispatchEvent({
        type: "decaf_coffee",
        target: coffee
    });
};

boss 类不需要做任何特殊的事情，因为它不会调度事件。它只需要一个我们可以调用的#drinkCoffee() 方法。

foobar.Boss.js

/**
 * @fileoverview Implements the Boss class
 */

goog.provide('foobar.Boss');

/**
 * @constructor
 */
foobar.Boss = function(){
   //...
};

/**
 * Make this boss drink coffee
 * @param {foobar.Coffee} coffee The coffee to drink
 */
foobar.Boss.prototype.drinkCoffee = function(coffee){
    //....
};

这是您将运行的主要 JavaScript 代码，您可以将其放置在任何您喜欢的位置，例如内联在浏览器中或其自己的脚本中。

ma​​in.js

goog.require('foobar.Boss');
goog.require('foobar.Employee');
goog.require('goog.events');

// Jane is the boss of Sam, but we will use lower case as I typically 
// only capitalise the first letter to indicate a constructor.
var jane = new Boss();
var sam = new Employee();

// Set up event listening
goog.events.listen(sam, "decaf_coffee", function(e){
    var coffee = e.target;
    // We've got the decaf coffee Sam made, now Jane can enjoy drinking it
    jane.drinkCoffee(coffee);
}, false, this);

// Tell Sam to make a coffee
sam.makeCoffee();