子类的事件处理 [英] Event handling with subclasses

问题描述

基于此问题。
我正在从RequireJS转到browserify（与babelify一起），并尝试将当前模块重写为类。对于我的每个RequireJS模块，我都有一个名为 eventHandler 的方法，该方法可以处理所有常规的模块特定事件。现在，当我扩展一个类时，父类将调用子类的 eventHandler 方法，该方法导致两次调用该方法。

Based on this question. I'm moving from RequireJS to browserify (together with babelify) and try to rewrite my current modules to classes. For each of my RequireJS modules I have a method called eventHandler which handles all general module specific events. Now when I extend a class, the parent class calls the subclass`s eventHandler method which leads to invoking the method twice.

不过，我当前的代码还有另一个问题。我还在几个模块上使用了两种方法来绑定和取消绑定事件。我正在使用的网站是响应式网站，在所有设备尺寸上都共享相同的JS。在某些屏幕尺寸（断点）上，我想绑定某些特定事件，而在某些其他事件上则不需要（甚至在来自另一个断点时取消绑定它们）。
因此，典型的模块或多或少看起来像这样：

There's another problem with my current code, though. I've also two methods on several modules to bind and unbind events. The site I'm working on is a responsive site which shares the same JS across all device sizes. On some screen sizes (breakpoints) I want to bind some specific events, on others I mustn't (or even unbind them when coming from another breakpoint). So a typical module would look more or less like this:

'use strict';

let specificEventsBound = false;

class Tooltip {
    constructor() {
        this.eventHandler();
    }

   eventHandler() {
        // bind general events across all breakpoints
    }

    bindSpecificEvents() {
        // bind breakpoint specific events
        specificEventsBound = true;
    }

    unbindSpecificEvents() {
        // unbind breakpoint specific events
        specificEventsBound = false;
    }

    checkBreakpoint() {
        if(someBreakpoint) {
            this.bindSpecificEvents();
        } else {
            this.unbindSpecificEvents();
        }
    } 
}

module.exports = Tooltip;

现在我扩展此类并实现 checkBreakpoint 在子类中具有不同的 someBreakpoint ， bindSpecificEvents 和 unbindSpecificEvents 仍将被调用。我认为我必须立即更改事件的处理方式。您能建议我如何正确处理这些事件吗？也许是一个单独的类，仅用于使用注册和分离方法处理事件？

When I now extend this class and implement a checkBreakpoint with a different someBreakpoint in the subclass, the bindSpecificEvents and unbindSpecificEvents will still get called when the super methods get invoked. I think I have to change how I'm handling the events right now... Could you suggest me on how to properly handle this? Perhaps a separate class just for event handling with registering and detaching methods?

推荐答案

当我现在扩展时此类，并实现一个 checkBreakpoint ，在子类中使用一个不同的someBreakpoint， bindSpecificEvents 和 unbindSpecificEvents 在调用 super 方法时仍会被调用。

When I now extend this class and implement a checkBreakpoint with a different someBreakpoint in the subclass, the bindSpecificEvents and unbindSpecificEvents will still get called when the super methods get invoked.

您在这里可能会有误解。即使在超类代码中， this.checkBreakpoint 也会在对象上查找 checkBreakpoint 属性，并在对象的紧邻位置找到它原型（子类的原型），然后调用该版本的 checkBreakpoint 。

You may have a misunderstanding here. Even in superclass code, this.checkBreakpoint will look up the checkBreakpoint property on the object, find it on the object's immediate prototype (the subclass's), and call that version of checkBreakpoint.

这是一个更简单的示例（ Babel的REPL上的实时副本 ）：

Here's a simpler example (live copy on Babel's REPL):

class Base {
  constructor() {
    this.method1();
  }
  method1() {
    this.method2();
  }
  method2() {
    console.log("Base#method2");
  }
}

class Derived extends Base {
  method2() {
    console.log("Derived#method2");
  }
}

new Derived;

输出：

Derived#method2

请注意 Base＃method1 中的呼叫方式 this.method2 调用 Derived＃method2 ，而不是 Base＃method2 。这对于多态性至关重要。

Note how the call in Base#method1 to this.method2 calls Derived#method2, not Base#method2. This is vital to polymorphism.

这篇关于子类的事件处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！