如何避免代码重复

How can I avoid code duplication?

本文关键字:代码 何避免      更新时间:2023-09-26

我有下面的JQuery代码,我很想得到DRY。目前只有2个标记,但接下来还有30+,所以我需要一个干净的解决方案:

L.mapbox.accessToken = 'secret_token';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([-12.260355, 29.927956], 11);
var geoJson01 = {
    features: [{
        type: 'Feature',
        properties: {
            'marker-size': 'large',
            'marker-symbol': 'embassy',
            video: '<iframe src="http://www.example.com/test1.html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
        },
        geometry: {
            type: 'Point',
            coordinates: [29.91, -12.28]
        }
    }]
};
var geoJson02 = {
    features: [{
        type: 'Feature',
        properties: {
            'marker-size': 'large',
            'marker-symbol': 'embassy',
            video: '<iframe src="http://www.example.com/test2.html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
        },
        geometry: {
            type: 'Point',
            coordinates: [29.81, -12.18]
        }
    }]
};
var myLayer01 = L.mapbox.featureLayer().addTo(map);
var myLayer02 = L.mapbox.featureLayer().addTo(map);
myLayer01.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;
    var popupContent =  feature.properties.video;
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 300,
        maxWidth: 810
    });
});
myLayer02.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;
    var popupContent =  feature.properties.video;
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 300,
        maxWidth: 810
    });
});
myLayer01.setGeoJSON(geoJson01);
myLayer02.setGeoJSON(geoJson02);

我怎样才能做到这一点?

将差异提取到数组中的对象中,然后在其上forEach:-

var markers = [
  {
    coordinates: [29.91, -12.28],
    video: '"http://www.example.com/test1.html"'
  }, {
    coordinates: [29.81, -12.18],
    video: '"http://www.example.com/test2.html"'
  }
];
L.mapbox.accessToken = 'secret_token';
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([-12.260355, 29.927956], 11);
function setMarker(obj) {
  var geoJson01 = {
    features: [{
      type: 'Feature',
      properties: {
        'marker-size': 'large',
        'marker-symbol': 'embassy',
        video: '<iframe src=' + obj.video + ' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
      },
      geometry: {
        type: 'Point',
        coordinates: obj.coordinates
      }
    }]
  };
  var myLayer01 = L.mapbox.featureLayer().addTo(map);
  myLayer01.on('layeradd', function(e) {
    var marker = e.layer,
      feature = marker.feature;
    var popupContent = feature.properties.video;
    marker.bindPopup(popupContent, {
      closeButton: false,
      minWidth: 300,
      maxWidth: 810
    });
  });
  myLayer01.setGeoJSON(geoJson01);
}
markers.forEach(function(m) {
  setMarker(m);
})

这应该能在中工作

L.mapbox.accessToken = 'secret_token';
    var map = L.mapbox.map('map', 'mapbox.streets')
        .setView([-12.260355, 29.927956], 11);
    // new
    var array = [{
        features : [{
            type : 'Feature',
            properties : {
                'marker-size' : 'large',
                'marker-symbol' : 'embassy',
                video : '<iframe src="http://www.example.com/test1.html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
            },
            geometry : {
                type : 'Point',
                coordinates : [29.91, -12.28]
            }
        }]
    }, {
        features : [{
            type : 'Feature',
            properties : {
                'marker-size' : 'large',
                'marker-symbol' : 'embassy',
                video : '<iframe src="http://www.example.com/test2.html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
            },
            geometry : {
                type : 'Point',
                coordinates : [29.81, -12.18]
            }
        }]
    }];
    var layers = [];
    for(var i = 0; i < array.length; i++)
    {
        layers[i] = L.mapbox.featureLayer().addTo(map);
        layers[i].on('layeradd', function(e)
        {
            var marker = e.layer,
                feature = marker.feature;
            var popupContent = feature.properties.video;
            marker.bindPopup(popupContent, {
                closeButton : false,
                minWidth : 300,
                maxWidth : 810
            });
        });
        layers[i].setGeoJSON(array[i]);
    }