AngularJS中的状态过滤是什么

What is stateful filtering in AngularJS?

本文关键字：过滤 是什么 状态 AngularJS      更新时间：2023-09-26

我正在阅读Filter部分的AngularJS开发人员指南(https://docs.angularjs.org/guide/filter#stateful-过滤器），并遇到了"Stateful filters"。

该描述如下：

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

我是web开发的新手，所以不知道什么是有状态过滤，Angular Documentation也没有解释：（有人能解释一下普通过滤器和有状态过滤器之间的区别吗？

"State"指的是在整个应用程序中设置的变量/属性等。这些值有可能在任何给定时间发生变化。文档说过滤器不应该依赖于外部"状态"。过滤器需要了解的任何信息都应该在过滤时作为参数传递，然后过滤器应该拥有进行过滤所需的一切并返回结果。查看文档中的演示，你会发现在"有状态"过滤器中，过滤器依赖于用于进行过滤的服务。该服务值可能在$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中似乎是新的

相关文章：