Question

我有以下代码，用于定义输入事件管理的类：鼠标，触摸，指针，......

// base.js
export default () => {
  return {
    el: undefined,
    event: undefined,
    handler(ev) {
      console.log('default handler')
    },
    attach() {
      el.addEventListener(event, this.handler.bind(this), false)
    },
    detach() {
      el.removeEventListener(event, this.handler.bind(this), false)
    }
  }
}

// mouse.js
import baseInput from './base'

export default (el) => {
  return Object.assign(Object.create(baseInput()), {
    el: undefined,
    event: 'mousedown',
    handler(ev) {
      console.log('mouse handler)
    }
  }
}

“基地”中有一些常见的商业逻辑。对象

问题来自于this.handler.bind(this)和attach函数中对detach的调用，因为每次调用返回的绑定函数都不相同，因此removeEventListener可以＆＃ 39;删除由addEventListener添加的事件监听器。

我知道我必须保留一个单一的功能参考。我的问题是该代码应该在哪里。

一种解决方案可能是：

// base.js
export default () => {

  let boundFunction;

  return {
    el: undefined,
    event: undefined,
    getBoundFunction() {
      if (!boundFunction) {
        boundFunction = this.handler.bind(this)
      }
    },
    handler(ev) {
      console.log('default handler')
    },
    attach() {
      el.addEventListener(event, this.getBoundFunction(), false)
    },
    detach() {
      el.removeEventListener(event, this.getBoundFunction(), false)
    }
  }
}

此代码有效，但我不希望针对每个触发的事件发出额外的getBoundFunction调用，我认为应该有更好的方法或最佳实践。

Answer 1

通过将handler的名称更改为handleEvent来实现事件侦听器界面。然后你直接绑定对象。

this函数中handleEvent的值将是绑定对象。

// base.js
export default () => {
  return {
    el: undefined,
    event: undefined,
    handleEvent(ev) {
      console.log('default handler')
    },
    attach() {
      el.addEventListener(event, this, false)
    },
    detach() {
      el.removeEventListener(event, this, false)
    }
  }
}

那么从基础对象继承的对象可以定义自己的handleEvent函数，当绑定事件触发时，它将被调用。

此外，您似乎正在为从其继承的每个对象创建新的基础对象。为什么不共享基础对象？这是原型继承的重点。

Object.create继承和初始化代码

1 个答案: