需要关于摆脱全局变量的建议/帮助

Question

是的，这是另一个关于全局变量的话题。我已经搜索了很多关于它们的信息。但大多数主题只是关于为什么不使用全局变量，我确信我不应该，我更想知道如何不使用它们，我仍然不确定。

我正在做一个项目，它可以创造奇迹，但我目前使用了大约 50 个全局变量，而且这个数字还在不断上升。现在我已经把东西分成了多个 .js 文件。像 load_chunks.js、load_images.js、render_map.js、player_actions.js、input.js 一样，根据它们的用途来传播功能。而且我已经把所有的全局变量都放在了 settings.js 中。

目前我使用这些全局变量的原因如下：
1.基于加载后变化不大或根本没有变化的其他一些全局变量进行计算。通过这样做一次并将其存储在全局变量中，我不再需要再次重复计算。如果我没有将它存储在（全局）变量中，Javascript 将不得不每秒进行多次计算，在某些情况下甚至每秒数千次。
2. 当很多函数都需要全局变量时。就像有这个世界变量一样，我用它来保存世界外观的数据。这个变量是一个多维数组。例如世界[y][x]。 Load_chunks.js 会向该变量添加更多数据，或者如果您移动得太远，则删除数据。在 render_map.js 中也需要这个变量来创建地图，在 player_action.js 中也需要它来查看您是否可以踩到该特定位置。
3.设置；因此，除非我在脚本中更改它们，否则变量中的数字将保持不变。我没有通过我的脚本，在长时间搜索并思考数字是什么后手动更改数字，而是将该数字放入 1 个变量中，并在我的脚本中多次调用该变量。在某些情况下，其他地方也需要这些变量。

我还想提一下，我不使用类，也许正是因为这个原因，我从来没有使用过全局变量...？

那么我该如何摆脱我的全局变量，还是不应该？ 我希望您可以向我展示或为我编写一个脚本示例（或指向它的链接），说明我应该如何做。这是我学习最快的方法。

Answer 1

我确信我不应该，我更想知道如何不使用它们，我仍然不确定。

load_chunks.js, load_images.js, render_map.js, player_actions.js, input.js, 强烈暗示程序实现，即您的架构可能有几个功能部分，并且您在这些功能之间传递数据。这就是您的全局变量的来源。

那么我该如何摆脱我的全局变量（...）

要改变这一点，您需要以基于对象或组件的方法来构建系统，即：

• 通过问题域中的对象封装数据 + 相应的功能，例如有一个 World 对象，其中包含 Avatar、Buildings、Airborne 对象等（或您的项目所涉及的任何内容）。

• 将问题域的逻辑与视图逻辑分开（例如，使用MVC architecture）

• 然后，您的项目通过本质上在视图和模型对象之间交换消息来组织视图和模型对象之间的交互。

为了促进这一点，我建议使用这些优秀的框架，或一些适合您的运行时环境的等效框架：

• requirejs - 将模块封装到全局管理的组件中
• backbonejs - 拥有高效、经过验证的模型/视图、类/对象模型（实际上是为与 REST 样式的后端一起使用而构建的，但这不是严格要求）

代码结构

通常，我构建我的应用程序，使每个对象组件/模块都有一个 .js 文件。这种意义上的模块包含类定义和相应的集合。模块由requirejs管理，类定义使用backbonejs完成。

希望你能给我看或者给我写一个脚本例子

/* define a class e.g. in someclass.js */
define(['backbone'], function($B) {
    var SomeClass = $B.Model.extend({
       // all instance variables, methods etc. follow
       someVar : value,
       someMethod : function() { ... }, 
    });
    return SomeClass;
});

/* use the class, e.g. in app.js */
require(['someclass'], function(SomeClass) {
   var instance = new SomeClass({ initial model attributes });
   var value = instance.get('attribute');
   instance.someMethod();
   ...
});

Answer 2

将变量放入函数闭包中

消除全局变量的一种常见方法是放在函数闭包内：

(function() {
     var declareYourFormerGlobalHere = 0;

     // put all code that uses the variable inside this closure
     // the variable persists for this code to use, but is not actually global
})();

以下是一些用法示例：

// example keeping track of a running count and a cached DOM element
(function() {
    var cntr = 0, obj = document.getElementById("test");
    setInterval(function() {
        ++cntr;
        if (obj.value < cntr) {
            // do something
        } else {
            // do something else
        }
    }, 1000);
})();

// example keeping track of a time of last click
(function() {
    var timeOfLastClick = 0;
    document.getElementById("run").addEventListener("click", function(e) {
        var now = new Date().getTime();
        // only process click if more than 2 seconds have passed since last click
        if (now - timeOfLastClick > 2000) {
            // OK to process the click
        }
        timeOfLastClick = now;
    });
})();

有时，您实际上可以像这样将所有代码或几乎所有代码包含在一个闭包中，并且您当前的所有全局变量都成为闭包内的局部变量，而不是实际的全局变量。 jQuery 使用这种技术来声明它使用的许多持久变量，这些变量都不是真正的全局范围。

---

使用单个命名空间对象

另一种减少全局变量数量的常用方法是使用命名空间概念。在这个概念中，您声明一个全局对象并将其他持久变量作为这个全局对象的属性。这仍然为您留下了一个全局变量，您可以在这个全局变量中拥有任意数量的属性。

var myNamepaceObject = {};
myNamespaceObject.var1 = "foo";    
myNamespaceObject.var2 = "whatever";

这种技术也被 jQuery 使用，因为 jQuery 提供的所有全局可访问的函数都可以从 jQuery 对象中获得，例如 jQuery.extend() 或 jQuery.contains()。 jQuery 公开了一个全局变量，然后许多其他全局可访问的函数可用作该单个全局对象的属性。

---

模块模式

通常所说的“模块模式”结合了上述两种技术，其中您有一个同时使用属性和闭包变量的模块变量。

var MODULE = (function () {
    var my = {},
        privateVariable = 1;

    function privateMethod() {
        // ...
    }

    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };

    return my;
}());

您可以在这些参考资料中看到对此设计模式的讨论：

JavaScript Module Pattern: In-Depth

Learning Javascript - The Module Pattern

Mastering the Module Pattern

JavaScript module pattern with example

Answer 3

我之前也遇到过同样的问题，但这是个大问题，因为我们有第三方 javascript 代码，而且我们的代码存在于客户网站中，所以我们应该找到一种方法来省略全局变量的出现，简而言之： 使用 1 个全局变量命名空间，并使所有其他变量成为它的属性：

GlobalVariable = {}
GlobalVariable.var1 = "var1"
GlobalVariable.var2 = "var2"

您还可以使其更有用并将其分组：

 GlobalVariable.helper = {}
 GlobalVariable.helper.var1 = "var1"
 GlobalVariable.helper.var2 = "var2"

因此您可以在不同的组下使用相同的名称。

如果你想完全省略它，你可以使用：

(function(document, window) {
    // all variables here is global only inside the scope
}(document, window));