它是非常糟糕的调用在本地从AngularJS前pression计算值的函数？ [英] Is it very bad to call a function that locally computes a value from an AngularJS expression?

问题描述

我一直使用示波器一些AngularJS陷阱阅读一篇文章，并指出，你不应该使用前pressions功能，据我所知，一个前pression可能每个框架认为它需要（和可能发生很多），它的时间进行评估是低效一遍又一遍地拨打昂贵的功能。但是，如果该功能不仅基于价值观的一些计算已经加载到什么范围？例如，假设我有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;
};

和调用来自前pression该功能。另一种方法是每隔各属性的改变了，所以状态值被缓存的时间来调用函数：

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();

是不是真的那么坏，从一个前pression在这种情况下直接调用一个函数？如果是这样，是唯一的选择缓存的计算值，可能在很多不同的地方或者是有一些另一种方法，我失踪？

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?

推荐答案

没有，这不是那么糟糕。

No, it's not that bad.

不使用功能前pressions会导致HTML臃肿内嵌的JavaScript。

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

考虑的优雅的这个code的：

Consider the elegance of this code:

<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 ...
  }
}

等角度作者鼓励在EX pressions使用的功能。

Even Angular authors encourage using functions in expressions.

在EX pressions函数是角欢迎，但这些forethoughts：

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

1. 功能应该是轻（在计算方面）。


2. 函数应该给予相同的输入返回相同的输出。


3. 函数应该是独立的，（他们不应该影响其他成员的范围），因为否则他们可以创建一个$消化循环。


4. 功能应该是缓存（如果可能）。

这篇关于它是非常糟糕的调用在本地从AngularJS前pression计算值的函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！