source

AngularJS에서의 스테이트풀필터링이란?

gigabyte 2023. 3. 20. 23:16
반응형

AngularJS에서의 스테이트풀필터링이란?

Angular를 읽고 있었는데필터 섹션(https://docs.angularjs.org/guide/filter#stateful-filters)에서 JS 개발자 가이드로 "Stateful Filters"를 볼 수 있습니다.

이 설명은 다음과 같습니다.

상태 저장 필터는 Angular로 최적화할 수 없기 때문에 쓰지 않는 것이 좋습니다.이는 종종 성능 문제로 이어집니다.숨겨진 상태를 모델로 노출하고 필터의 인수로 변환하는 것만으로 많은 상태 저장 필터를 상태 비저장 필터로 변환할 수 있습니다.

저는 웹 개발에 익숙하지 않기 때문에 Stateful Filtering이 무엇인지 전혀 모릅니다.또, Angular Documentation도 설명하지 않았습니다.(일반 필터와 Stateful Filter의 차이점을 설명해 주실 수 있습니까?

"상태"는 응용 프로그램 전체에서 설정된 변수/속성 등을 말합니다.이러한 값은 언제든지 변경될 수 있습니다.의사들은 필터가 외부 "상태"에 의존해서는 안 된다고 말합니다.필터가 알아야 하는 것은 모두 필터링할 때 인수로 전달해야 합니다.그 후 필터에는 필터링에 필요한 모든 것이 포함되어 Look over the demo in the docs라는 결과가 반환됩니다.「 stateful 」필터에서는, 필터가 필터링에 사용하는 서비스에 의존하고 있는 것을 알 수 있습니다.이 서비스 값은 다음 중 변경될 수 있습니다.$digest사이클이 있기 때문에$statefulAngular가 필터를 다시 실행하여 종속성 상태가 변경되지 않았는지 확인할 수 있도록 필터에 속성을 설정해야 합니다. 그러면 필터 결과가 변경됩니다.

따라서 모든 "상태"는 다음과 같이 인수에 포함되어야 합니다.

<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랜덤한 값을 반환하는 함수는 아닙니다.매회 다른 번호를 반환할 수 있는 유일한 방법은 숨겨진 상태(인수로 전달되는 것이 아니라 내부에서 변경되는 것)에 따라 다르게 동작하는 것입니다.함수가 같은 인수가 주어질 때마다 같은 값을 반환한다는 생각을 "유휴성"이라고 합니다.

주의:$statefulAngular 1.3에서는 새로운 것 같습니다.

언급URL : https://stackoverflow.com/questions/25877704/what-is-stateful-filtering-in-angularjs

반응형