萧井陌直播代码第一集 注册事件代码的不理解

Question

javascript 新手, 最近在看萧大直播编程, 第一集就有不明白的地方, 在萧大重构的时候, 在 GuaGame 里面对 event, setInterval 进行了一个注册事件, 我不是很懂这个注册事件的原理是怎样的, 望有看过直播的人能解答一下:

没重构之前的代码大概是这样的:

window.addEventListener('keyup', function() {
    var k = event.key
    if (k == 'a') {
        leftDown = false
    }
    else if (k == 'd') {
        rightDown = false
    }
})

setInterval(function() {
    // update x
    if (leftDown) {
        x -= speed
    }
    else if (rightDown) {
        x += speed
    }
    // draw
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.drawImage(img, x, y)
}, 1000/30)

我的理解是:
对 KeyboardEvent 进行监听, 如果是按下对应的键(比如'a')就执行 setInterval函数来移动 paddle

重构以后这部分代码变成了这样:

var g = {
        actions: {},
        keydowns: {},
    }
    window.addEventListener('keydown', function(event){
        g.keydowns[event.key] = true
    })
    window.addEventListener('keyup', function(event){
        g.keydowns[event.key] = false
    })
    // 注册事件
    g.registerAction = function(key, callback) {
        g.actions[key] = callback
    }
    // timer
    setInterval(function() {
        // events
        var actions = Object.keys(g.actions)
        for (var i = 0; i < actions.length; i++) {
            var key = actions[i]
            if (g.keydowns[key]) {
                // 如果案件被按下, 调用注册的 actions
                g.actions[key]()
            }
        }
        // update
        g.update()
        context.clearRect(0, 0, g.canvas.width, g.canvas.height)
        // draw
        g.draw()
    }, 1000/30)

不是很理解这个 actions 和 keydowns两个对象到底是储存了什么, 这段注册事件到底是怎么一个原理.

若有人能解答, 不胜感激, 谢谢

Answer 1

我没有看过直播，但是这个例子我想应该是这样理解：
最初的代码里面，很多硬编码，主要时那两段if-else，如果要加入其他按键，比如c键、d键，会很麻烦
重构之后g.keydowns保存所有预定义的按键的状态，g.actions里面保存按键上绑定的函数，然后在下面的setInterval中接收按键的状态，然后调用绑定的函数，这样一来，以后要加入新的按键和函数就会很容易，只要对外开放一个注册接口，然后在外面注册就行了。
这是一个比较经典的重构的例子，martin fowler的书里面讲过

Answer 2

采用这样的机制主要是为了方便定义不同的键值进行特殊功能绑定时减少硬编码，需要注意的是并不是 在一定的条件下 才执行 setInterval，而是 setInterval其实一直在监听，只是大多数时候是空转，只有在有行为被标记为可执行时才真实执行。