javascript - 为什么他们在 AngularJS 中到处传递数组？

Question

考虑来自 AngularJS by Brad Green 的这个片段.

var directives = angular.module('guthub.directives', []);

directives.directive('butterbar', ['$rootScope',
    function ($rootScope) {
        return {
            link: function (scope, element, attrs) {
                element.addClass('hide');

                $rootScope.$on('$routeChangeStart', function () {
                    element.removeClass('hide');
                });

                $rootScope.$on('$routeChangeSuccess', function () {
                    element.addClass('hide');
                });
            }
        };
    }]
);

directives.directive('focus', function () {
    return {
        link: function (scope, element, attrs) {
            element[0].focus();
        }
    };
});

请注意，对于“butterbar”指令，他传入了一个数组，其中第一项只是一个具有依赖名称 “$rootScope” 的字符串，第二项是一个函数。该函数声明了对 $rootScope 的依赖。我们为什么在这里重复自己？尤其是当似乎可以这样做时:

directives.directive('butterbar', function ($rootScope) {
    return {
        link: function (scope, element, attrs) {
            element.addClass('hide');

            $rootScope.$on('$routeChangeStart', function () {
                element.removeClass('hide');
            });

            $rootScope.$on('$routeChangeSuccess', function () {
                element.addClass('hide');
            });
        }
    };
});

我猜测作为字符串的依赖项名称具有某种意义。谁能告诉我为什么他们在整本书中都这样做(而不仅仅是为了指令)？

Answer 1

当 JavaScript 被缩小时，参数的名称通常会更改为更短的名称，例如 a。这会破坏依赖注入(inject)。

如果你使用数组，Angular 知道要注入(inject)什么以及注入(inject)到哪里。这适用于数组，因为数组的字符串元素不会被缩小修改。

在这个例子中:

app.controller('test', function( $scope, $someProvider ) {
}); 

缩小后的代码可能看起来像这样:

app.controller('test',function(a,b){}); 

这将不再有效，因为 Angular 不知道要注入(inject)什么，而有了这个:

app.controller('test', ['$scope', '$someProvider', function( $scope, $someProvider) {
}]);

缩小后的代码可能会像这样结束:

app.controller('test',['$scope','$someProvider',function(a,b) {}]);

这仍然有效，因为 Angular 仍然知道要注入(inject)什么。请参阅 Angular tutorial 中关于缩小的注释.

通常我只是在准备好生产时添加数组样式。