在全局命名空间中设置AngularJS应用程序的正确方法是什么?

时间:2016-09-11 10:21:53

标签: angularjs global

我继承了另一位开发人员开发的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通过为每个文件提供可变范围来保护您免受这两种情况的影响。

2 个答案:

答案 0 :(得分:1)

不幸的是,没有。你无法改变这一点。也许您可以分叉第三方解决方案,或找到以适当方式编写的类似库。

<强>更新

或者你可以使用这样的后处理器:

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

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

答案 1 :(得分:1)

在上面的代码中没有泄漏到全局命名空间(除了angular全局,在任何情况下泄漏)。没有命名函数或临时变量,如app

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

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

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

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