Question

我有如下代码。默认位置是myloc。当用户单击btn-a时，它选择myloc，而当单击btn-b时，它选择myloc1。在我的代码中，我重复了代码L.circle .... 3次，这是不好的做法。因此，有人可以帮助我如何优化此代码并提高质量。

<a class="nav-item nav-link active show"  id="v-photos-tab-3a623245-7dc7-4a22-90d0-62705ad0c62b" data-toggle="pill" href="#v-photos-3a623245-7dc7-4a22-90d0-62705ad0c62b" role="tab" aria-controls="v-requestbase-photos" aria-selected="true"><span>Cool photos</span></a>

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

干概念提高代码质量

1 个答案: