javascript - 在 AngularJS 中声明工厂/服务最简洁的方法是什么？

Question

实现工厂/服务的正确/最干净的方法是什么？

我遇到了几种不同的方法来做到这一点，并思考什么是实际上最好的方法......

首先是这个方法:

(function(){
var github = function($http) {
    var getUser = function(username) {
        return $http.get("https://api.github.com/users/" + username)
            .then(function(response) {
                return response.data;
            });
    };

    var getRepos = function(user) {
        $http.get(user.repos_url)
            .then(function(response) {
                return response.data;
            });
    };

    return {
        getUser: getUser,
        getRepos: getRepos
    };
};
var module = angular.module("githubViewer");
module.factory("github", github);
}());

在最近的教程中，我正在阅读这就是使用的方法。请注意，在底部我添加了工厂及其名称，然后是函数。函数调用包含$http。根据我对(新) Angular 如何与 Controller 配合使用的理解，为了使缩小正常工作，您需要首先将 $http 作为字符串传递，然后将其用作参数。此方法不执行此操作。

接下来我将其重写为如下所示:

(function(){
var github = function($http) {
    this.getUser = function(username) {
        return $http.get("https://api.github.com/users/" + username)
            .then(function(response) {
                return response.data;
            });
    };

    this.getRepos = function(user) {
        $http.get(user.repos_url)
            .then(function(response) {
                return response.data;
            });
    };

    return {
        getUser: getUser,
        getRepos: getRepos
    };
};
var module = angular.module("githubViewer");
module.factory("github", ["$http", github($http)]);
}());

我向工厂调用添加了一组参数。运行代码，效果是一样的。我假设这将允许缩小？ (如果之前有问题的话)。将“$http”添加到实际函数本身“var github = function($http)”是否多余？因为我还删除了“$http”来看看会发生什么，它仍然按预期运行。

最后我尝试了这个:

(function(){
var module = angular.module("githubViewer");
module.factory("github",
    ["$http", function($http) {
        this.getUser = function(username) {
            return $http.get("https://api.github.com/users/" + username)
                .then(function(response) {
                    return response.data;
                });
        };

        this.getRepos = function(user) {
            $http.get(user.repos_url)
                .then(function(response) {
                    return response.data;
                });
        };

        return {
            getUser: getUser,
            getRepos: getRepos
        };
    };
]
}());

这对我来说看起来最干净。我没有传递带标签的函数，而是传递了一个匿名函数并给出了一个字符串来表示它。我运行了代码，它按预期工作。我还添加了“this”关键字，而不是将变量声明为函数。无论有没有“这个”，它仍然有效。

现在很困惑......最好的方法是什么？这些都不是最好的方法吗？ 我更喜欢使用 this.name = function 而不是 var name = function。在这方面最好的是什么？使用起来实际上更具可读性

module.factory("github"["$http", function($http)

对比

module.factory("github", github);  

或

module.factory("github", ["$http", github($http)]);"

除此之外， Controller 、服务、工厂、提供者都应该以相同的方式声明吗？

Answer 1

我个人使用以下表格:

angular.module('myApp').controller('myController', [
    '$scope', '$state', '$http',
    function ($scope, $state, $http) {
        ...
    }
]);

当您像这样声明服务/工厂/ Controller 等时，您可以避免全局范围污染，您不必将声明包装在匿名函数中，而且它还允许缩小。正如 Joe 在另一个答案中提到的，使用数组表示法是首选方式。

您在评论中提到了可读性，我个人对上述内容绝对没有任何问题，也从未有过任何提示。在某些项目中，我使用了另一种形式，由于依赖关系的数量，我将它们全部放在单独的行中:

angular.module('myApp').controller('myController', [
    '$scope',
    '$state',
    '$http',
    function ($scope, $state, $http) {
        ...
    }
]);

通过这种方式，可以很容易地看到注入(inject)的内容，但很难将其与函数的参数进行比较。但这是一个偏好问题。

在我看来，代码越少越好。如果不需要匿名函数，为什么还要使用匿名函数呢？代码越少，可读性就越高。声明一个单独的函数并将其分配给您的定义也是如此。对我来说，这让人困惑。