Question

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

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

其中arg1是用于标识HTML元素的String。鼠标悬停事件会触发foo()。使用jQuery进行CSS更改，但我不认为这对我的问题很重要。我想在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>共享的类名。这就是为什么:hover CSS选择器不会做我需要做的事情。

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

Answer 1

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

#yourElementID {
    background-color: blue;
}

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

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

Answer 2

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

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

Answer 3

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

功能应该做一件事。他们应该做得好。他们应该这样做它只是。

他继续说

Flag参数很难看。将布尔值传递给函数是真的可怕的做法。它立即使签名复杂化方法，大声宣称这个功能不止一个事情。如果标志为真，那么它会做一件事，而如果标志是另一件事是假的！

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

Answer 4

正如许多其他人所说，如果您只是根据鼠标是否悬停在HTML元素上而改变CSS，那么您应该只使用:hover:在CSS中执行此操作。

如果由于某种原因必须使用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
});

我应该声明更多函数或将switch参数传递给JavaScript中的一个函数吗？

4 个答案: