javascript - 在 Angular 中声明全局 app 变量是否不好？

Question

我在网上看到了很多示例，显示了以下基本 AngularJS 代码:

var app = angular.module("ExampleApp", []);  // setter, creates a new module

app.controller(...

以及同一 Angular 模块下的其他文件:

var app = angular.module("ExampleApp");  // getter, retrieves the existing module

app.service(...

这会将全局“app”变量读入内存，该变量可以通过其他文件访问。如果我去掉“getter”并直接从 app.service(....

开始，第二个文件就可以工作。

我认为不使用 getter 而是首先使用全局变量是一种不好的做法，但我想知道声明全局变量是否是一种不好的做法根本 。我的第一个想法是将每个文件包装在 IIFE 中以在本地作用域变量，或者摆脱 var app 部分并仅链接 .controller, .service 等直接放到 angular.module() 上。

预先感谢您的专业建议。

Answer 1

由于全局变量在任何地方都是可变的，因此不使用全局变量更安全且更易于维护。我通常在第一个 js 文件中创建模块:

angular.module("ExampleApp", []);

并获取每个文件而不分配给变量:

angular.module("ExampleApp")
    .service("MyService", function () {});

或

angular.module("ExampleApp")
    .component("MyComponent", {});

如果我需要一些变量，我使用函数:

(function () {
    var myController = function () {};

    myController.$inject = ["$scope"];

    angular.module("ExampleApp")
        .controller(myController);
})();

还使用像Webpack这样的 bundler 或Browserify是一个不错的选择。它们会自动为每个 js 文件创建作用域。因此，您不需要使用立即调用的函数来隐藏全局范围内的变量。例如:

var myController = require('./MyController.js');
var myApp = require('./ExampleApp.js');

myApp.controller(myController);

在这里，对于 webpack，myController 和 myApp 变量不是全局变量。简单干净...