javascript - 无论如何，我可以通过使用循环来减少我的 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]));
    }
});

希望这有帮助。