AngularJS依赖注入uglify

Question

一段时间以来，我一直在使用这种方法在我的Angulur应用程序中注入依赖项。

angular.controller('ctrlName', ['$scope', '$log', function($scope, $log) {

}]);

如您所见，我们通常会两次传递依赖关系，

• 一次排列
• 第二次在函数参数中

因此，今天我想了为什么要这样做，所以我用它搜索了一下，并在StackOverflow上阅读了一些有关它的答案，其中大多数人都说这样做是为了uglify代码。

我知道我们可以在上面的例子中做到这一点

angular.controller('ctrlName', ['$scope', '$log', function(scopeAlias, logAlias) {

}]);

但我不明白这如何使代码丑陋。 所以，我想知道，

• 以上述方式注入依赖关系如何有助于使代码丑化？
• 我为什么要丑化我的Angular代码？
• 为什么在生产过程中首选这种方法？

Answer 1

angular JS中有3种类型的依赖项注释，而您使用的一种称为Inline Array Notation （如angularJS文档中所述的首选方式）。 其他两个是$inject Property Annotation和Implicit Annotation 。

一般来说，使用隐式注释被认为是不好的做法，因为它会与任何缩小/混淆工具一起使用，因为它们会重命名其参数。

您可以参考此链接以了解有关角度依赖注入的更多信息。

内联数组注释

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

$ inject属性注释

var MyController = function($scope, greeter) {
   // ...
}

MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);

隐式注释

someModule.controller('MyController', function($scope, greeter) {
  // ...
});

为了回答您的第一个问题，使用内联数组表示法或$ inject属性表示法后，您的代码不会中断。

对于您的第二个和第三个问题，Uglification实际上意味着使用UglifyJS最小化您的代码。 最小化的好处在于，它实际上有助于减小文件大小，从而减少传输文件和带宽服务所需的时间。 这实际上有助于增加使用体验（减少加载网页的时间）并节省成本（较少的带宽意味着较少的支付费用）。

Answer 2

基本上，当您最小化代码变量，函数参数等时，将其重命名为小得多，因此这会中断角度的去离子注入，因为角度不再能够知道您已向模块/控制器/服务功能等中注入了哪些去离子。

当您像上面一样两次指定它时，您正在注释组件。 因此，这在最小化时会创建一种映射，因此该组件仍能够推断出您注入了什么。

请参阅此链接以获取良好的解释https://docs.angularjs.org/guide/di

您可能希望减少代码的大小，以减少代码的大小，并减少根据请求通过网络传输以及在浏览器中进行解析所花费的时间。 因此，在生产中，这是一件非常好的事情。 但是，您不需要在开发中执行此操作，因为它会降低速度（减少大量代码可能会花费一些时间），并且会阻碍您捕获和查看应用程序错误的能力。

Answer 3

当您通过可以使您的代码丑陋的工具运行JavaScript时，它将使您的JavaScript变量变短且难以理解。 但是，丑化过程不会修改字符串值。 这个事实使依赖性注入即使在丑化发生后也能正常工作。

丑化之后，您的代码可能是：

angular.controller('ctrlName',['$scope','$log',function(a,b){}]);

如果您的应用程序不是生产级别的应用程序，并且您不会将其丑陋，则可以完全删除字符串，而angular的DI将仅基于名称注入依赖项。

如果代码从不丑陋，这也将起作用：

angular.controller('ctrlName', function($scope, $log) {

});

Answer 4

以上述方式注入依赖关系如何有助于使代码丑化？

意识到丑化=缩小。 减少代码的第一步是用一个变量名替换一个较小的变量名。 为$ inject指定服务名称会使控制器的参数名称不相关，从而缩小不会破坏代码。

我为什么要丑化我的Angular代码？

同样，uglify =缩小。 主要原因是精简代码占用的网络空间较小。

为什么在生产过程中首选这种方法？

再次，较小的网络足迹。 当与压缩（例如GZip）结合使用时，可以节省大量资金。 斯科特·汉塞尔曼（Scott Hanselman）很好地阅读了为什么压缩是一件好事 。