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

在全局命名空间中设置AngularJS应用程序i.t.o的正确方法?,angularjs,global,Angularjs,Global,我继承了另一个开发者开发的AngularJS应用程序。我现在要进一步开发和支持这个应用程序 我立即注意到的一件事是,他声明应用程序和控制器的方式,没有使用IIFE(立即调用函数表达式)语法,也没有将应用程序和模块分配给变量 他用以下格式声明了一切: 应用程序模块: 'use strict'; angular .module('app', [ 'ngCookies', 'ngResource', 'ngRoute', 'ngTouch', 'ngSan

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

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

他用以下格式声明了一切:

应用程序模块:

'use strict';

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

}]);
'use strict';

angular.module('app')

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


 }]);
(function () {

  'use strict';

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

})();
var app = angular.module('app', [

    "ngMessages",
    "ngResource",

]);
控制器示例:

'use strict';

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

}]);
'use strict';

angular.module('app')

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


 }]);
(function () {

  'use strict';

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

})();
var app = angular.module('app', [

    "ngMessages",
    "ngResource",

]);
而不是像这样使用(iLife):

'use strict';

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

}]);
'use strict';

angular.module('app')

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


 }]);
(function () {

  'use strict';

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

})();
var app = angular.module('app', [

    "ngMessages",
    "ngResource",

]);
或此:

'use strict';

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

}]);
'use strict';

angular.module('app')

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


 }]);
(function () {

  'use strict';

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

})();
var app = angular.module('app', [

    "ngMessages",
    "ngResource",

]);
以前的开发人员使用的方法是否可能会使用冲突变量等弄脏全局命名空间?

据我所知,iLife非常有用,建议使用iLife的原因如下:

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


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

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

更新

或者,您可以使用如下后处理器:

大口喝:


grunt:

在上面的代码中,没有任何东西泄漏到全局名称空间(在任何情况下泄漏的
angular
global除外)。没有像
app
这样的命名函数或临时变量

Angular提供了
Angular.module
方法链接和内联数组注释,完全允许舒适的开发,无需IIFEs或捆绑系统

如果需要定义出厂函数以外的变量(这是
常量
服务的情况),则应使用IIFE:

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

对于高度模块化的应用程序(每个文件一个角度模块),可以去掉
Angular.module('moduleName')
module getter,并依赖角度模块进行依赖性处理,这允许在加载或绑定文件时不保持模块顺序。这也符合实际情况。

嗨,我不明白你的回答。问题是,;以前的开发人员使用的方法是否会使用冲突变量等潜在地弄脏全局命名空间。我提到了两种可以自动将所有库包装在IIFEThanks中的方法,我现在理解了您的回答:)。谢谢你的链接。一些问题;我列出的前一个开发人员的示例只是概要。如果有多个控制器不在IIFE中且具有相同的变量名,会发生什么情况?那么,在全局名称空间中是否存在变量重写其他变量的可能性?示例:var a=2(在名为newCtrl的控制器中)和var a=4(在名为oldCtrl的控制器中)。或者,变量是否会自动绑定到其特定的控制器?这些变量不在全局范围内。它们在功能范围内。这就是IIFE所利用的JS函数的质量(IIFE代表立即调用的函数表达式,对吗?)。变量从函数范围泄漏到全局命名空间的唯一方法是定义为
window
property。我理解使用IIFE防止变量泄漏的重要性,但如果不使用IIFE会怎么样,这些变量仅仅包含在控制器函数中——这些变量是否会被绑定到特定的控制器函数作用域,并且不会泄漏?是的,它们不会泄漏。不管JS引擎是控制器函数还是自动执行匿名函数,它们的行为方式都是一样的。如果没有其他函数可以防止变量泄漏,则使用IIFE(如上一个代码片段-
app
变量将泄漏)。Angular的设计方式是,单位总是在函数中定义的(值得注意的例外是
常量
,我已经提到过)。如果这个概念让你困惑的话,我建议你读一读。生活的喧嚣是有背景的。IIFEs(或更好的模块化系统,如Webpack和Browserify)对于涉及命名函数()的样式是必需的。对于上面显示的样式来说是多余的(将其视为普通的角度样式)。