1

我的问题涉及使用 JavaScript 声明和使用函数时的性能增益或损失。假设我有一个函数foo()，定义如下：

function foo(arg1) {
    //a simple CSS change, such as changing background color
}

arg1用于标识 HTML 元素的字符串在哪里。foo()在鼠标悬停事件上触发。CSS 更改使用 jQuery 进行，但我认为这对我的问题并不重要。我想在 mouseout 事件上将 CSS 属性恢复为默认值。声明另一个函数是否会有性能优势foo2()，例如：

function foo2(arg1) {
    //undo the CSS change
}

或者最好重新定义foo()如下，使用第二个参数作为开关：

function foo(arg1,arg2) {
    if(arg2 == 'change') {
        //make the CSS change for arg1
    }else if(arg2 == 'revert') {
        //revert the change for arg1
    }
}

我不关心页面的加载时间。我的目标是尽量减少我的代码量，但不妨碍 CSS 更改的速度。

编辑：arg1不会严格指一个元素。它可用于标识一组元素，例如<td>列中的 's 共享的类名。这就是为什么:hoverCSS 选择器不会做我需要做的事情的原因。

编辑：再次，为了清楚起见，假设我有一组包含 class 的元素arg1。我希望所有元素都能体验 CSS 更改，即使只有一个具有该类名称的元素触发了事件。

4

4 回答 4

3

您可能需要考虑使用 CSS :hoverpsuedoselector 而不是在 javascript 中实现它。要使用更改背景颜色的示例：

#yourElementID {
    background-color: blue;
}

#yourElementID:hover { 
    background-color: green;
}

这将在鼠标悬停在元素上时将背景颜色更改为绿色，并在鼠标离开时将背景颜色更改为蓝色。

于 2013-01-07T20:32:57.600 回答
2

至于代码维护目的的最佳选择，您可能希望将这两个函数组合成一个函数。这使您的代码对未来的人们更具可读性。

true作为一个额外的好处，组合这些函数留下了非常雄辩的代码的可能性，例如使用简单的条件或否定 a值false等切换 CSS 。

于 2013-01-07T20:33:47.487 回答
1

清洁代码中的 Robert C. Martin写道

功能应该做一件事。他们应该做得很好。他们应该只做。

他接着说

标志参数很丑陋。将布尔值传递给函数是一种非常糟糕的做法。它立即使方法的签名复杂化，大声宣称该函数不止一件事。如果标志是真的，它会做一件事，如果标志是假的，它会做另一件事！

虽然您的情况不是布尔参数，但我将 Martin 的建议解释为适用于用于分支的任何参数以“做不止一件事”。

于 2013-01-07T20:37:48.747 回答
0

就像许多其他人所说的那样，如果您只是根据鼠标是否悬停在 HTML 元素上来更改 CSS，那么您可能应该在 CSS 中使用:hover:.

如果您出于某种原因必须使用 jQuery，这可能是最好的方法。

// Add event listener for mouseover to element(s) 
$(".myHtmlElements").on("mouseover", function(){

    // 'this' always refers to the element that triggered the event in jQuery
    $(this).css("background-color", "#FF0000"); // Red
});

// Add event listener for mouseout to element(s)
$(".myHtmlElements").on("mouseout", function(){
    // 'this' always refers to the element that triggered the event in jQuery
    $(this).css("background-color", "#0000FF"); // Blue
});
于 2013-01-07T21:11:15.887 回答