javascript - component - ng-init

¿Qué es el filtrado de estado en AngularJS?

Question

Estaba leyendo la guía para desarrolladores de AngularJS en la sección Filtro ( https://docs.angularjs.org/guide/filter#stateful-filters ) y me encontré con "Stateful Filters".

Esta descripción se da de la siguiente manera:

Se recomienda encarecidamente que no se escriban filtros que sean estables, ya que Angular no puede optimizar la ejecución de los mismos, lo que a menudo genera problemas de rendimiento. Muchos filtros con estado se pueden convertir en filtros sin estado simplemente exponiendo el estado oculto como modelo y convirtiéndolo en un argumento para el filtro.

Soy nuevo en el desarrollo web, así que no tengo idea de qué es Stateful Filter, y Angular Documentation tampoco lo explicó :( ¿Puede alguien explicar cuál es la diferencia entre un filtro normal y un filtro con estado?

Answer 1

"Estado" se refiere a las variables / propiedades / etc que se establecen en toda la aplicación. Estos valores tienen el potencial de cambiar en cualquier momento dado. Los documentos dicen que el filtro no debe depender del "estado" externo. Todo lo que el filtro necesita saber debe pasar como un argumento al filtrar, y el filtro debe tener todo lo que necesita para filtrar y devolver el resultado. Mire la demostración en los documentos y verá eso en el " filtro "con estado", el filtro tiene una dependencia en un servicio que usa para filtrar. Ese valor de servicio podría cambiar durante un ciclo $digest , por lo que la propiedad $stateful debe establecerse en el filtro para que Angular vuelva a ejecutar el filtro para asegurarse de que la dependencia no ha cambiado de estado, lo que cambia el resultado del filtro.

Entonces, todo "estado" debería estar en los argumentos, así:

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

Con un filtro como:

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

Si los datos o argumentos cambian, el filtro se ejecutará nuevamente.

La versión con stateful sería algo como esto (¡no recomendado!):

<p>{{myData | myFilter}}</p>

Y el filtro obtiene su información necesaria de fuentes externas:

.filter(''myFilter'', [''someDependency'', function(someDependency) {
  function filter(input) {
    // let''s just say `someDependency = {multiplier: 3}`
    return input * someDependency.multiplier;
  }
  filter.$stateful = true;
  return filter;
}])

En ese filtro de muestra, someDependency.multiplier debería haberse pasado como un argumento para el filtro (como en el primer ejemplo), en lugar de ser una dependencia del filtro.

Para aclarar aún más el problema: si llamó a una función como esta: foo(20) y obtiene un resultado de 40 , obtendrá el mismo resultado si repite el proceso. Si foo(20) nuevamente y obtuvieras 92 , eso sería bastante confuso, ¿no? Suponiendo que foo no es una función creada para devolver valores aleatorios, la única forma en que podría devolver diferentes números cada vez es si funciona de forma diferente en función de un estado oculto (algo que cambia internamente, en lugar de pasar como un argumento). La idea de que la función devolvería lo mismo cada vez que se dan los mismos argumentos se llama ser "idempotente".

Nota: $stateful parece ser nuevo en Angular 1.3