Question

Jshint.com建议使用以下代码：

Line 150: }, false );

Don't make functions within a loop.

但是，它允许我不必多次编写document.getElementById（），而是可以将ID保存在数组中并循环遍历它们。

我感觉更简洁和可维护的代码。

function styleTwitter( pair_array )
{
    var i, input, label;
    for ( i = 0; i < pair_array.length; i+=2 ) 
    {
        input = document.getElementById( pair_array[ i ] );
        label = document.getElementById( pair_array[ i + 1 ] );

        input.addEventListener( "focus", function()
        { 
            if( input.value === '' )
            {
                label.style.opacity = 0; 
                input.style.border = '1px solid #888888'; 
            }
        }, false );

        input.addEventListener( "blur", function()
        {
            if( input.value === '' )
            {
                label.style.opacity = 1;
                new EffectsFont( label ).fade( 'up', 150 );
                input.style.border = '1px solid #dddddd'; 
            }

        }, false );
    }

Answer 1

您是否尝试创建一个分析事件源并执行相同操作的函数？它将更容易掌握（阅读：更易于维护），并且它不会占用内存（闭包捕获整个堆栈，因此它永远不便宜）。

Answer 2

当你执行像getElementById（）查找这样的DOM操作时，它们很昂贵并且会使页面变慢。当您以编程方式在循环中应用样式更改（如不透明度）时，这些也很昂贵，因为浏览器每次都必须重新绘制屏幕。

现在，如果您有一个应用这些更改的CSS类，您可以在一个操作中应用所有更改并保存数百个浏览器重绘操作。这主要是为什么人们应该避免循环UI更新。

但是，这取决于你正在做多少循环。如果它没有减慢速度，这是你唯一的循环，不要担心它。对于性能更高的应用程序来说，这更令人担忧。

P.S。请记住，在向这样的元素添加事件侦听器时，如果稍后从DOM中删除元素，也会删除它们，我们就会发生内存泄漏。

为什么我不应该在循环中创建函数？

2 个答案: