代碼建議 - 如何使更簡潔（Javascript / Jquery）

Question

我正在努力使我的代碼更簡潔（即重復代碼更少）。 我已經從我的主管那里得到了一些關於如何使我最近的代碼更簡潔的建議，但我不確定如何做到這一點。

我有一些坐標用於檢查用戶是否在div的某個區域內單擊。 我被告知我應該將所有坐標放在一個數組中並“循環”以便在需要時獲取它們。 我想 - 我理解他的建議，但由於我還缺乏編程經驗，所以我無法完全理解它。 這是我到目前為止所做的工作，因此您可以更好地了解正在發生的事情：

    $("#div1").click(function(e)
    {
        // Arrays containing the x and y values of the rectangular area around a farm
        // [minX, maxX, minY, maxY]
        var div1_Coord_Area1= [565, 747, 310, 423];
        var div1_Coord_Area2= [755, 947, 601, 715];

        if(areaX >= Reg2_Coord_Farm1[0] && areaX <= Reg2_Coord_Farm1[1] && areaY >= Reg2_Coord_Farm1[2] && areaY <= Reg2_Coord_Farm1[3]) 
        {
            alert("You clicked in the first area");
        }
        if(areaX >= Reg2_Coord_Farm2[0] && areaX <= Reg2_Coord_Farm2[1] && areaY >= Reg2_Coord_Farm2[2] && areaY <= Reg2_Coord_Farm2[3]) 
        {
            alert("You clicked in the second area");
        } 
});

不要擔心我如何進行計算; 我把這個代碼留在了方法之外，因為它基本上是無關緊要的，但是如果你想知道它就在那里。

我為每組坐標做了一個數組，然后簡單地調用它們。 然而，這並不是“遍歷”一個充滿了每個區域的所有坐標的巨大陣列。 你能想出一種做到這一點的方法，或者是我現在能做的最好的方法嗎？

Answer 1

從第一個和非常快速的一瞥，您可以將點擊區域提取到一個單獨的功能。

像這樣的東西。

$("#div1").click(function(e)
{
    // Arrays containing the x and y values of the rectangular area around a farm
    // [minX, maxX, minY, maxY]
    var div1_Coord_Area1= [565, 747, 310, 423];
    var div1_Coord_Area2= [755, 947, 601, 715];

    if(inArea(div1_Coord_Area1, someStructForMouseLocation)) 
    {
        alert("You clicked in the first area");
    }
    if(inArea(div1_Coord_Area2, someStructForMouseLocation)) 
    {
        alert("You clicked in the second area");
    } 
});

function inArea(coordArea, mouseLocation)
{
    return mouseLocation.X >= coordArea[0] && mouseLocation.X <= coordArea[1] && mouseLocation.Y >= coordArea[2] && mouseLocation.Y <= coordArea[3]
}

你似乎在var div1_Coord_Area1= [565, 747, 310, 423];也有一些“魔術”數字var div1_Coord_Area1= [565, 747, 310, 423]; 和var div1_Coord_Area2= [755, 947, 601, 715]; 我會考慮將它們作為全局變量，因此它們不在click函數的范圍內。

它會像

// Arrays containing the x and y values of the rectangular area around a farm
// [minX, maxX, minY, maxY]
var div1_Coord_Area1= [565, 747, 310, 423];
var div1_Coord_Area2= [755, 947, 601, 715];

$("#div1").click(function(e)
{
    if(inArea(div1_Coord_Area1, someStructForMouseLocation)) 
    {
        alert("You clicked in the first area");
    }
    if(inArea(div1_Coord_Area2, someStructForMouseLocation)) 
    {
        alert("You clicked in the second area");
    } 
});

function inArea(coordArea, mouseLocation)
{
    return mouseLocation.X >= coordArea[0] && mouseLocation.X <= coordArea[1] && mouseLocation.Y >= coordArea[2] && mouseLocation.Y <= coordArea[3]
}

希望你能看到我的流程是進一步完善的一個。 首次創建方法時，不要期望編寫干凈的代碼。 之后你必須看看它，看看它是否講述了一個故事。 另一個變化是div1_Coord_Area1的名稱，該名稱是否真的重新計算變量的意圖？ 不會HotSpotArea1意味着更多嗎？ 請記住，您正在使用代碼講述故事。 您可以做的越多，下一個人使用最少的腦循環來更好地閱讀代碼。

你必須不斷改進以獲得非常干凈的代碼。

Answer 2

我認為他的意思更像是這樣的：

$("#div1").click(function(e){
    // Arrays containing the x and y values of the rectangular area around a farm
    // For each array: [area1, area2, area3, ... areaX]
    var minX = [565, 755];
    var maxX = [747, 947];
    var minY = [310, 601];
    var maxY = [423, 715];

    for (var i = 0; i < minX.length; i++) {
      if (areaX >= minX[i] && areaX <= maxX[i] && areaY >= minY[i] && areaY <= maxY[i]) {
        alert("You clicked in area " + (i+1));
      }
    }
});

這樣，您可以檢查更多區域，但永遠不必更改循環，因為它將始終遍歷數組中的所有項目，如上面的2，或10或100。

Answer 3

如果我是你，我會把你的區域對象：

// think of this as your ClickArea class
function ClickArea(minX, maxX, minY, maxY, description) {
    this.minX = minX;
    this.maxX = maxX;
    this.minY = minY;
    this.maxY = maxY;
    this.description = description;
};
ClickArea.prototype.isInside = function(areaX, areaY) {
    return (areaX >= this.minX && areaX <= this.maxX && areaY >= this.minY && areaY <= this.maxY);
};

現在，您可以像這樣創建一個ClickArea對象：

var area = new ClickArea(565, 747, 310, 423, "Area 1");

但是你會想要它們在數組中，所以我建議像這樣創建它們：

var areas = [
    new ClickArea(565, 747, 310, 423, "Area 1"),
    new ClickArea(365, 745, 330, 423, "Area 2")
];
// you can also add new ClickAreas using the array's push method:
areas.push(new ClickArea(333, 444, 555, 566, "Area 3"));

然后，您可以使用for循環遍歷它們：

for(var i = 0; i < areas.length; i++) {
    if(areas[i].isInside(areaX, areaY)) {
        alert("You clicked in " + areas[i].description);
    }
}