javascript - 関数の結合 - よりクリーンなコード

Question

コードを短くする方法はありますか。すべて同じことを行う約 15 個の関数を追加する必要があります。

$(document).ready(function() {
    $('.map-highligh').maphilight({

    });

    //north roll over
    $('#hilightlink').mouseover(function(e) {
        $('#north').mouseover();
    }).mouseout(function(e) {
        $('#north').mouseout();
    }).click(function(e) { e.preventDefault(); });

    //Wellington roll over
    $('#hilightlink-wel').mouseover(function(e) {
        $('#wellington').mouseover();
    }).mouseout(function(e) {
        $('#wellington').mouseout();
    }).click(function(e) { e.preventDefault(); });

});

score 2 · Accepted Answer

コードをクリーンアップするために、少し構成を使用できます。

function makeTrigger(id, eventName) {
    return function(e) {
        $('#' + id).trigger(eventName);
    };
}

function prevent(e) {
    e.preventDefault();
}

$('#hilightlink')
.mouseover(makeTrigger("north", "mouseover"))
.mouseout(makeTrigger("north", "mouseout"))
.click(prevent);

score 0 · Accepted Answer

それを利用して利点を得るために利用できる DOM 関係を確認せずに、データをテーブルに入れ、テーブルを反復処理して、コードのコピーが 1 つだけになるようにし、実行コードを変更せずに識別子を追加/削除/変更できるようにします。 :

var hoverItems = [
    "highlightlink", "north",
    "highlightlink-wel", "wellington"
];

for (var i = 0; i < hoverItems.length; i+= 2) {
    (function(item$) {
        $("#" + hoverItems[i]).hover(function() {
            item$.mouseover();
        }, function() {
            item$.mouseout();
        }).click(function(e) {e.preventDefault();});
    })($(hoverItems[i+1]));
}

または、少し異なる方法で、ルックアップテーブルを使用します。

var hoverItems = {
    "highlightlink": "north",
    "highlightlink-wel": "wellington"
};

$("#" + Object.keys(hoverItems).join(", #")).hover(function() {
    $("#" + hoverItems[this.id]).mouseover();
}, function() {
    $("#" + hoverItems[this.id]).mouseout();
}).click(function(e) {e.preventDefault();});

この 2 番目の方法では、その方法に ES5 またはES5 shimObject.keys()が必要です。

これらの方法のいずれかで項目を追加するには、データテーブルに項目を追加するだけです。実行コードの新しい行を 1 行も書く必要はありません。

score 0 · Accepted Answer

このために UI を再考する必要があるかもしれませんが、次のようにすることもできます。

function mouseBind(bound, affected) {
   $('#' + bound)
      .mouseover(function () {
         $('#' + affected).mouseover();
      })
      .mouseout(function () {
         $('#' + affected).mouseout();
      })
      .click(function (e) { e.preventDefault(); })
   ;
}

mouseBind('hilightlink', 'north');
mouseBind('hilightlink-wel', 'wellington');

score 0 · Accepted Answer

この関数は、HTML コードを変更せずに使用できます。

function bind_block(button, element) {
  button.mouseover(function(e) {
    element.mouseover();
  }).mouseout(function(e) {
    element.mouseout();
  }).click(function(e) { e.preventDefault(); });
}

bind_block($('#hilightlink'), $('#north'));
bind_block($('#hilightlink-wel'), $('#wellington'));

このイベントを 15 の異なる要素にバインドする必要がある場合は、CSS クラスを使用することをお勧めします。さらにヘルプが必要な場合は、HTML を提供してください。

score 0 · Accepted Answer

$.fn.rollOver = function(selector) {
    this.on('mouseover mouseout', function(e) { $(selector).trigger(e.type); });
    this.on('click', function(e) { e.preventDefault(); });
    return this;
}
$('#hilightlink').rollOver('#north');
$('#hilightlink-wel').rollOver('#wellington');

javascript - 関数の結合 - よりクリーンなコード

5 に答える 5

Related

Reference