代碼建議 - 如何使更簡潔（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 
    // 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 2

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

就是這樣。

$("#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_Area2= [755, 947, 601, 715];一些「神奇」的數字，我會考慮讓他們的全局變量，使他們都出了點擊功能的範圍。

它會讀到這樣

// 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 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); 
    } 
}