Question

我已经陷入了我的代码中的“舒适”区域，并且使用了这种模式但我意识到这不是最佳实践，如何在不依赖全局变量的情况下创建此函数？

  var map;
  function initialize_gmaps() {
    var myLatlng = new google.maps.LatLng(47.705786,-80.007672);

    var mapOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // To add the marker to the map, use the 'map' property
    // var marker = new google.maps.Marker({position: myLatlng,map: map,title:"Hello World!"});
  }

如您所见var map是一个全局变量。在我需要引用地图时，最好还是返回'map'var吗？这有更好的模式吗？这就是我在想的......

      function initialize_gmaps() {
        var myLatlng = new google.maps.LatLng(47.705786,-80.007672);
        var map;
        var mapOptions = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        return map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        // To add the marker to the map, use the 'map' property
        // var marker = new google.maps.Marker({position: myLatlng,map: map,title:"Hello World!"});
      }

我看到这个模式的主要问题是每次调用函数initialize_gmaps（）时我都会重新分配var map，这不是最佳的。

这种情况的更好模式是什么？在JS中是否有这种类型的模式的名称，我想这是一个常见的问题。

Answer 1

map中不需要initalize_gmaps()变量。它是一个根本不需要的临时局部变量。你可以这样做：

  function initialize_gmaps() {
    var mapOptions = {
      center: new google.maps.LatLng(47.705786,-80.007672),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  }

事实上，即使mapOptions变量也不需要，但我可以看到使用它的原因只是为了可读性（个人偏好）。但是，你甚至可以这样做：

  function initialize_gmaps() {
    return new google.maps.Map(document.getElementById("map-canvas"), {
        center: new google.maps.LatLng(47.705786,-80.007672),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  }

使用局部变量有很多有用的理由，但是像你的map变量这样的一次性使用变量，你只是立即分配和返回真的没有效用，只是为它创建了一些额外的工作interpeter。

您还可以分析为什么要多次重新创建地图？也许最好只保存您创建的初始地图并重复使用该地图，而不是每次都创建一个新地图。您必须显示更多代码的上下文（返回的地图对象的使用方式和位置），以便我们就该主题提供进一步的建议。

Answer 2

最佳做法是返回“地图”

是。但map函数中不需要本地initialize_gmaps变量。只是做

return new google.maps.Map(…);

每次调用函数initialize_gmaps（）
时，我都会重新分配var map

为什么要多次初始化地图？

您应该在将标记添加到地图的部分中为地图创建局部变量。这可能看起来像

$(function() { // assuming jQuery
    var map = initialize_gmaps();
    var marker = new google.maps.Marker({position: myLatlng,
                                         map: map,
                                         title: "Hello World!"});
    …
});

如何消除全局变量 - 常见模式

2 个答案: