如何在不使用全局变量的情况下从回调中获取数据？

Question

我在下面创建了我的代码的简化版本。

var translation = 0;

function main() {
    // load images

    loopClosure(images);
}

function loopClosure(images) {
    // setup webgl

    function render() {
        window.requestAnimationFrame(render);

        // use translation here to update image locations
    }

    render();
}

document.addEventListener('keydown', keyboardHandler, false);

function keyboardHandler(event) {
    if (event.key == 'ArrowLeft') {
        translation--;
    }
    if (event.key == 'ArrowRight') {
        translation++;
    }
}

如何去掉翻译全局变量？有没有一种方法可以在不使用全局变量的情况下根据事件更新变量？

Answer 1

我的英语说得不是很好，但我会努力的。

var translation 是个好地方，如果你想让这个变量不能从外部访问的话。您可以为创建范围创建 IIFE。

(function () { 
    var translation = 0;

    function main() {
        // load images

        loopClosure(images);
    }

    function loopClosure(images) {
        // setup webgl

        function render() {
            window.requestAnimationFrame(render);

            // use translation here to update image locations
        }

        render();
    }

    document.addEventListener('keydown', keyboardHandler, false);

    function keyboardHandler(event) {
        if (event.key == 'ArrowLeft') {
            translation--;
        }
        if (event.key == 'ArrowRight') {
            translation++;
        }
    }
})();

Answer 2

正如 Nik020 指出的那样，您可以使用闭包。立即调用函数表达式 (IIFE) 创建一个闭包，但它不一定是 IIFE 模式。一个普通的命名函数会做同样的事情

function main() { 
    var translation = 0;

    function main() {
        // load images

        loopClosure(images);
    }

    function loopClosure(images) {
        // setup webgl

        function render() {
            window.requestAnimationFrame(render);

            // use translation here to update image locations
        }

        render();
    }

    document.addEventListener('keydown', keyboardHandler, false);

    function keyboardHandler(event) {
        if (event.key == 'ArrowLeft') {
            translation--;
        }
        if (event.key == 'ArrowRight') {
            translation++;
        }
    }
}

main();

IIFE 模式只是意味着你不必想一个名字，这个名字不会与其他名字冲突。

你也可以绑定this。例子

class App {
  constructor() {
    this.translation = 0;
    document.addEventListener('keydown', this.keyboardHandler.bind(this), false);
  }
  keyboardHandler(event) {
    if (event.key == 'ArrowLeft') {
        this.translation--;
    }
    if (event.key == 'ArrowRight') {
        this.translation++;
    }
  }
}

const app = new App();

您使用箭头函数，它们是用于绑定的语法糖 this

class App {
  constructor() {
    this.translation = 0;
    document.addEventListener('keydown', (event) => {
      if (event.key == 'ArrowLeft') {
          this.translation--;
      }
      if (event.key == 'ArrowRight') {
          this.translation++;
      }
    }, false);
  }
}

const app = new App();

如果您希望能够删除侦听器并且您正在使用箭头函数或绑定，您可以将函数引用存储在变量中

class App {
  constructor() {
    this.translation = 0;
    const keyboardHandler = (event) => {
      if (event.key == 'ArrowLeft') {
          this.translation--;
      }
      if (event.key == 'ArrowRight') {
          this.translation++;
      }
    };
    document.addEventListener('keydown', keyboardHandler, false);
  }
}

const app = new App();

还有 4 到 10 种方法可以bind this and/or make a closure。

如何在不使用全局变量的情况下从回调中获取数据？

How do I get data out of a callback without using a global variable?

javascript

closures

callback

addeventlistener