什么是 AngularJS 中的有状态过滤? [英] What is stateful filtering in AngularJS?

问题描述

我正在阅读关于过滤器部分的 AngularJS 开发人员指南 (https://docs.angularjs.org/guide/filter#stateful-filters) 并遇到了状态过滤器".

I was reading the AngularJS developer guide on the Filter section (https://docs.angularjs.org/guide/filter#stateful-filters) and came across "Stateful Filters".

本说明如下:

强烈建议不要编写有状态的过滤器，因为 Angular 无法优化这些过滤器的执行，这通常会导致性能问题.许多有状态过滤器可以转换为无状态过滤器，只需将隐藏状态作为模型公开并将其转换为过滤器的参数即可.

It is strongly discouraged to write filters that are stateful, because the execution of those can't be optimized by Angular, which often leads to performance issues. Many stateful filters can be converted into stateless filters just by exposing the hidden state as a model and turning it into an argument for the filter.

我是 Web 开发的新手，所以不知道什么是有状态过滤，Angular 文档也没有解释它:( 有人可以解释一下普通过滤器和有状态过滤器之间的区别是什么吗?

I'm new to web development, so have no idea what Stateful filtering is, and Angular Documentation didn't explain it either :( Can someone please explain what is the difference between a normal filter and a stateful filter is?

推荐答案

State"是指在整个应用程序中设置的变量/属性/等.这些值有可能在任何给定时间发生变化.文档说过滤器不应该依赖于外部状态".过滤器需要知道的任何事情都应该在过滤时作为参数传入，然后过滤器应该拥有执行过滤所需的一切并返回结果查看文档中的演示，您将在"stateful"过滤器，过滤器依赖于它用来进行过滤的服务.该服务值可能会在 $digest 循环期间发生变化，因此必须在过滤器上设置 $stateful 属性，以便 Angular 再次运行过滤器以确保依赖没有改变状态，这改变了过滤器的结果.

"State" is referring to variables/properties/etc that are set throughout the application. These values have the potential to change at any given time. The docs are saying that the filter shouldn't depend on external "state". Anything the filter needs to know about should be passed in as an argument when filtering, and the filter should then have everything it needs to do the filtering and return the result Look over the demo in the docs and you'll see that in the "stateful" filter, the filter has a dependency on a service which it uses to do the filtering. That service value could change during a $digest cycle, so the $stateful property has to be set on the filter so that Angular will run the filter again to be sure that dependency hasn't changed state, this changing the filter's result.

所以，所有的状态"都应该在参数中，就像这样:

So, all "state" should be in the arguments, like this:

<p>{{myData | multiplyBy:multiplier}}</p>

使用如下过滤器:

.filter('multiplyBy', function() {
  function filter(input, multiplier) {
    return input * multiplier;
  }
  return filter;
})

如果数据或参数发生变化，过滤器将再次运行.

If the data or arguments change, the filter will run again.

stateful 版本应该是这样的(不推荐！):

The stateful version would be something like this (not recommended!):

<p>{{myData | myFilter}}</p>

过滤器从外部来源获取所需信息:

And the filter gets it's needed information from external sources:

.filter('myFilter', ['someDependency', function(someDependency) {
  function filter(input) {
    // let's just say `someDependency = {multiplier: 3}`
    return input * someDependency.multiplier;
  }
  filter.$stateful = true;
  return filter;
}])

在该示例过滤器中，someDependency.multiplier 应该作为参数传入过滤器(如第一个示例中)，而不是作为过滤器的依赖项.

In that sample filter, someDependency.multiplier should have been passed in as an argument to the filter (as in the first example), rather than being a dependency of the filter.

进一步澄清问题:如果你调用这样的函数:foo(20) 并得到 40 的结果，你应该得到相同的结果，如果你重复这个过程.如果你再次调用 foo(20) 并得到 92，那会相当混乱，对吧?假设 foo 不是一个返回随机值的函数，它每次返回不同数字的唯一方法是它是否基于隐藏状态执行不同的操作(内部发生变化，而不是被作为参数传入).函数每次给定相同的参数都会返回相同的想法被称为幂等".

To further clarify the problem: If you called a function like this: foo(20) and get a result of 40, you should get the same result if you repeat the process. If you called foo(20) again and got 92, that would be rather confusing, right? Assuming foo isn't a function that is made to return random values, the only way it could return different numbers each time is if it performs differently based on a hidden state (something changing internally, rather than being passed in as an argument). The idea that the function would return the same each time given the same arguments is called being "idempotent".

注意:$stateful 似乎是 Angular 1.3 中的新内容

Note: $stateful seems to be new in Angular 1.3

这篇关于什么是 AngularJS 中的有状态过滤?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！