ループを使用して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; 

ご覧のとおり、非常に反復性があり、非常に膨らんでいます。この作業をループで行うことはできますか？誰も助けてくれるアプローチを提案できますか？簡潔さのために私は2つのポイントを示しただけですが、このアプリケーションには10個のエリアがあり、ルートをプロットできるので、上記のコードはかなり大きくなります。

Answer 1

複数のプロットがある場合はコードが爆発する可能性がありますが、それが関数とループが存在する理由です。以下では、関数locationDiffを使用し、2つのプロット構成をとり、それらの間の距離を必要に応じて変化させるソリューションを提案します。後でループを導入して構成オブジェクトを循環させ、結果を最終アレイに格納します。

// 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>