javascript - 更好的写作方式(javascript)

Question

可能是对这里的javascript缺乏理解:

engine.keyboard = {};   // keyboard object

engine.keyboard.key = {
_pressed: {},

UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39,

isDown: function(keyCode)
{
    return this._pressed[keyCode];
},

onKeyDown: function(event)
{
    this._pressed[event.keyCode] = true;
},

onKeyUp: function(event)
{
    delete this._pressed[event.keyCode];
}

}

engine.keyboard.addListeners = function()
{
window.addEventListener('keydown', engine.keyboard.key.onKeyDown, false);
window.addEventListener('keyup', engine.keyboard.key.onKeyUp, false);
}

当我调用 engine.keyboard.key.isDown(38) 时，我收到一个错误，指出 this._pressed 未定义。

也许有更好的方法来定义所有这些？我正在开发一款非常基本的游戏，但只是尝试使用不同的方式将其全部拆分。所以目前，我有 engine、engine.keyboard、engine.camera 和 engine.map 这些都是做自己的小位。我在每一个的开头都使用了相同的 engine.EXAMPLE = {}。也许这是低效的？

干杯。

Answer 1

问题是您只将函数作为事件处理程序传递。通过这样做，它不再与 engine.keyboard.key 对象相关。

函数中的 this 指的是什么取决于它是如何被调用的。为了让 this 引用 engine.keyboard.key，必须像这样调用该函数

engine.keyboard.key.onKeyDown()

所以你需要的是:

window.addEventListener('keydown', function(event) {
    engine.keyboard.key.onKeyDown(event);
}, false);

window.addEventListener('keyup', function(event) {
    engine.keyboard.key.onKeyUp(event);
}, false);

另请注意，addEventListener 在 IE8 及以下版本中不可用。在那里你必须使用 attachEvent。

我建议阅读 excellent articles about event handling on qurirksmode.org .

---

进一步建议:

要以某种方式将函数与对象分离，您可以创建一个闭包:

engine.keyboard = {};  
engine.keyboard.key = (function() {
    var _pressed = {};

    var key = {
        UP: 38,
        DOWN: 40,
        LEFT: 37,
        RIGHT: 39,

        isDown: function(keyCode)  {
            return _pressed[keyCode];
        },

        onKeyDown: function(event) {
            _pressed[event.keyCode] = true;
        },

        onKeyUp: function(event) {
            delete _pressed[event.keyCode];
        }
    }
    return key;
}());

这里传递 engine.keyboard.key.onKeyDown 没有问题，因为函数不再依赖于 this。 _pressed 现在是函数定义范围内的一个变量，因此它们可以访问它。

这只是为了展示可以做什么。