Question

我最近开始使用angular，我正在编写我的第一个控制器之一：

'use strict';
angular
  .module('stakeholder')
  .controller('StakeholderViewController', ['$scope','stakeholderViewFactory',
  function($scope, stakeholderViewFactory) {
    $scope.users = [];

    var loadUsersTable = (function(){
        stakeholderViewFactory.getAccessUsers({stakeholderId: 3}).
                  success(function(data, status, headers, config) {
                    $scope.users = data;
                  }).
                  error(function(data, status, headers, config) {
                    //TODO: Alert
                });
            })();

  }
]);

问题是我需要loadUsersTable在页面加载时执行，我认为使用inmmediatly调用的函数可能是最好和最清晰的选项，但我可以闻到，这不是一个好的举动，因为某些原因我不知道。

也许最好的选择是这样的，尽管你必须写更多：

'use strict';
angular
  .module('stakeholder')
  .controller('StakeholderViewController',   ['$scope','stakeholderViewFactory',
  function($scope, stakeholderViewFactory) {
    $scope.users = [];

    var loadUsersTable = function(){
        stakeholderViewFactory.getAccessUsers({stakeholderId: 3}).
                  success(function(data, status, headers, config) {
                    $scope.users = data;
                  }).
                  error(function(data, status, headers, config) {
                    //TODO: Alert
                });
            };
     loadUsersTable();

  }
]);

有人能指出我写这个的最佳做法吗？

谢谢！

Answer 1

立即执行的函数是设计模式（Javascript Module Pattern），主要用于避免泄漏变量和私有进入外部范围（函数范围，不是一个角度范围，只是为了清楚）。在这种情况下，您已经具有控制器功能范围，因此您不需要此语法。

我遇到的一个最佳实践是使用初始化函数，该函数在控制器的末尾调用。

<强>优点：

函数名init清楚地表达它的作用：在控制器的初始化时运行;
您可以清楚地看到所有被调用的函数。
您可以根据需要保留代码排序，例如按功能分组。

在你的情况下，它看起来像：

'use strict';
angular
  .module('stakeholder')
  .controller('StakeholderViewController',   ['$scope','stakeholderViewFactory',
  function($scope, stakeholderViewFactory) {
    var loadUsersTable;
    $scope.users = [];


    function init(){
        loadUsersTable();
    };

    loadUsersTable = function(){
        stakeholderViewFactory.getAccessUsers({stakeholderId: 3}).
            success(function(data, status, headers, config) {
                $scope.users = data;
            }).
            error(function(data, status, headers, config) {
                //TODO: Alert
            }
        );
    };

    init();
  }
]);

Answer 2

您不需要其他功能范围，IIFE在此处不添加任何内容。只需将代码直接放在函数中：

'use strict';
angular
  .module('stakeholder')
  .controller('StakeholderViewController', ['$scope','stakeholderViewFactory',
  function($scope, stakeholderViewFactory) {
    $scope.users = [];

    stakeholderViewFactory.getAccessUsers({stakeholderId: 3}).
      success(function(data, status, headers, config) {
        $scope.users = data;
      }).
      error(function(data, status, headers, config) {
        //TODO: Alert
      });

  }
]);

Answer 3

立即调用的函数与AngularJS没有任何绑定！它是一种JavaScript模式，取决于您是否需要它。

检查一些文章：

Answer 4

IIFE是最佳做法，因为它可以防止向全局范围添加变量以防止变量和函数冲突。您的问题涉及将IIFE放入控制器中。将IIFE放在控制器中并不是真的有帮助，因为你的控制器无论如何都没有添加到全局范围，你不应该在控制器中添加许多变量或功能，因此发生碰撞的可能性非常大小。

您可以使用IIFE来包装您的控制器，工厂，指令作为一种良好的做法，因为它们会阻止添加到全局范围。例如，StakeholderViewController函数不会被添加到全局范围：

(function() {
    'use strict';

    angular
        .module('stakeholder')
        .controller('StakeholderViewController', ['$scope','stakeholderViewFactory', StakeholderViewController]);


    function StakeholderViewController($scope, stakeholderViewFactory) {
    }

}();

John Papa's style guide中有一些很好的信息。

在Angular Controller中立即调用函数，这是一个好习惯吗？

4 个答案: