用dry概念提高代码质量

Question

我有一个类似下面的代码。is默认位置为myloc。当用户单击btn-a时，它选择myloc；当单击btn-b时，它选择myloc1。在我的代码中，我重复了代码L.circle...三次，这是不好的做法。所以有没有人可以帮助我如何优化这段代码并提高质量呢？

var myloc = new L.LatLng(13.7433242, 100.5421583);
var myloc1 = new L.LatLng(14.979900, 102.097771);
$(function () {
    var circle;
    var slider = document.getElementById('myRange');
    var output = document.getElementById('demo');
    output.innerHTML = slider.value + scale;

    slider.oninput = function (val) {
        output.innerHTML = this.value + scale;
        circle.setRadius(this.value);
    }

    circle = L.circle(myloc, {
        color: '#7a7777',
        weight: 0.1,
        fillColor: '#7a7777',
        fillOpacity: 0.2,
        radius: 0
    }).addTo(map);

    $('.btn-a').on('click', function(e){
        if ($(this).val() == 'First') {
            circle = L.circle(myloc, {
                color: '#7a7777',
                weight: 0.1,
                fillColor: '#7a7777',
                fillOpacity: 0.2,
                radius: 0
            }).addTo(map);

        } else if($(this).val() == 'Second') {
            circle = L.circle(myloc1, {
                color: '#7a7777',
                weight: 0.1,
                fillColor: '#7a7777',
                fillOpacity: 0.2,
                radius: 0
            }).addTo(map);
        }
    });
});

Answer 1

看起来唯一的区别是向第三个L.circle传递了一个参数myloc1，而不是myloc。一种选择是让一个函数返回一个带有第一个参数的L.circle。

// ...
slider.oninput = function(val) {
  output.innerHTML = this.value + scale;
  circle.setRadius(this.value);
}

const circleProps = {
  color: '#7a7777',
  weight: 0.1,
  fillColor: '#7a7777',
  fillOpacity: 0.2,
  radius: 0
};
const newCircle = (loc) => {
  circle = L.circle(loc, {...circleProps}).addTo(map);
}
newCircle(myloc);
$('.btn-a').on('click', function(e) {
  if ($(this).val() == 'First') newCircle(myloc);
  else if ($(this).val() == 'Second') newCircle(myloc2);
});