为什么在 angularJS 中设置应用程序变量是“不好的做法”？

Question

我查看了许多 angularJS 教程和样式指南，发现了这样的 cmets (from Todd Motto)

Bad:
var app = angular.module('app', []);
app.controller();
app.factory();

Good:
angular
  .module('app', [])
  .controller()
  .factory();

我首先通过示例学习了“坏”技术，后来看到一些参考资料（除了这个）说“坏”技术......非常糟糕。

到目前为止，在我的搜索中没有人说为什么它不好？

编辑： 为什么这个问题不同？ 虽然此问题与建议的重复问题之间存在细微差别，但有两个重要区别：

1. '最佳实践是什么？'与“为什么不好？”不同......虽然对另一个问题的公认答案详细说明了“为什么”，但具有相同答案的两个问题不足以被标记为重复。

   李>

2. 使用我放置在此问题标题中的确切文本进行了有力的搜索，但并未发现建议的重复项。也许 SE 应该考虑允许将“可选标题”添加到问题中以增强可搜索性……但该功能还没有到位，并且与我提出相同问题的其他人仍然找不到其他问题。

Answer 1

全局变量通常被认为是不好的做法，尽管angular 本身就是一个全局变量，所以我认为，只要您保持一致，老实说，这并不是什么大问题。 /p>

如果你不小心做了这样的事情，就会出现问题：

app = angular.module("app");
// some other file
app = somethingNotAnAngularModule();

外部库可能会覆盖变量app等。

除了使用名称 app，您还可以使用特定于您的应用的名称...

dustrModule = angular.module("dustr", []);

---

链接是一回事，但如果您要将组件拆分为单独的文件，您始终可以使用.module

获取模块

// app.js
angular.module("app", []);

// LoginCtrl.js
angular.module("app").controller("LoginCtrl", LoginCtrl);

Answer 2

不使用var module = angular.module('foo', []); 然后使用变量的全部意义纯粹是固执己见。这样做 IMO 并没有什么坏处，尤其是如果你将它与 browserify 结合起来并这样做：

foo/FooModule.js:

var ng = require('angular');

module.exports = ng.module('Foo', []);

foo/FooController.js:

var FooModule = require('foo/FooModule');

function FooController() {
    this.bar = 'bar';
}

FooModule.controller('FooController', FooController);

module.exports = FooController;

foo/FooRoutes.js：

var Router = require('base/Router');
var FooController = require('foo/FooController');

function initialize() {
    Router.route('/foo', 'FooController as foo');
}

module.exports = initialize;

main.js：

var FooRoutes = require('foo/FooRoutes');

FooRoutes();

---

嗯，比这更重要的是在定义这些控制器和工厂时不要使用匿名函数。

所以你会

function MyCtrl($dep1) { ... }
function MyFactory() { ...}

然后

angular.module()
    .controller('my', ['$dep1', MyCtrl])
    .factory('fac', MyFactory);

这样你就可以将实际代码与 Angular 依赖注入和声明分开，并将所有 AngularJS 的东西放在一个地方。

有些人告诉您第一种方法不好的原因是因为您将“Angular 的东西”分散在各处，必须扫描整个代码才能找到真正的“东西”。

还可以尝试使用立即调用函数表达式 (IIFE) 来封装所有这些代码：

(function(){ /* code */ }());