javascript AngularJS Strict DI 模式有什么好处?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33494022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 16:32:34  来源:igfitidea点击:

What is the benefit of AngularJS Strict DI mode?

javascriptangularjsdependency-injection

提问by user1995781

Recently I come across with AngularJS Strict DI mode. What is the purpose & benefit of using it? Will we gain significant performance improvement by using it especially on mobile devices?

最近我遇到了 AngularJS Strict DI 模式。使用它的目的和好处是什么?通过在移动设备上使用它,我们会获得显着的性能改进吗?

I try to apply it to my code and I did not do any annotation when writing the code. However, I have my code to be minify, and ng-annotate during build. But why is that after I add Strict DI mode to my code I still get the error saying "Explicit annotation required"?

我尝试将它应用到我的代码中,并且在编写代码时没有做任何注释。但是,我有我的代码要缩小,并在构建过程中进行 ng-annotate。但是为什么在我将 Strict DI 模式添加到我的代码后,我仍然收到“需要显式注释”的错误消息?

回答by morels

Strict DI Mode basically throws errors when, at run time, it is found a piece of code that is not compliant to minification; but note that the code may be right and without logical-syntactical errors.

Strict DI Mode 基本上会在运行时发现一段不符合缩小要求的代码时抛出错误;但请注意,代码可能是正确的,并且没有逻辑语法错误。

Citing the documentation:

引用文档:

if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation(and are thus unsuitable for minification), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs.

如果 app 元素上存在此属性,则注入器将在“strict-di”模式下创建。这意味着应用程序将无法调用不使用显式函数注释的函数(因此不适合缩小),如依赖注入指南中所述,并且有用的调试信息将有助于追踪这些错误的根源。

For example this code triggers an error because ($scope, $http, $filter)are not explicitly injected using $injector giving to the .controller(A,B)method an array as second field.

例如,此代码会触发错误,因为($scope, $http, $filter)没有使用$inject.controller(A,B)将数组作为第二个字段显式注入该方法。

angular.module("myApp", [])
// BadController cannot be invoked, because
// the dependencies to be injected are not
// explicitly listed.
.controller("BadController", function($scope, $http, $filter) {
  // ...
});

Right snippet:

正确的片段:

angular.module("myApp", [])
  .controller("GoodController1", GoodController1);

GoodController1.$inject = ["$scope", "$http", "$filter"];

function GoodController1($scope, $http, $filter){}

or:

或者:

angular.module("myApp", [])
  .controller("GoodController1", 
              ["$scope", "$http", "$filter", function ($scope, $http, $filter){
     //...
}]);

In order to answer at your question there is no significant performance improvement by using it. It only grant to you the minifiability error safeness. This because minification changes variables names breaking your code when for example you use $scopewithout explicit annotation.

为了回答您的问题,使用它没有显着的性能改进。它只授予您可缩小错误的安全性。这是因为,例如,当您在$scope没有显式注释的情况下使用时,缩小会更改破坏您代码的变量名称。

回答by Olavi Sau

Angular strict DI enforces code minifyability.

Angular 严格 DI 强制执行代码可缩小性。

When your code is minified the names of the parameters are shortened, which breaks angular's DI. To counter that problem angular has added two(maybe more now) alternative ways to add dependency's.

当您的代码被缩小时,参数的名称会缩短,这会破坏 angular 的 DI。为了解决这个问题,angular 添加了两种(现在可能更多)替代方法来添加依赖项。

Perhaps the most common way and the one used by ng-annotate is placing an array instead of an function as the second parameter. The dependency's are the string's before the last element in the array, the string's are the dependency names.

也许最常见的方法和 ng-annotate 使用的方法是放置一个数组而不是一个函数作为第二个参数。依赖项是数组中最后一个元素之前的字符串,字符串是依赖项名称。

controller.$inject(['$scope']);

angular.module('app', ['dependency']).controller('myCtrl', ['myFirstDep',
function(willBeInjectedHere){}])

Your ng-annotate is probably not running before angular does it's checks. Make sure you are NOT running uglify together with annotate, do it explicitly BEFORE. If your code is throwing error, then most likely there is somewhere that the annotation was not made.

您的 ng-annotate 在 angular 进行检查之前可能没有运行。确保您没有将 uglify 与 annotate 一起运行,在此之前明确执行。如果您的代码抛出错误,那么很可能是某处未进行注释。

回答by Milean

You can also add strict-di like this:

您还可以像这样添加 strict-di:

 angular.bootstrap(document, ['app'], {
        strictDi: true
    });

when using angular meteor es6 type applications.

使用角流星 es6 类型应用程序时。

回答by Milean

Good practice is using strict-di. App must fail to run when invoke functions that don't use explicit function annotation. This means that the methods used must be declared. Using the ng-strict-diwill ensure that app is confirming with dependency injection guideline and will fail to run if not.

好的做法是使用strict-di. 调用不使用显式函数注释的函数时,应用程序必须无法运行。这意味着必须声明使用的方法。使用ng-strict-di将确保应用程序正在确认依赖注入指南,否则将无法运行。

You can achieve that by using ng-strict-di:

您可以通过使用ng-strict-di

<html ng-app="myApp" ng-strict-di>

See developer guide: https://docs.angularjs.org/guide/di

请参阅开发人员指南:https: //docs.angularjs.org/guide/di