如何避免代码重复
How can I avoid code duplication?
我有下面的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]);
}
相关文章:
- 如何将函数包装在函数中以避免代码重复
- 如何避免“;使用数组文字表示法“;以下javascript代码中的jslint错误
- 如何在jquery中为object键创建一个工作变量以避免额外的代码
- 如何避免代码重复
- 避免jQuery中的重复代码
- 如何重写此 Javascript 代码以避免 JSHint 警告
- 如何避免重复代码(加载页面时切换)
- 如何避免重复以下替换代码
- 如何避免在jQuery中重复.getJSON代码
- 避免重复html代码——不要使用PHP
- 在分配事件时避免代码重复
- OOP ajax 以避免代码重复
- jQuery/can'我找不到避免代码添加类的方法
- 弹出代码以避免浏览器阻止
- 是否可以改进此代码以避免内存泄漏或更稳定
- 如何更新代码以避免“;未定义的值“;
- 在运行时解析javascript代码时避免循环
- 如何在使用服务器端和javascript代码时避免冗余的HTML代码
- 如何在Node.js和Express.js中改进这段代码,避免回调地狱
- 清理javascript代码以避免嵌套