javascript - 如何删除 javascript 监听器中的重复函数？

Question

目标

我希望删除匿名函数调用带来的重复代码。

背景

我正在做一个非常简单的项目，我在其中使用 Google Maps API 来显示带有两个搜索框的 map 。用户在这些框中输入开始地址和结束地址，然后我在 map 中显示标记。

为了实现这一点，我为监听器提供了两个匿名函数，它们完全相同，除了一点 - 一个使用 startSearchBox，另一个使用 endSearchBox。

我尝试了什么

这种重复的代码是不必要的，所以我尝试将搜索框作为参数传递给匿名函数，但这没有用。

我还考虑过将搜索框创建为全局变量，但这是我希望避免的不良做法。

如何消除这段代码中的重复？

代码

function initSearchBoxes() {
    // Create the search box and link it to the UI element.
    let startInput = document.getElementById('start-input');
    let startSearchBox = new google.maps.places.SearchBox(startInput);

    let endInput = document.getElementById('end-input');
    let endSearchBox = new google.maps.places.SearchBox(endInput);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
        startSearchBox.setBounds(map.getBounds());
        endSearchBox.setBounds(map.getBounds());
    });

    startSearchBox.addListener('places_changed', function() {

        deleteAllMarkers();

        let places = startSearchBox.getPlaces();
        if (places.length == 0) {
            return;
        }

        // For each place, get the icon, name and location.
        let bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {

            // // Create a marker for each place.
            let newMarker = createMarker(place.geometry.location, place.name, markerLabels.nextSymbol(), true);
            markerLib.trackMarker(newMarker);

            newMarker.setMap(map);

            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            }
            else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);
    });

    endSearchBox.addListener('places_changed', function() {

        deleteAllMarkers();

        let places = endSearchBox.getPlaces();
        if (places.length == 0) {
            return;
        }

        // For each place, get the icon, name and location.
        let bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {

            // // Create a marker for each place.
            let newMarker = createMarker(place.geometry.location, place.name, markerLabels.nextSymbol(), true);
            markerLib.trackMarker(newMarker);

            newMarker.setMap(map);

            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            }
            else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);
    });
}

Answer 1

您可以将回调函数包装在另一个“工厂”函数中。工厂将采用一个参数(搜索框引用)然后它将返回实际的处理程序:

function makeSearchHandler(searchBox) {
    return function() {

        deleteAllMarkers();

        let places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }

        // For each place, get the icon, name and location.
        let bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {

            // // Create a marker for each place.
            let newMarker = createMarker(place.geometry.location, place.name, markerLabels.nextSymbol(), true);
            markerLib.trackMarker(newMarker);

            newMarker.setMap(map);

            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            }
            else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);
    };
}

该函数包含原始代码，但不是直接引用 startSearchBox 或 endSearchBox，而是使用传递给工厂的参数。因此，返回的函数将像您的函数一样工作，但代码只出现一次。

然后您可以使用该函数创建回调:

startSearchBox.addListener('places_changed', makeSearchHandler(startSearchBox));
endSearchBox.addListener('places_changed', makeSearchHandler(endSearchBox));