0

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 );
    }
4

2 回答 2

2

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

于 2012-05-19T20:26:13.373 回答
0

当您执行诸如 getElementById() 查找之类的 DOM 操作时，它们的成本很高并且会降低页面速度。当您以编程方式在循环中应用不透明度等样式更改时，这些更改也很昂贵，因为浏览器每次都必须重新绘制屏幕。

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

但是，这取决于您正在执行多少循环。如果它没有减慢速度并且这是您唯一的循环，请不要担心。对于更高性能的应用程序来说，它更受关注。

PS 请记住，当向这样的元素添加事件侦听器时，如果稍后从 DOM 中删除该元素，您也将它们删除，我们将有内存泄漏。

于 2012-05-19T20:29:41.737 回答