Javascript 命名空间和条件包含

Question

我有一些以这种方式组织的 js 文件（请参阅source）：

• gmaps4rails.base.js：包含所有逻辑

  • gmaps4rails.googlemaps.js：包含函数

  • gmaps4rails.bing.js：包含与上一个文件同名的函数

所以基本上，base 调用 createMarkers()，这在 googlemaps 和 bing 中。

从现在开始，我只加载gmaps4rails.googlemaps.js 和gmaps4rails.googlemaps.js 中的一个，这取决于我需要的地图API，所以它工作正常。

现在我希望能够加载所有文件（并将它们分开），但当然只包含所需地图 API 的代码。

基本上我会考虑这样的事情：

if desiredApi == "googlemaps"
   include GoogleMapsNameSpace content in BaseNameSpace

提前致谢。

Answer 1

如果我理解正确，您只是希望能够根据用户选择（或其他一些标准）使用 google maps API 或 bing API 或其他 API？为此，与其尝试将正确的 API 合并到您的基础对象中，不如直接从基础对象中引用“mapService”并根据您想要的条件选择 mapService？

类似这样的：

Map = function(service, canvasId) {
    var mapService = MapServices[service];

    return {
        initialize: function() {
            var theMap = mapService.createMap();
            mapService.render(canvasId);
        }
// more functionality for your base object (that the outside world calls) goes here

    }
}

var MapServices = MapServices || {};

MapServices.google = {
  createMap: function() {},
  render: function(canvas) {
    $("#"+canvas).html("I'm a google map");
  },
  createMarker: function(args) {}
// all your map functionality goes here calling google specific functions
};

// this could be in a different js
MapServices.bing = {
  createMap: function() {},
  render: function(canvas) {
    $("#"+canvas).html("I'm a bing map");
  }, 
  createMarker: function(args) {},
// all your map functionality goes here calling bing specific functions
}

$(function() {
  var theMap = new Map("google", "theDiv");
  theMap.initialize();
});

这是你想做的吗？

希望对你有帮助

Answer 2

我认为您正在寻找某种异步加载器。 CommonJS 提出了 Modules 1.1 和 Asynchronous Module Definition (AMD) API 来做这件事。有很多异步加载器的实现，如this Google spreadsheet 中所列。其中，有一些符合 AMD 标准，例如：

• curl.js http://github.com/unscriptable/curl
• RequireJS http://requirejs.org/
• bdLoad http://bdframework.org/bdLoad

blog entry 对此话题进行了很好的讨论。

另请参阅此 SO 帖子：Namespace a dynamically loaded javascript file's contents