有反正我可以通过使用循环来减少我的jQuery代码吗？

Question

我正在研究一种路线规划器，我并不满意我写的重复代码的数量，特别是对于真正的“冲洗和重复”事件的计算。我想知道是否有人可以建议（给出一个例子）一种方式来让我减少这些代码？

目前我使用$.each从输入字段获取值，并将它们存储在object中。在此之后，我分别访问每个定义的对象以执行计算和工作。我想我可能已经过度这个过程了！

让我首先向您展示包含我从中收集数据的输入字段的简单HTML。

<div id="plot1" class="plotrow"> 
    <div class="lat"> 
     <input id="plot1_lat" /> 
    </div> 
    <div class="lon"> 
     <input id="plot1_long" /> 
    </div> 
</div> 

<div id="plot2" class="plotrow"> 
    <div class="lat"> 
     <input id="plot2_lat" /> 
    </div> 
    <div class="lon"> 
     <input id="plot2_long" /> 
    </div> 
</div> 

... 

好吧，在这个阶段，我将移动到jQuery抓取任何值（这将是经度和纬度坐标）。我将这些信息存储在一个对象中。

//Object is defined 
var obj = {}; 

//Values are passed in 
$('.plotrow').each(function() { 
    obj[this.id] = { 
     lat: $(this).find('.lat input').val(), 
     lon: $(this).find('.lon input').val() 
    }; 
}); 

在这个阶段，我需要开始对收集到的信息做工作。在这里，我将这些值传递给一个将它们转换为弧度的函数。

plot1LatRad = deg2rad(obj.plot1.lat); 
plot1LonRad = deg2rad(obj.plot1.lon); 
plot2LatRad = deg2rad(obj.plot2.lat); 
plot2LonRad = deg2rad(obj.plot2.lon); 
plot3LatRad = deg2rad(obj.plot3.lat); 
plot3LonRad = deg2rad(obj.plot3.lon); 

正如你所看到的，我可以单独访问每个绘图值。接下来会发生什么，我计算出位置之间的差异。

//Location A 
var AtoBLat = plot2LatRad - plot1LatRad; 
var AtoBLon = plot2LonRad - plot1LonRad; 
AtoBSum = Math.pow(Math.sin(AtoBLat/2), 2) + Math.cos(plot1LatRad) * Math.cos(plot2LatRad) * Math.pow(Math.sin(AtoBLon/2), 2); 
AtoBSqrt = 2 * Math.atan2(Math.sqrt(AtoBSum), Math.sqrt(1 - AtoBSum)); 
AtoBMiles = AtoBSqrt * Rm; 
AtoBRound = round(AtoBMiles); 
miles1 = AtoBRound * 0.86898; 

//Location B 
var BtoCLat = plot3LatRad - plot2LatRad; 
var BtoCLon = plot3LonRad - plot2LonRad; 
BtoCSum = Math.pow(Math.sin(BtoCLat/2), 2) + Math.cos(plot2LatRad) * Math.cos(plot3LatRad) * Math.pow(Math.sin(BtoCLon/2), 2); 
BtoCSqrt = 2 * Math.atan2(Math.sqrt(BtoCSum), Math.sqrt(1 - BtoCSum)); 
BtoCMiles = BtoCSqrt * Rm; 
BtoCRound = round(BtoCMiles); 
miles2 = BtoCRound * 0.86898; 

正如你所看到的，这一切都变得非常重复和相当臃肿。我能循环做这项工作吗？任何人都可以提出一个有用的方法吗？为了简洁起见，我只展示了几个要点，但该应用程序有多达10个区域可以绘制一条路线，因此上面的代码将变得相当大。

Answer 1

如果您有多个图表，代码可能会爆炸，但这正是函数和循环存在的原因。下面，我建议一个功能locationDiff的解决方案，它需要两个绘图配置并根据需要吐出它们之间的距离，稍后会引入一个循环来遍历配置对象并将结果存储在最终数组中。

// does the distance calculation between two plot configurations 
function locationDiff(plot1, plot2) { 
    let AtoBLat = deg2rad(plot2.lat) - deg2rad(plot1.lat); 
    let AtoBLon = deg2rad(plot2.lon) - deg2rad(plot1.lon); 
    let AtoBSum = Math.pow(Math.sin(AtoBLat/2), 2) + Math.cos(deg2rad(plot1.lat)) * Math.cos(deg2rad(plot2.lat)) * Math.pow(Math.sin(AtoBLon/2), 2); 
    return (round((2 * Math.atan2(Math.sqrt(AtoBSum), Math.sqrt(1 - AtoBSum))) * Rm) * 0.86898); 
} 

// stores the results of calling `locationDiff` on the plots 
let diffs = []; 
// captures the keys of the different plot configurations 
let objKeys = Object.keys(obj); 
// loops through the keys to calculate and store the distances 
objKeys.forEach((key, index) => { 
    // the next key in the keys array 
    let nextKey = objKeys[index + 1]; 
    // if not at the end of the array yet, push the result in the final array 
    if (nextKey) { 
     diffs.push(locationDiff(obj[key], obj[nextKey])); 
    } 
}); 

希望这会有所帮助。

Answer 2

有一个错误，因为我不知道什么是Rm  ：

$("form").append(
 
    template("plot1"), 
 
    template("plot2"), 
 
    "<input type=\"submit\">" 
 
).on("submit", function (ev) { 
 
    ev.preventDefault(); 
 
    calculateMiles(
 
    this.elements.plot1_lat.value, 
 
    this.elements.plot1_long.value, 
 
    this.elements.plot2_lat.value, 
 
    this.elements.plot2_long.value 
 
); 
 
}); 
 

 
function template (id) { 
 
    return "" 
 
    + "<div id=\"" + id + "\" class=\"plotrow\">" 
 
    + "<div class=\"lat\">" 
 
    +  id + " lat <input name=\"" + id + "_lat\" />" 
 
    + "</div>" 
 
    + "<div class=\"lon\">" 
 
    +  id + " lng <input name=\"" + id + "_long\" />" 
 
    + "</div>" 
 
    + "</div>"; 
 
} 
 

 
function calculateMiles (plot1LatRad, plot1LonRad, plot2LatRad, plot2LonRad) { 
 
    var AtoBLat = plot2LatRad - plot1LatRad; 
 
    var AtoBLon = plot2LonRad - plot1LonRad; 
 
    var AtoBSum = Math.pow(Math.sin(AtoBLat/2), 2) + Math.cos(plot1LatRad) * Math.cos(plot2LatRad) * Math.pow(Math.sin(AtoBLon/2), 2); 
 
    var AtoBSqrt = 2 * Math.atan2(Math.sqrt(AtoBSum), Math.sqrt(1 - AtoBSum)); 
 
    var AtoBMiles = AtoBSqrt * Rm; 
 
    var AtoBRound = round(AtoBMiles); 
 
    return AtoBRound * 0.86898; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form></form>