当前位置: 首页 > 面试题库 >

AngularJS中的状态过滤是什么?

房泉
2023-03-14
问题内容

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

该描述如下:

强烈建议不要编写有状态的过滤器,因为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中似乎是新的



 类似资料:
  • 问题内容: 我知道状态允许我们创建动态和交互的组件,但是我想深入了解状态。 有人可以通过一个真实的例子来帮助我理解React中的状态吗? 问题答案: 在上面的代码中,它有一个带有:count 的对象。 状态可以简单地理解为特定组件/应用在该时间点的值。在上面的示例中,当应用首次运行时,该应用处于状态 如我们所见,有两个按钮,它们使用来更新值,它只是更新应用计数的“状态”,并且只要状态改变,应用都会

  • 我正在尝试编写一个简单的Kafka Streams应用程序(目标是Kafka 2.2/Confluent 5.2),将一个至少有一次语义的输入主题转换为一个恰好只有一次的输出流。我想对以下逻辑进行编码: 对于具有给定密钥的每条消息: (这是基于我们从上游系统获得的订购保证来保证提供正确的结果;我不想在这里做任何神奇的事情。) 起初,我以为我可以用Kafka Streams操作符来实现这一点,它可以

  • 过滤器是一种代码重用的技术,它可以转换 HTTP 请求的内容,响应,及头信息。过滤器通常不产生响应或像 servlet 那样对请求作出响应,而是修改或调整到资源的请求,修改或调整来自资源的响应。 过滤器可以作用于动态或静态内容。这章说的动态和静态内容指的是 Web 资源。 供开发人员使用的过滤器功能有如下几种类型: 在执行请求之前访问资源。 在执行请求之前处理资源的请求。 用请求对象的自定义版本包

  • 主要内容:AngularJS 过滤器,表达式中添加过滤器,AngularJS 实例,AngularJS 实例,currency 过滤器,AngularJS 实例,向指令添加过滤器,AngularJS 实例,过滤输入,AngularJS 实例,自定义过滤器,AngularJS 实例过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集

  • 问题内容: 我想要的是类似于文档中的此示例的示例,但是具有唯一的输入,可以通过“ any”,“ name”或“ phone”属性来扮演过滤的三个角色,角色的更改是通过单击锚点完成的。这是准备好的代码http://jsfiddle.net/ubugnu/QuyCU/如何动态更新ng- model属性? 的HTML JS 问题答案: 您可以定义如下:动态更改应绑定到哪个变量(另一个变量在哪里)。 参见

  • 本文向大家介绍在react中怎样改变组件状态,以及状态改变的过程是什么?相关面试题,主要包含被问及在react中怎样改变组件状态,以及状态改变的过程是什么?时的应答技巧和注意事项,需要的朋友参考一下 可以从生命周期的角度来答,对于已经挂载的组件,props 传进来后首先会调用componentWillReceiveProps,然后调用shouldComponentUpdate,若shouldCom