JavaScript Globals 替代品

Question

我正在使用一个框架（流星，但我猜的问题并不重要），它提供了单独的功能..

我的问题是我意识到我正在使用越来越多的全局变量以使它们在这些函数之间可访问。例如 ma​​p 对象：

Meteor.startup(function () {
  map = L.map('map_canvas').locate({setView: true, maxZoom: 21});
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
});

我需要在任何地方访问 ma​​p 来操作我的地图（使用 Leaflet） 例如：

Template.messages.events({
  'click .delete-message': function (e,t) {
    e.stopPropagation();
    removeItem(e.target.id);
  },
  'click .message': function (e,t) {
    console.log('event clicked');
    map.setView([e.target.getAttribute('data-lat'),e.target.getAttribute('data-lng')], 16);
  }
});

当我想创建一个我想在不同地方使用的标记对象时，我遇到了同样的问题......

是 Meteor 是以这种方式构建的，还是有更合适/干净的 JS 替代方案而不是使东西全球化？

编辑感谢您的回答，您能否添加一个代码示例，例如使用您提到的模式之一，但基于我的代码？这样我可以更好地理解它。

Answer 1

有很多方法可以使 js 变量和函数不是全局的。

1. 您可以将对象用作哈希映射，并使用点符号访问您的变量。该对象仍然是全局的，但至少您可以减少可能发生冲突的全局名称。
2. 您可以使用 namespace.js。
3. 您可以使用 pseudo-oo style using closures。
4. 您可以使用 coffeescript。
5. 除了 namespace.js，很多像 dojo.js 这样的框架都允许使用模块。
6. 可能还有许多其他选项。

Dojo.js 和我认为 require.js 鼓励模块化设计。 （除其他外）命名空间非常容易包含和使用，并且可以通过最少的代码更改来解决您的问题。我过去曾使用它从全局风格转向更多面向对象的风格。

选项 1，哈希图

var GKApp = new Object();
GKApp.map = blah;
GKApp.size = 1;
GKApp.doSomethingWithMap = function() {
    GKApp.map.blah();
}
// Now the only global is GKApp.
// Later, make the call. 
GKApp.doSomethingWithMap.call();

选项 3，闭包

您可以使用如下所示的纯 javascript 闭包，或者使用 dojo.js 或 require.js 将其包装在 define 中。

GKApp = function(pmap) {
    // dbg.log("GKApp constructor.");
    // You can consider the closure to 'begin' here.

    // ********************************************************
    // @private variables:
    // ********************************************************
    var map = pmap;

    /**
     * @privileged method which has access to variables in the closure.
     * These variables are not available outside of the closure.
     * An anonymous function has access to variables in the outer scope or, the closure.
     */
    this.doSomethingWithMap = function() {
        map.blah();
    };
};

// Later, instantiate an object and use it. 
var gkApp = new GKApp(map);
gkApp.doSomethingWithMap();