Javascript 如何创建函数以减少代码中的冗余？[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());
            });

          }
       });

     })

var标记=[]；
函数addMarker（坐标、内容、动画）{
var marker=new google.maps.marker({
职位：coords，
地图：地图，
图标：图标={
url:isBouncing？红色图标：绿色图标，
scaledSize:new google.maps.Size（40,40），//缩放大小
},
//如果有错误，请将其反弹
动画：动画
});
var infoWindow=new google.maps.infoWindow({
内容：内容
});
marker.addListener（'spider_click'，function（）{
map.panTo（this.getPosition（））；
信息窗口。打开（地图、标记）；
});
oms.addMarker（标记器）；
标记器。推（标记器）；
}
函数clearMarkers（）{
setMapOnAll（空）；
}
函数deleteMarkets（）{
clearMarkers（）；
标记=[]；
}
db.collection（'Nairobi'）.onSnapshot（函数（快照）{
snapshot.forEach（函数（子函数）{
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；
如果（ups==true&&trans==true&&sat==true&&kplc==true）{
isBouncing=true；
添加标记(
{lat:loc.纬度，lng:loc.经度}，
'' +
'' +
`${name_loc}`+
'' +
“
”
+`UPSError:${upsDesc}
`
+`SatelliteReceiver:${satDesc}
`
+`KPLC:${kplcDesc}
`
+`TransmitterError:${transDesc}
`
+  '' +
'' +
''
，google.maps.Animation.BOUNCE
);
}   
else if（ups==false&&trans==true&&sat==true&&kplc==true）{
isBouncing=true；
添加标记(
{lat:loc.纬度，lng:loc.经度}，
'' +
'' +
`${name_loc}`+
'' +
“
”
+`SatelliteReceiver:${satDesc}
`
+`KPLC:${kplcDesc}
`
+`TransmitterError:${transDesc}
`
+  '' +
'' +
''
，google.maps.Animation.BOUNCE
);
} 
否则如果（ups==true&&trans==false&&sat==true&&kplc==true）{
isBouncing=true；
添加标记(
{lat:loc.纬度，lng:loc.经度}，
'' +
'' +
`${name_loc}`+
'' +
“
”
+`UPSError:${upsDesc}
`
+`SatelliteReceiver:${satDesc}
`
+`KPLC:${kplcDesc}
`
+  '' +
'' +
''
，google.maps.Animation.BOUNCE
);
}
否则如果（ups==false&&trans==false&&sat==false&&kplc==false）{
isBouncing=false；
添加标记(
{lat:loc.纬度，lng:loc.经度}，
'' +
`${name_loc}`+
'' +
“
”
+‘运转良好’
+  '' +
'' +
''
);
}
log（child.id，child.data（））；
});
snapshot.docChanges（）.forEach（（更改）=>{
如果（change.type==“修改”）{
删除标记（）；
snapshot.forEach（函数（子函数）{
/***************************冗余代码****************************************/
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 ){
   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)


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)

})