1

My question involves the performance gain or loss when declaring and using functions with JavaScript. Suppose I have a function, foo(), defined as such:

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

Where arg1 is a String used to identify an HTML element. foo() is triggered on a mouseover event. The CSS change happens using jQuery, but I don't think that's important to my question. I would like to revert the CSS property back to default on a mouseout event. Would there be performance advantages of declaring another function, foo2(), such as:

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

Or would it be better to redefine foo() as follows, using a second argument as a switch:

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

I am not concerned with the load time of the page. My goal is to minimize my amount of code, but without hampering the speed of the CSS change.

EDIT: arg1 will not strictly refer to one element. It can be used to identify a set of elements, such as a class name shared by <td>'s in a column. This is why the :hover CSS selector will not do what I need to do.

EDIT: Again, for clarity, suppose I have a set of elements containing the class arg1. I want ALL of the elements to experience the CSS change even when only ONE of the elements with that class name triggers the event.

4

4 に答える 4

3

:hoverこれを JavaScript で実装する代わりに、CSS 疑似セレクターの使用を検討することをお勧めします。背景色を変更する例を使用するには：

#yourElementID {
    background-color: blue;
}

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

これにより、マウスが要素の上にあるときに背景色が緑に変わり、マウスが離れると青に戻ります。

于 2013-01-07T20:32:57.600 に答える
2

コードの保守を目的とした最良の選択として、2 つの関数を 1 つの関数に結合することをお勧めします。これにより、将来的にコードが読みやすくなります。

true追加のボーナスとして、関数を組み合わせると、単純な条件やtofalse値の否定などを使用して CSS を元に戻すなど、非常に雄弁なコードの可能性が残されます。

于 2013-01-07T20:33:47.487 に答える
1

Robert C. Martin はClean Codeで次のように書いています。

関数は 1 つのことを行う必要があります。彼らはそれをうまくやるべきです。彼らはそれを行うべきです。

彼は続けて言います

フラグの引数は醜いです。ブール値を関数に渡すことは、本当にひどい習慣です。メソッドのシグネチャをすぐに複雑にし、この関数が複数のことを行うことを大声で宣言します。フラグが true の場合は 1 つのことを実行し、フラグが false の場合は別のことを実行します。

あなたの状況はブール値のパラメーターではありませんが、「複数のことを行う」ためにブランチに使用されるパラメーターに適用するというマーティンのアドバイスを解釈します。

于 2013-01-07T20:37:48.747 に答える
0

他の多くの人が言っているように、CSSを変更する場合は、マウスがHTML要素の上にあるかどうかに基づいて、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 に答える