Question

考虑这样的事情：

const keyAction = {
    a() {
        console.log("You've pressed 'a'");
    },
    b() {
        console.log("You've pressed 'b'");
    },
    c() {
        console.log("You've pressed 'c'");
    }
}

document.addEventListener('keydown', e => keyAction[e.key]());

这是不好的做法吗？有什么理由不这样做吗？

Answer 1

实际上这是一种流行的做法，因为有些人倾向于使用对象来模拟其他语言的名称空间。只要您了解此方法可能会设置的陷阱，我认为它没有什么坏处。例如，当您将这些函数作为参数传递时，请记住this会发生什么（请看下面的示例）：

const store = {
    a() {
        this.b();
    },
    b() {
        console.log("It works!");
    }
}

store.a();  // Logs "It works"
setTimeout(store.a, 10) // Error: this.b is not a function

此外，正如@Nick Ovchinnikov指出的那样，在您的特定示例中还存在其他陷阱。您应该确保每当按下一个按钮时，环境都不会尝试调用不存在的功能-否则您可能会遇到错误。因此，最终您的处理程序绑定应看起来像这样：

document.addEventListener('keydown', e => {
    if (typeof keyAction[e.key] === 'function') {
        keyAction[e.key]();
    }
});

Answer 2

您遇到了问题，当您按下未处理的键时，您会看到Error: keyAction[e.key] is not a function

if (typeof keyAction[e.key] === 'function') {
    return keyAction[e.key]()
}

console.log('You pressed a some button')

Javascript是动态语言，在某些情况下当然非常好。但不必滥用，因为您可能会比想象中更快地失去控制力

Answer 3

使用对象作为函数存储库不是一个坏主意。它很容易理解，易于维护并且可以快速访问（由于hashmap系统）。与if / else if / ...事物相比，它还使您能够对数据进行处理-例如，执行循环... ect

根据您要尝试执行的操作会很有帮助。

尝试避免在每次调用函数tho时重新创建对象。一次构建并重复使用。

const keyAction = {
  a: () => {
    console.log("You've pressed 'a'");
  },

  b: () => {
    console.log("You've pressed 'b'");
  },
};

function clickFunc(key) {
  keyAction[key]();
}

.ex {
  background-color: #444444;
  color: white;
  height: 5em;
  width: 5em;
  margin: 1em;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

<div class="ex" onclick="clickFunc('a')">
  A
</div>

<div class="ex" onclick="clickFunc('b')">
  B
</div>

使用javascript对象作为“函数存储库”并动态调用它们？

3 个答案: