AngularJS 中的状态过滤是啥？

Posted 2023-02-27

【中文标题】AngularJS 中的状态过滤是啥？

【英文标题】：What is stateful filtering in AngularJS?AngularJS 中的状态过滤是什么？

【发布时间】：2014-11-10 17:31:38

【问题描述】：

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

此说明如下：

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

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

【参考方案1】：

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

所以，所有的“状态”都应该在参数中，像这样：

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

使用如下过滤器：

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

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

stateful 版本是这样的（不推荐！）：

<p>myData | myFilter</p>

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

.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 应该作为参数传递给过滤器（如第一个示例中所示），而不是作为过滤器的依赖项。

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

注意：$stateful 似乎是 Angular 1.3 中的新功能

【讨论】：

我在官方文档中没有找到这个。 docs.angularjs.org/guide/migration

@guymograbi 链接就在问题的顶部。

是的 - 谢谢，我的意思是在迁移指南中。他们对此只字未提。

@m59 ***.com/questions/26848704/…

@jusopi 有点像……不确定你的措辞。 Angular 试图避免无缘无故地多次运行过滤器。如果过滤器是幂等的，Angular 可以观察被过滤的值和传递给过滤器的参数，如果它们都相同，则不需要再次运行过滤器。对于内部状态，Angular 不知道内部是否发生了变化，因此它必须在每个摘要周期再次运行过滤器，以产生 可能 与它已经拥有的结果相同的结果。我想这就是你所说的要点。