设置 AngularJS 应用 i.t.o 全局命名空间的正确方法?

Correct way to set up an AngularJS app i.t.o the Global Namespace?

我继承了另一个开发者开发的 AngularJS 应用程序。我现在要进一步开发和支持这个应用程序。

我立即注意到的一件事是他声明应用程序和控制器的方式,没有使用 IIFE(立即调用的函数表达式)语法,也没有将应用程序和模块分配给变量。

他按照以下格式声明了所有内容:

应用模块:

'use strict';

angular
  .module('app', [
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngTouch',
    'ngSanitize'

}]);

示例控制器:

'use strict';

angular.module('app')

  .controller('newCtrl',
    ['$scope', function($scope) {


 }]);

而不是使用这样的东西(IIFE):

(function () {

  'use strict';

   angular.module('app')
        .controller('newCtrl');

})();

或者这样:

var app = angular.module('app', [

    "ngMessages",
    "ngResource",

]);

以前的开发人员使用的方法是否会因冲突变量等而污染全局命名空间?

据我了解,IIFE 很有用,值得推荐,原因如下:

为什么?:IIFE 从全局范围中删除变量。这有助于防止变量和函数声明在全局范围内的寿命超过预期,这也有助于避免变量冲突。

为什么?:当您的代码被缩小并捆绑到一个文件中以部署到生产服务器时,您可能会发生变量冲突和许多全局变量。 IIFE 通过为每个文件提供可变范围来保护您免受这两种情况的影响。

很遗憾,没有。你无法改变这一点。也许您可以分叉 3rd 方解决方案,或者找到以适当方式编写的类似库。

更新

或者您可以像这样使用 post 个处理器:

gulp: https://www.npmjs.com/package/gulp-iife

咕噜声: https://www.npmjs.com/package/grunt-iife

在上面的代码中,没有任何内容泄漏到全局命名空间(除了 angular global,它在任何情况下都会泄漏)。没有像 app.

这样的命名函数或临时变量

Angular 提供 angular.module 方法链接和内联数组注释,以允许在没有 IIFE 或捆绑系统的情况下进行舒适的开发。

如果需要在工厂函数之外定义变量(constant 服务就是这种情况),则应使用 IIFE:

angular.module(...).constant('constant', (() => {
  var constant = ...;
  ...
  return constant;
})());

对于高度模块化的应用程序(每个文件一个 Angular 模块),可以摆脱 angular.module('moduleName') 模块 getter 并依赖 Angular 模块进行依赖处理,这允许加载或捆绑文件时不保持模块顺序。这也符合图片。