在Angular中声明全局app变量是不是很糟糕?

时间:2016-08-08 15:53:23

标签: javascript angularjs

我在网上看到很多例子显示以下基本的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()

提前感谢您的专业建议。

2 个答案:

答案 0 :(得分:2)

由于全局变量在任何地方都是可变的,因此不使用全局变量会更安全,更易于维护。我通常在第一个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);
})();

同样使用WebpackBrowserify等捆绑包也是不错的选择。它们会自动为每个js文件创建范围。因此,您不需要使用立即调用的函数来隐藏全局范围内的变量。例如:

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

myApp.controller(myController);

在这里,使用webpack,myControllermyApp变量不是全局变量。简单干净......

答案 1 :(得分:0)

这取决于你如何使用它有时我们需要它全局但有时不需要但是最好避免任何全局变量,这就是为什么在编写角度模块时我们将使用自调用函数来避免访问全局值。 换句话说,如果你没有太多的复杂性,你可以使用全局变量但是当你遇到一个复杂的问题时避免使用它们,因为你可能使用了几个框架,你的变量可能会与框架中的变量发生冲突很容易导致甚至无法理解为什么会发生的问题。