Che cos'è il filtro stateful in AngularJS?

Question

Stavo leggendo la guida per sviluppatori AngularJS e nella sezione Filtro (https://docs.angularjs.org/guide/filter#stateful-filters) e ho trovato "Stateful Filters".

Questa descrizione è data:

È fortemente sconsigliato per scrivere filtri che sono stateful, poiché l'esecuzione di coloro che non può essere ottimizzata angolare, che spesso porta a problemi di prestazioni. Molti filtri stateful possono essere convertiti in filtri stateless solo esponendo lo stato nascosto come modello e trasformandolo in un argomento per il filtro.

Sono nuovo di sviluppo web, in modo da avere idea di cosa Stateful filtraggio è, e la Documentazione angolare non ha spiegato neanche :(Qualcuno può spiegare qual è la differenza tra un normale filtro e un filtro stateful è?

Answer 1

"Stato" si riferisce a variabili/proprietà/etc che sono impostate in tutta l'applicazione. Questi valori hanno il potenziale per cambiare in qualsiasi momento. I documenti dicono che il filtro non dovrebbe dipendere da esterno " stato "Tutto ciò che il filtro deve sapere deve essere passato come argomento durante il filtraggio, e il filtro dovrebbe quindi avere tutto ciò che serve per fare il filtro e restituire il risultato. Guarda oltre la demo nei documenti e vedrai che nella "stat eful ", il filtro ha una dipendenza da un servizio che usa per fare il filtraggio. Tale valore di servizio potrebbe cambiare durante il ciclo $digest, pertanto la proprietà $stateful deve essere impostata sul filtro in modo che Angular esegua nuovamente il filtro per assicurarsi che la dipendenza non abbia cambiato lo stato, modificando il risultato del filtro.

Quindi, tutto "stato" dovrebbe essere negli argomenti, in questo modo:

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

Con un filtro come:

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

Se i dati o argomenti cambiano, il filtro verrà eseguito di nuovo .

La versione stateful sarebbe qualcosa di simile (non consigliato!):

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

E il filtro ottiene le sue informazioni necessarie da fonti esterne:

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

In questo filtro di esempio, someDependency.multiplier dovrebbe sono stati passati come argomento al filtro (come nel primo esempio), piuttosto che essere una dipendenza del filtro.

per chiarire ulteriormente il problema: se si chiama una funzione come questa: foo(20) e ottenere un risultato di 40, si dovrebbe ottenere lo stesso risultato se si ripete il processo. Se hai chiamato di nuovo foo(20) e hai ottenuto 92, sarebbe piuttosto confuso, giusto? Supponendo che foo non sia una funzione creata per restituire valori casuali, l'unico modo in cui può restituire numeri diversi ogni volta è se si comporta in modo diverso in base a uno stato nascosto (qualcosa che cambia internamente anziché essere passato come argomento). L'idea che la funzione ritorni la stessa ogni volta dato gli stessi argomenti è chiamata "idempotente".

Nota: $stateful sembra essere nuovo in Angular 1.3