Question

我正在读一本关于向HTML元素添加事件监听器的书，我注意到所有的var都被称为formElement，然后下一个也是表单元素。您是否可以每次使用相同的变量，或者每次都使用不同的变量名称。 document-getElementById（“textBox”）将HTML元素的值分配给变量，然后将addEventListener分配给keyup事件。

问题：每个addEventListner（）是否应使用不同的变量？

从我看到你可以一遍又一遍地使用相同的变量并将keylistener（...）附加到新的addEventListener（...）

代码：

    var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d"); 

var formElement = document.getElementById("textBox");
formElement.addEventListener('keyup', textBoxChanged, false);   

var f = document.getElementById("fillOrStroke");
f.addEventListener('change', fillOrStrokeChanged, false);   

formElement = document.getElementById("textSize");
formElement.addEventListener('change', textSizeChanged, false); 

formElement = document.getElementById("textFillColor");
formElement.addEventListener('change', textFillColorChanged, false);

Answer 1

像软件工程中的所有东西一样，它确实取决于。在这段代码的字面编写方式中，我甚至不会使用变量，因为它们每次使用一次。我会做类似的事情：

document.getElementById("canvasOne").theCanvas.getContext("2d");
document.getElementById("textBox").addEventListener('keyup', textBoxChanged, false);
document.getElementById("fillOrStroke").addEventListener('change', fillOrStrokeChanged, false);
document.getElementById("textSize").addEventListener('change', textSizeChanged, false);
document.getElementById("textFillColor").addEventListener('change', textFillColorChanged, false);

当然，这假设每个变量都使用一次。这实际上是所有个人意见，但我不喜欢使用仅使用一次的变量来混淆代码，尤其是当每个变量用于模式时。如上所述（当然，我认为）这种模式变得更具可读性。

但是，我也不喜欢为不同目的回收变量。如果我需要多次引用一个变量，比如做空检查：

var canvas = document.getElementById('canvasOne');
var context;

if (canvas != null) {
    context = canvas.getContext('2d');
}

然后我会为所有内容使用一个单独的变量，以便清楚哪些对象在什么时间存在，以及它们在哪些时候引用它们。

是否应为每个addEventListener使用一个新变量？

1 个答案: