什么是AngularJS中的有状态过滤?

时间:2014-09-16 20:18:29

标签: javascript angularjs filter

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

该描述如下:

  

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

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

1 个答案:

答案 0 :(得分:67)

"状态"指的是在整个应用程序中设置的变量/属性/ etc。这些值有可能在任何给定时间发生变化。文档说过滤器不应该依赖外部"状态"。过滤器需要知道的任何内容都应该在过滤时作为参数传递,然后过滤器应该具有进行过滤所需的一切并返回结果查看文档中的演示并且您将看到"有状态"过滤器,过滤器依赖于它用于进行过滤的服务。该服务值可能会在$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不是返回随机值的函数,每次返回不同数字的唯一方法是它是否根据隐藏状态执行不同(内部更改,而不是传入作为一个论点)。给定相同参数的函数每次返回相同的想法被称为&#34;幂等&#34;。

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