如何将全局变量放在Globals.js模块中，并在其他模块中访问它们

Question

我觉得很傻，但我找不到如何做到这一点的好例子。我看到过一些接近目标的球，也许他们是对的，但我不知道。

1. 如何创建一个包含所有全局变量的模块
2. 我该如何导出或导入，或者我需要做什么来在另一个js模块中使用这些全局变量

我正在创建一个包含大约6个变量的小型应用程序，这些变量必须对我的应用程序具有全局作用域。有人能给我举个例子吗？

全局变量：

var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;
var entity;
var newPolygon;
var newOutline;
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var extensions = gl.getSupportedExtensions();

我在一个名为globals.js 的文件中有以上内容

    <script src="Source/globals.js"></script>
    <script src="Source/index.js"></script>
    <script src="Source/positionHandler.js"></script>
    <script src="Source/polyCreate.js"></script>
    <script src="Source/polyUpdate.js"></script>

它列在html文件中。所有这些看起来都很好，但有一个浏览器级别的变量认为这是错误的。所以现在我想确保全局变量可以按预期访问。

Globals = {
  scene:       require('scene'),
  ellipsoid:   require('ellipsoid'),
  canvas:      require('canvas')
};
module.exports = Common;

或

Globals = {
  scene:       require('viewer.scene'),
  ellipsoid:   require('scene.globe.ellipsoid'),
  canvas:      require('document.getElementById("canvas")')
};
module.exports = Common;

或

Globals = {
    scene      : viewer.scene,
    ellipsoid  : scene.globe.ellipsoid,
    canvas     : document.getElementById("canvas"),
    gl         : canvas.getContext("webgl"),
    extensions : gl.getSupportedExtensions()
};
module.exports = Common;

我不了解要求以及如何设置它。

Answer 1

在浏览器中，在函数范围之外声明的任何变量都将是全局变量（设置在窗口对象上）。确保您的'<script>'标记的顺序正确（在尝试访问全局变量之前先声明它们）。

Answer 2

这在JavaScript领域有点复杂，取决于您所说的上下文。我假设您谈论的是在浏览器（vs节点）中运行的代码，如果是这种情况，最简单的方法是使用名称间隔对象。并暗示在其他代码回复之前导入它。

例如，您可以使文件globals.js包含：

MyAppGlobals = { property1: "some-value", anotherProperty2: "other-value" };

在html中，只需确保在任何依赖全局变量的代码之前添加<script src="path/to/globals.js"></script>。

如果你想要一个更结构化的方法，可以看看像webpack这样的项目。它们很棒，但设置起来有点复杂。

基本上，webpack或browserfy可以让您编写正确的导入和导出语句（就像在node.js中一样），然后预形成依赖关系分析，并将所有需要的代码"编译"到一个捆绑文件中，然后将其包含在html中。（有点粗略的描述，但我希望它能有所帮助）