我正在阅读Filter部分的AngularJS开发人员指南(https://docs.angularjs.org/guide/filter#stateful-过滤器),并遇到了"Stateful filters"。
该描述如下:
强烈建议编写有状态的过滤器,因为Angular无法优化这些过滤器的执行,这通常会导致性能问题。许多有状态过滤器可以转换为无状态过滤器,只需将隐藏状态公开为模型并将其转换为过滤器的参数即可。
我是web开发的新手,所以不知道什么是有状态过滤,Angular Documentation也没有解释:(有人能解释一下普通过滤器和有状态过滤器之间的区别吗?
$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中似乎是新的