调用一个从 AngularJS 表达式本地计算值的函数是不是很糟糕? [英] Is it very bad to call a function that locally computes a value from an AngularJS expression?

问题描述

我已经阅读了一篇关于使用范围的一些 AngularJS 陷阱的文章，它指出你不应该在表达式中使用函数，我知道每次框架认为需要时都可能对表达式进行评估(这可能会发生很多)并且调用昂贵的函数会效率低下一遍又一遍.但是，如果该函数只根据已经加载到作用域中的值进行一些计算呢?例如，假设我有一个具有 3 个不同属性的范围，并且某些状态由这些属性值的组合决定.我可以在函数中计算该状态:

I've read an article on some AngularJS pitfalls using scopes, and it states that you should not use a function in expressions, and I understand that an expression may be evaluated every time the framework think it's needed (and that can happen a lot) and it would be inefficient to call an expensive function over and over. But, what if that function only does some computation based on values already loaded into the scope? For instance, suppose I have a scope with 3 different properties, and some state is determined by the combination of those properties' values. I can calculate that state in a function:

$scope.state = function() {
    return prop1 && prop2 && prop3;
};

并从表达式中调用该函数.另一种方法是在每次更改每个属性时调用该函数，以便缓存状态值:

and call that function from an expression. The alternative would be to call the function every time each of the properties is changed so that the state value is cached:

$scope.prop1 = someValue;
$scope.state = getState();
...
$scope.prop2 = someOtherValue;
$scope.state = getState();
...
$scope.prop3 = yetAnotherValue;
$scope.state = getState();

在这种情况下直接从表达式调用函数真的有那么糟糕吗?如果是这样，缓存计算值的唯一替代方法是可能在许多不同的地方，还是我缺少其他方法?

Is it really that bad to call a function directly from an expression in such a case? If so, is the only alternative to cache the computed value, potentially in many different places or is there some another approach I'm missing?

推荐答案

不，没那么糟糕.

不在表达式中使用函数会导致 HTML 因内联 javascript 而膨胀.

Not using functions in expressions would result in HTML bloated with inline javascript.

考虑一下这段代码的优雅:

<span ng-show="(form.firstName.$dirty || submitted) && form.firstName.$error.required">First name is required!</span>
...
<span ng-show="(form.lastName.$dirty || submitted) && form.lastName.$error.required">Last name is required!</span>
...
<span ng-show="(form.email.$dirty || submitted) && form.email.$error.required">Email is required!</span>

与此相反:

<span ng-show="isInvalid('firstName')">First name is required!</span>
...
<span ng-show="isInvalid('lastName')">Last name is required!</span>
...
<span ng-show="isInvalid('email')">Email is required!</span>

function Ctrl($scope){
  $scope.isInvalid = function(field){
    return ($scope.form[field].$dirty || $scope.submitted) && $scope.form[field].$error.required;
  };

  $scope.submit = function(){
    $scope.submitted = true;
    // $http.post ...
  }
}

甚至 Angular 作者鼓励在表达式中使用函数.

Even Angular authors encourage using functions in expressions.

表达式中的函数在 Angular 中是受欢迎的，但有这些先见之明:

Functions in expressions are welcome in Angular, but with these forethoughts:

1. 函数应该是轻量级的"(在计算方面).
2. 给定相同的输入，函数应该返回相同的输出.
3. 函数应该是自包含的(它们不应该影响其他作用域成员)，否则它们可能会创建一个 $digest 循环.
4. 函数应该是可缓存的(如果可能的话).

这篇关于调用一个从 AngularJS 表达式本地计算值的函数是不是很糟糕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！