[英]How can I create functions to reduce redundancy in my code? [JS]
我的代码运行良好，但我重复了太多，考虑到我只处理了一个集合的查询，代码会太大。
我曾尝试使用函数来处理某些代码，但它不起作用，因为某些变量无法全局访问。
这是代码
var markers = [];
function addMarker(coords, content, animation){
var marker = new google.maps.Marker({
position: coords,
map: map,
icon: icon = {
url : isBouncing ? red_icon : green_icon,
scaledSize: new google.maps.Size(40, 40), // scaled size
},
// IF THERE'S AN ERROR, BOUNCE IT
animation: animation
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
marker.addListener('spider_click', function() {
map.panTo(this.getPosition());
infoWindow.open(map,marker);
});
oms.addMarker(marker);
markers.push(marker);
}
function clearMarkers() {
setMapOnAll(null);
}
function deleteMarkers() {
clearMarkers();
markers = [];
}
db.collection('Nairobi').onSnapshot(function(snapshot) {
snapshot.forEach(function(child){
var name_loc = child.id;
var loc = child.data().marker;
var forward = child.data().ForwardPower;
var reflected = child.data().ReflectedPower;
var ups = child.data().UPSError;
var upsDesc = child.data().UPSDesc;
var trans = child.data().TransmitterError;
var transDesc = child.data().TransDesc;
var kplc = child.data().KPLC;
var kplcDesc = child.data().KPLCDesc;
var sat = child.data().SatelliteReceiver;
var satDesc = child.data().SatDesc;
if(ups === true && trans ===true && sat ===true && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ `<p> KPLC: ${kplcDesc} </p>`
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === false && trans ===true && sat ===true && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ `<p> KPLC: ${kplcDesc} </p>`
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === true && trans ===false && sat ===true && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ `<p> KPLC: ${kplcDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === false && trans ===false && sat ===false && kplc ===false){
isBouncing = false;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<h2> Running well </h2>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
);
}
console.log(child.id, child.data());
});
snapshot.docChanges().forEach((change) => {
if (change.type === "modified") {
deleteMarkers();
snapshot.forEach(function(child){
/***************************REDUNDANT CODE****************************************/
var name_loc = child.id;
var loc = child.data().marker;
var forward = child.data().ForwardPower;
var reflected = child.data().ReflectedPower;
var ups = child.data().UPSError;
var upsDesc = child.data().UPSDesc;
var trans = child.data().TransmitterError;
var transDesc = child.data().TransDesc;
var kplc = child.data().KPLC;
var kplcDesc = child.data().KPLCDesc;
var sat = child.data().SatelliteReceiver;
var satDesc = child.data().SatDesc;
if(ups === true && trans ===true && sat ===true && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ `<p> KPLC: ${kplcDesc} </p>`
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === false && trans ===true && sat ===false && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> KPLC: ${kplcDesc} </p>`
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === true && trans ===false && sat ===true && kplc ===false){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === true && trans ===false&& sat ===false && kplc ===false){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === false && trans ===true && sat ===false && kplc ===false){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
console.log(child.id, child.data());
});
}
});
})
并且还有更好的方法来处理这些 IF 语句以使我的代码更清晰。
这是你可以做的方式。 另外，我创建了getHtml函数来获取 HTML。 为其他人添加条件以将getHtml用于其他人，例如upsError
var markers = [];
function addMarker(coords, content, animation) {
var marker = new google.maps.Marker({
position: coords,
map: map,
icon: icon = {
url: isBouncing ? red_icon : green_icon,
scaledSize: new google.maps.Size(40, 40), // scaled size
},
// IF THERE'S AN ERROR, BOUNCE IT
animation: animation
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
marker.addListener('spider_click', function () {
map.panTo(this.getPosition());
infoWindow.open(map, marker);
});
oms.addMarker(marker);
markers.push(marker);
}
function clearMarkers() {
setMapOnAll(null);
}
function deleteMarkers() {
clearMarkers();
markers = [];
}
function getHtml(name_loc,data) {
return '' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+
`<p> TransmitterError: ${data} </p>`
+
'</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
}
function calculateEachData(snapshot,child){
/***************************REDUNDANT CODE HERE****************************************/
var name_loc = child.id;
var loc = child.data().marker;
var forward = child.data().ForwardPower;
var reflected = child.data().ReflectedPower;
var ups = child.data().UPSError;
var upsDesc = child.data().UPSDesc;
var trans = child.data().TransmitterError;
var transDesc = child.data().TransDesc;
var kplc = child.data().KPLC;
var kplcDesc = child.data().KPLCDesc;
var sat = child.data().SatelliteReceiver;
var satDesc = child.data().SatDesc;
if (ups === true && trans === true && sat === true && kplc === true) {
isBouncing = true;
addMarker({
lat: loc.latitude,
lng: loc.longitude
},
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>" +
`<p> UPSError: ${upsDesc} </p>` +
`<p> SatelliteReceiver: ${satDesc} </p>` +
`<p> KPLC: ${kplcDesc} </p>` +
`<p> TransmitterError: ${transDesc} </p>`
+
'</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
, google.maps.Animation.BOUNCE
);
} else if (ups === false && trans === true && sat === false && kplc === true) {
isBouncing = true;
addMarker({
lat: loc.latitude,
lng: loc.longitude
},
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+
`<p> KPLC: ${kplcDesc} </p>` +
`<p> TransmitterError: ${transDesc} </p>`
+
'</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
, google.maps.Animation.BOUNCE
);
} else if (ups === true && trans === false && sat === true && kplc === false) {
isBouncing = true;
addMarker({
lat: loc.latitude,
lng: loc.longitude
},
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+
`<p> UPSError: ${upsDesc} </p>` +
`<p> SatelliteReceiver: ${satDesc} </p>`
+
'</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
, google.maps.Animation.BOUNCE
);
} else if (ups === true && trans === false && sat === false && kplc === false) {
isBouncing = true;
addMarker({
lat: loc.latitude,
lng: loc.longitude
}, getHtml(name_loc,upsDesc), google.maps.Animation.BOUNCE
);
} else if (ups === false && trans === true && sat === false && kplc === false) {
isBouncing = true;
addMarker({
lat: loc.latitude,
lng: loc.longitude
},getHtml(name_loc,transDesc), google.maps.Animation.BOUNCE
);
}
console.log(child.id, child.data());
}
function childSanp(snapshot) {
snapshot.forEach(function (child) {
calculateEachData(snapshot,child)
});
}
function docSnap(snapshot) {
snapshot.docChanges().forEach((change) => {
if (change.type === "modified") {
deleteMarkers();
snapshot.forEach(function (child) {
calculateEachData(snapshot,child)
});
}
});
}
db.collection('Nairobi').onSnapshot(async function (snapshot) {
await childSanp(snapshot)
await docSnap(snapshot)
})
创建一个函数来创建 HTML 内容并传递必要的变量/占位符以生成内容。
使用 string `` 创建一个完整的 HTML 字符串，如下所示。
<div id="iw-container"> <div class="iw-title"> ${name_loc}</div> <div class="iw-content"> <p> UPSError: ${upsDesc} </p> <p> SatelliteReceiver: ${satDesc} </p> <p> KPLC(: ${kplcDesc} </p> <p> TransmitterError: ${transDesc} </p> </div> <div class="iw-bottom-gradient"></div> </div>
使用嵌套的 if 语句。 正如您所说，代码目前太长了。 一个月或一年后，如果不不断滚动浏览所有内容，您将不会记得在哪里发生了什么。
使用几个变量。
if( ups == true ){
if( trans == true ){
bBouncing = true;
...
}else{ // trans == false
...
}else{ // ups == false
bBouncing = false;
...
} // End of all if's
addMarker(
...
,(bBouncing ? google.maps.Animation.BOUNCE : google.maps.Animation.NONE)
我可以将用户名作为文本文件存储在 s3 中以减少 nosql 数据库中的冗余吗？
[英]Can I store username in s3 as text file to reduce redundancy in nosql database?
如何为我的 Lambda 函数创建可重复使用的 CloudFormation 模板？
[英]How can I create a re-usable CloudFormation template for my Lambda functions?
如何使用 JSONPath 创建 JSON object 供 AWS Step Functions 使用？
[英]How can I use JSONPath to create a JSON object for use by AWS Step Functions?
如何在 Firebase Functions JS 中查看 HTTP 请求的 body 数据？
[英]How can I view the body data of an HTTP request in a Firebase Functions JS?
如果显示找不到命令，如何在我的终端中创建 podfile？
[英]How can I create podfile in my terminal if it shows command not found?
REACT JS FIREBASE FIRESTORE- 我如何更新文档中的字段？
[英]REACT JS FIREBASE FIRESTORE- how can i update my field in a document?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.