devbox
数据结构灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   jquery > 正文

Angular中方括号使用的目的是什么？

作者：数据结构灵魂 | 2023-02-15 19:06:06

赞

踩

javascript,angularjs,注入,安全,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

我想了解声明MyOtherService和之间的区别MyOtherComplexService.特别是方括号部分的目的是什么？何时使用它们何时不使用？

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

myapp.factory('MyService', function($rootScope, $timeout) {
    return {
        foo: function() {
            return "MyService";
        }
    }
});

myapp.factory('MyOtherService', function($rootScope, $timeout, MyService) {
    return {
        foo: function() {
            return "MyOtherService";
        }
    }
});

myapp.factory('MyOtherComplexService', ['$rootScope', '$timeout', 'MyService', function($rootScope, $timeout, MyService) {
    return {
        foo: function() {
            return "MyOtherComplexService";
        }
    } 
}]);

myapp.controller('MyController', function($scope, MyOtherService, MyOtherComplexService) {

    $scope.x = MyOtherService.foo();
    $scope.y = MyOtherComplexService.foo(); 
});

Ufuk Hacıoğu.. 34

它使AngularJS代码缩小.AngularJS使用参数名称将值注入控制器函数.在JavaScript缩小过程中,这些参数将重命名为较短的字符串.通过告诉使用字符串数组向函数注入哪些参数,AngularJS仍然可以在重命名参数时注入正确的值.



1> Ufuk Hacıoğu..：

它使AngularJS代码缩小.AngularJS使用参数名称将值注入控制器函数.在JavaScript缩小过程中,这些参数将重命名为较短的字符串.通过告诉使用字符串数组向函数注入哪些参数,AngularJS仍然可以在重命名参数时注入正确的值.



2> Stephan Bönn..：

添加到Ufuk的答案:

ngmin - 将您的标准模块编译为最小安全模块

Angular的最小安全方括号表示法不太方便,因为您必须键入每个依赖项两次并且参数顺序很重要.有一个名为ngmin的工具可以将标准模块编译为最小安全模块,因此您无需手动管理所有这些操作.

Angular + CoffeeScript

如果您使用CoffeeScript,情况会更糟.您可以在ngmin之间进行选择,这会破坏您的源地图,或者如果您想自己写出来,则必须用方括号包装整个代码,这非常难看.

angular.module('whatever').controller 'MyCtrl', ['$scope', '$http' , ($scope, $http) ->
  # wrapped code
]

在我看来,这不是CoffeeScript的缺陷,而是Angular团队的糟糕设计决策,因为它违背了所有JS/CoffeeScript约定而不是将函数作为最后一个参数.足够的咆哮,这是一个小帮手功能来解决它​​:

deps = (deps, fn) ->
  deps.push fn
  deps

这是一个非常简单的函数,它接受两个参数.第一个是包含依赖项的字符串数组,第二个是模块的函数.您可以像这样使用它:

angular.module('whatever').controller 'MyCtrl', deps ['$scope', '$http'] , ($scope, $http) ->
  # unwrapped code \o/



3> Zanon..：

只是为了举例说明已经说过的内容,如果使用以下语法:

myapp.factory('MyService', function($scope, $http, MyService) { ... });

大多数JS minifiers会将其改为:

myapp.factory('MyService', function(a, b, c) { ... });

因为函数参数名称通常可以重命名为较短的名称.这将打破Angular代码.

在Angular中,为了使代码在所有minifiers中都可以缩小,可以使用括号语法:

myapp.factory('MyService', ['$scope', '$http', 'MyService', function($scope, $http, MyService) { ... }]);

将被缩小为:

myapp.factory('MyService', ['$scope', '$http', 'MyService', function(a, b, c) { ... }]);

请注意,缩小器不会触及字符串,因此Angular将按顺序查看缩小的代码和匹配参数:

$scope    = a
$http     = b
MyService = c

要避免这种丑陋的方括号语法,您应该使用像ng-annotate这样的智能缩小器.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/jquery/detail/13231
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号