使用命名函数或将它们放在范围内

Using named functions or putting them inside scope

本文关键字：范围内 函数      更新时间：2023-09-26

我有一个很大的 Angular 指令代码库，我一直在声明这样的函数：

$scope.doFoo = function() { ... };

因为我认为 Angular 可以在需要时管理/释放功能(不太确定我在哪里读到的(。

无论如何，我的项目的一位贡献者告诉我，他认为这不是真的。将函数声明为范围变量或仅将它们声明为普通函数之间有什么区别，如下所示：

function doFoo() { ... };

我应该使用哪一个？

使用前一种方法，很容易将范围与视图可能不需要的函数(例如控制器内的实用程序/帮助程序函数(混为一谈。我认为在顶部有一个视图使用的函数/变量列表并分配给范围是合乎逻辑的。即：

$scope.doFoo = doFoo;

然后，在文件底部，您可以组织函数。即：

function doFoo() { ... ]

如果不执行$scope.doFoo，您将无法在模板中使用doFoo(例如<div ng-click="doFoo()">(。

这样，如果doFoo()需要使用一些帮助程序函数，您可以在控制器中的某个位置声明该函数，而不会通过添加它来弄乱范围。

我更喜欢使用控制器作为语法，并将vm绑定到this，但这是另一回事。(可以在此处阅读有关该样式首选项的信息。

Zack Tanner的回答是正确的(而且简洁！(，但这里有一些补充信息也可能对你有所帮助。

首先，以下是我们可以同意的一些条款：

函数声明 

function doFoo() {
  //...
}

这在当前函数作用域内声明了一个函数(闭包(

函数表达式

$scope.doFoo = function() {
  //...
}

这将函数声明为属于对象

那么有什么区别，你为什么要关心？ 以下是Zack Tanner在行动中的解释：

angular.module("myModule").controller(["$scope", function($scope) {
  var self = this;
  $scope.doFoo = doFoo;
  $scope.doBar = doBar;
  ////Implementation////
  function doFoo() {
    // do foo stuff
  }
  function doBar() {
    // do bar stuff
  }
}]);

首先，这可能是公然(并且理所当然地(从C/C++或John Papa编程的智慧中窃取的。 在任何一种情况下，这都有效(如果您在控制器中的注释之前放置一个return甚至会起作用(是因为功能提升。 基本上，它归结为一个简单的规则：函数声明将始终"提升"到它们声明的范围的顶部。 var iables也是如此！

为了直接回答您的问题，我不知道 Angular 发布或管理功能的能力(我怀疑它有？(，但在这种情况下，声明您的函数并将它们分配给您的$scope确实值得。 此外，"控制器作为"语法确实很棒，所以如果可能的话，请考虑使用它(没有$scope，加上原型链没有怪异！

博士使用function doFoo() { //... }

绑定到$scope或控制器(通过 controllerAs(的任何函数(方法？(都将在它们附加到的视图上可用。以更传统方式命名function doFoo() { ... }的函数只能在其各自的(词汇(范围内访问(无论是控制器、服务、指令等(。基本上，$scope允许您在其词法范围之外使用函数(澄清一下，$scope是控制器/指令的词法范围之外可用的对象，就像在服务中声明函数一样，除非将它们附加到返回的对象，否则您不能在其他地方使用它们(。

每个在应用程序中都有自己的位置，这实际上取决于您希望如何使用该功能。

是的，有一个合理的区别，你只需要将函数绑定到视图中使用的范围。没有必要用视图中从未使用过的东西来污染范围。

一个常见的风格指南最佳实践也是在作用域声明下声明函数，以便更轻松地查看作用域中包含的内容

例：

// show all the scope related stuff at top of component
$scope.foo = foo;// reference to function below    
// all the business stuff at bottom of component
function foo(){}//used in view
function bar(){} // only used as utility in controller

良好参考：John Papa Angular 风格指南

相关文章：