javascript – 强制推迟控制器逻辑

我们正在尝试应用John Papa的AngularJS Style Guide中列出的指南.

我们开始遵循的规则之一是Defer Controller Logic：

Defer logic in a controller by delegating to services and factories.

Why?: Logic may be reused by multiple controllers when placed within a
service and exposed via a function.

Why?: Logic in a service can more easily be isolated in a unit test,
while the calling logic in the controller can be easily mocked.

Why?: Removes dependencies and hides implementation details from the
controller.

这是我们过去通过将数据检索逻辑放入控制器而不是在服务中隔离它而违反的.

现在我想尽可能严格地制定规则.理想情况下,如果其中一个配置的服务作为依赖项传递给控制器​​,我希望angular引发错误.它是否可以在角度级别上解决,或者我应该尝试单独解决它 – 例如,静态地使用自定义ESlint规则？

非常感谢任何见解或提示.

特别是,以下控制器违反了规则,因为它直接使用$http service：

function OrderController($http, $q, config, userInfo) {
    var vm = this;
    vm.checkCredit = checkCredit;
    vm.isCreditOk;

    function checkCredit() {
        var settings = {};

        return $http.get(settings)
            .then(function(data) {
               vm.isCreditOk = vm.total <= maxRemainingAmount;
            })
            .catch(function(error) {

            });
    };
}

另外,如果我对代码质量过于担心/疯狂,请告诉我:)

解决方法:

UPD(2015年6月)：eslint-plugin-angular具有内置的ng_no_services规则,该规则强制执行服务或工厂的延迟控制器逻辑.

老答案.

以下是限制函数的ESLint custom rule,该函数以Controller或Ctrl结尾,以传入任何已配置的参数：

module.exports = function (context) {

    "use strict";

    var restrictedParams = context.options[0] || [];

    var check = function (node) {
        var name = node.id && node.id.name;

        if (/(Controller|Ctrl)$/.test(name) && node.params) {
            var params = node.params.map(
                function (param) {
                    return param.name;
                }
            );

            restrictedParams.filter(function (n) {
                if (params.indexOf(n) != -1) {
                    context.report(node, "This controller function uses a restricted dependency {{param}}.", {
                        param: n
                    });
                }
            });

        }
    };

    return {
        "FunctionDeclaration": check,
        "FunctionExpression": check
    }
};

示例配置(eslint.json)：

{
  "env": {
    "browser": true,
    "node": true,
    "jasmine": true
  },
  "globals": {
    "angular": true,
    "browser": true,
    "element": true,
    "by": false,
    "inject": false
  },
  "plugins": [
    "angularjs"
  ],
  "rules": {
    "ctrl-logic": [2, ["$http"]]
  }
}

现在,假设我定义了以下控制器(违反规则)：

angular
    .module("app")
    .controller("AppController", AppController);


AppController.$inject = ["$scope", "ConnectionService", "ConfigService", "StatusService", "$http"];

function AppController($scope, ConnectionService, ConfigService, StatusService, $http) {
    ...
}

如果我运行eslint检查它将报告错误：

$grunt lint
Running "eslint:target" (eslint) task

app/app-controller.js
  8:0  error  This controller function uses a restricted dependency $http  ctrl-logic

✖ 1 problem

我可以想象有一些方法可以定义依赖关系,这种特定规则不会发现违规,但是,如果你遵循风格指南中建议的建议,它应该适合你(适合我).

标签：javascript,angularjs,angularjs-service,angularjs-controller,eslint
来源： https://codeday.me/bug/20190528/1171791.html