javascript - 如何创建函数以减少代码中的冗余？ [JS](How can I create functions to reduce redundancy in my code? [JS])

Question

My code is running well but I have repeated myself too much and the code will be too large considering that I have only handled a query for one collection.

(我的代码运行良好，但是我重复了很多次，考虑到我只处理了一个集合的查询，所以代码太大了。)

I have tried using a function to handle some of the code but it doesn't work as some variables are not accessible globally.

(我尝试使用一个函数来处理一些代码，但由于某些变量无法全局访问，因此无法正常工作。)

Here is the code

(这是代码)

 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.An

Answer 1

Here is the way you can make.

(这是您可以制作的方式。)

Also, I created getHtml function to get the HTML.

(另外，我创建了getHtml函数来获取HTML。)

Add condition for other to use the getHtml for other like upsError

(添加条件以将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)

})