Подтвердить что ты не робот

Что такое фильтрация состояния в AngularJS?

Я читал руководство разработчика AngularJS и в разделе "Фильтр" (https://docs.angularjs.org/guide/filter#stateful-filters) и наткнулся на "Фильтры состояния".

Это описание дано:

Настоятельно не рекомендуется записывать фильтры, которые являются работоспособными, поскольку их выполнение невозможно оптимизировать с помощью Angular, что часто приводит к проблемам с производительностью. Многие фильтры с сохранением состояния могут быть преобразованы в фильтры без сохранения состояния, просто подвергая скрытое состояние модели и превращая ее в аргумент для фильтра.

Я новичок в веб-разработке, поэтому понятия не имею, что такое фильтрация Stateful, и Angular Документация также не объяснила это:( Может кто-то объяснить, в чем разница между нормальным фильтром и фильтром с состоянием?

Ответ 1

"Состояние" относится к переменным/свойствам/etc, которые задаются во всем приложении. Эти значения могут меняться в любой момент времени. Документы говорят, что фильтр не должен зависеть от внешнего "состояния". Все, что должен знать фильтр, должно передаваться в качестве аргумента при фильтрации, и фильтр должен иметь все необходимое для фильтрации и возврата результата. Посмотрите демонстрацию в документах, и вы увидите, что в разделе "stateful", фильтр имеет зависимость от службы, которую он использует для фильтрации. Это значение службы может меняться в течение цикла $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 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