GaramX

사용자 도구

사이트 도구

현재 위치: home » angular » observable_rxjs » observablescomparedtoothertechniques
추적: • observablescomparedtoothertechniques • module
angular:observable_rxjs:observablescomparedtoothertechniques

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
angular:observable_rxjs:observablescomparedtoothertechniques [2019/03/02 14:20] – [Cheat sheet] taekguangular:observable_rxjs:observablescomparedtoothertechniques [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 85: 줄 85:
   });</code>|   });</code>|
 |Unsubscribe |<code javascript>sub.unsubscribe();</code>|Implied by promise resolution.| |Unsubscribe |<code javascript>sub.unsubscribe();</code>|Implied by promise resolution.|
 +| | | |
 +
 +===== Observables compared to events API =====
 +Observables는 이벤트 API를 사용하는 이벤트 핸들러와 매우 유사합니다. 두 기술 모두 알림 핸들러를 정의하고 시간 경과에 따라 전달되는 여러 값을 처리하는 데 사용합니다. 관찰 가능에 가입하는 것은 이벤트 리스너를 추가하는 것과 같습니다. 한 가지 중요한 차이점은 이벤트를 처리기에 전달하기 전에 이벤트를 변환하도록 관찰 가능을 구성 할 수 있다는 것입니다.
 +
 +observable을 사용하여 이벤트 및 비동기 작업을 처리하면 HTTP 요청과 같은 컨텍스트에서보다 일관된 이점을 얻을 수 있습니다.
 +
 +다음은 observables 및 이벤트 API를 사용하여 동일한 종류의 작업을 정의하는 방법을 보여주는 코드 샘플입니다.
 +
 +^ ^ Observable ^ Events API ^
 +|Creation & cancellation |<code javascript>// Setup
 +let clicks$ = fromEvent(buttonEl, ‘click’);
 +// Begin listening
 +let subscription = clicks$
 +  .subscribe(e => console.log(‘Clicked’, e))
 +// Stop listening
 +subscription.unsubscribe();</code>|<code javascript>function handler(e) {
 +  console.log(‘Clicked’, e);
 +}
 +// Setup & begin listening
 +button.addEventListener(‘click’, handler);
 +// Stop listening
 +button.removeEventListener(‘click’, handler);</code>|
 +|Subscription |<code javascript>observable.subscribe(() => {
 +  // notification handlers here
 +});</code>|<code javascript>element.addEventListener(eventName, (event) => {
 +  // notification handler here
 +});</code>|
 +|Configuration |키 스트로크를 청취하지만 입력 값을 나타내는 스트림을 제공하십시오.<code javascript>
 +fromEvent(inputEl, 'keydown').pipe(
 +  map(e => e.target.value)
 +);</code>|구성을 지원하지 않습니다.<code javascript>element.addEventListener(eventName, (event) => {
 +  // Cannot change the passed Event into another
 +  // value before it gets to the handler
 +});</code>|
 +| | | |
 +
 +===== Observables compared to arrays =====
 +
 +관측 대상은 시간이 지남에 따라 값을 산출합니다. 배열은 정적 인 값 집합으로 만들어집니다. 어떤 의미에서, observables는 배열이 동기적인 경우 비동기입니다. 다음 예에서 ➞ 비동기 값 전달을 의미합니다.
 +
 +^ ^ Observable ^ Array ^
 +|Given |<code>obs: ➞1➞2➞3➞5➞7
 +obsB: ➞'a'➞'b'➞'c'</code> |<code>arr: [1, 2, 3, 5, 7]
 +arrB: ['a', 'b', 'c']</code> |
 +|concat() |<code>obs.concat(obsB)
 +➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'</code> |<code>arr.concat(arrB)
 +[1,2,3,5,7,'a','b','c']</code> |
 +|filter() |<code>obs.filter((v) => v>3)
 +➞5➞7</code> |<code>arr.filter((v) => v>3)
 +[5, 7]</code> |
 +|find() |<code>obs.find((v) => v>3)
 +➞5</code> |<code>arr.find((v) => v>3)
 +5</code> |
 +|findIndex() |<code>obs.findIndex((v) => v>3)
 +➞3</code> |<code>arr.findIndex((v) => v>3)
 +3</code> |
 +|forEach() |<code>obs.forEach((v) => {
 +  console.log(v);
 +})
 +1
 +2
 +3
 +5
 +7</code> |<code>arr.forEach((v) => {
 +  console.log(v);
 +})
 +1
 +2
 +3
 +5
 +7</code> |
 +|map() |<code>obs.map((v) => -v)
 +➞-1➞-2➞-3➞-5➞-7</code> |<code>arr.map((v) => -v)
 +[-1, -2, -3, -5, -7]</code> |
 +|reduce() |<code>obs.scan((s,v)=> s+v, 0)
 +➞1➞3➞6➞11➞18</code> |<code>arr.reduce((s,v) => s+v, 0)
 +18</code> |
 +
 +
angular/observable_rxjs/observablescomparedtoothertechniques.1551536424.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구