Question

我正在调查this awesome Three.js example并希望了解发生了什么。在初始化函数结束时，我注意到每次都有4个按钮被制作并被覆盖......起初我觉得这很奇怪它有效，因为我从未想过这样......但是我假设eventlisteners被添加到HTML元素并保持在那里，即使引用var button被覆盖了吗？

由于我还没有在其他任何地方看到过这种情况，这是一种非常小的方式 - 性能更高，因为你在这里使用的变量少了3个？只是理论上讲这里。这是一种推荐的编程方式，还是不是？

我所指的代码：

        var button = document.getElementById( 'table' );
        button.addEventListener( 'click', function ( event ) {

            transform( targets.table, 2000 );

        }, false );

        var button = document.getElementById( 'sphere' );
        button.addEventListener( 'click', function ( event ) {

            transform( targets.sphere, 2000 );

        }, false );

        var button = document.getElementById( 'helix' );
        button.addEventListener( 'click', function ( event ) {

            transform( targets.helix, 2000 );

        }, false );

        var button = document.getElementById( 'grid' );
        button.addEventListener( 'click', function ( event ) {

            transform( targets.grid, 2000 );

        }, false );

        transform( targets.table, 2000 );

Answer 1

Javascript确实variable hoisting这意味着在同一范围内重新声明变量并没有任何效果。将悬挂在function或当前范围之上只有一个声明。

    var button = document.getElementById( 'table' );
    button.addEventListener( 'click', function ( event ) {

        transform( targets.table, 2000 );

    }, false );

    var button = document.getElementById( 'sphere' );
    button.addEventListener( 'click', function ( event ) {}, false );

将被重写为：

    var button;

    button = document.getElementById( 'table' );
    button.addEventListener( 'click', function ( event ) {}, false );

    button = document.getElementById( 'sphere' );
    button.addEventListener( 'click', function ( event ) {}, false );

我假设eventlisteners被添加到HTML元素并保持不变即使引用var按钮被覆盖

这是正确的，覆盖对DOM节点的引用无论如何都不会删除DOM节点，也不会影响任何事件监听器。

因为我还没有在其他任何地方看过这个，这是非常非常的小方法 - 更高效，因为你在这里使用3个较少的变量？

我认为，3变量不足并没有提供很大的性能提升。在使用优化编译器时，重新分配相同变量的另一个不同类型的值甚至可能很昂贵。

从理论上说这里。这是推荐的方式吗？编程还是不是？

我不这么认为，最好为不同的按钮清楚地命名不同的变量名，以便代码更具可读性。

Answer 2

addEventListener独立于变量添加到元素中，在这种情况下，您将创建一个已存在的变量。不错，但在代码中声明了一个不再使用的变量。

这可以通过以下方式完成，如下所示

var button = document.getElementById('table');
button.addEventListener( 'click'...
button = document.getElementById( 'sphere' );
button.addEventListener( 'click'...

但是变量的使用不多，如下所示

document.getElementById('table').addEventListener( 'click'...
document.getElementById( 'sphere' ).addEventListener( 'click'...

添加事件侦听器

2 个答案: