네이티브 Observable, 아직 존재하지 않는 Observable을 RxRxnd

지금 재미있는 일들이 많이 일어나고 있습니다.

RxJS 7은 훌륭하고 RxJS 8은 알파 버전이므로 사용할 수 있는 것으로 보이며 오늘 Chrome에서 사용할 수 있는 새로운 Native Observable도 마찬가지입니다!

함께 사용해도 될까요?
짧은 대답은 아니오입니다. 기술적으로 그들은 모두 Observable이므로 동일한 언어를 사용해야 합니다. 그렇죠? .subscribe, .next, .error, .complete, 짜잔...

거의 그렇습니다. 단, RxJS는 "저렴한 수입품"이 아닌 실제 Obsevable을 처리하도록 추가 노력을 기울입니다.
따라서 Symbol.observable 또는 @@observable이 있는지 부지런히 확인하므로 기술적으로 Observable.prototype['@@observable'] = function(){ return this }을 수행하여 DOM Observable에 해당 항목을 원숭이 패치할 수 있습니다. ... 성공하고 document.when('click').subscribe(new Subject())를 통해 두 가지를 모두 연결하더라도 RxJS 스트림이 자체 참조를 만들기 때문에 다시 실패합니다. 이것은 내부적으로 이제 다른 곳을 가리키므로... 깨집니다.

운이 좋지 않습니다. Native Observable을 구독하고 RxJS 랜드로 데이터를 전달하는 사용자 정의 브리지가 필요합니다.

좋습니다. 그렇게 했다고 가정해 보겠습니다. 물론 효과가 있을 것입니다. 이 어리석은 랩 기능이 있으면 갑자기 다음과 같은 작업을 수행할 수 있습니다.

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

어쨌든 위의 내용은 이미 일종의 뉴스로 간주될 수 있지만 아직은 전혀 흥미로운 부분이 아닙니다!

흥미로운 부분

여기서 흥미로운 부분은 일반적으로 웹 프레임워크나 소규모 UI 라이브러리 내부에 있는 실제 애플리케이션에서 Observable을 사용하는 것에 대해 이야기할 때 나타납니다.

JavaScript "구성 요소" 내에서 Observable을 사용하는 클릭 카운터 버튼의 경우를 생각해 보세요.

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

이제 Native DOM Observable에는 몇 가지 흥미로운 문제가 있습니다. Subject가 존재하지 않으며 BehaviorSubject도 존재하지 않습니다.
게다가 연산자를 전달하는 .pipe() 메서드도 없습니다.
마지막으로 기본 연산자는 모두 함수가 아닌 Observable 클래스의 메서드입니다.

그래서 가장 큰 질문은 아직 존재하지 않는 개체의 메서드를 어떻게 호출합니까?

(이쯤 되면 정신을 잃을지도... 알겠어, 잠깐만)

Observable을 생성하는 새로운 방법은 element.when(eventName)과 같습니다. DOM에 대한 기본 호출입니다.
그러나 이제 우리는 템플릿에 있고 JavaScript 구성 요소에 있습니다. 아직 HTML이 DOM에 추가되지 않았으므로 .when()을 호출할 수 없었을 것입니다.

그리고 여기에 .map().inspect().filter()를 호출하려고 합니다!

실수? RxJS는 몇 년 전까지만 해도 동일한 인터페이스를 사용했지만(Bacon 및 Zen Observables와 같은 다른 인터페이스는 여전히 그렇습니다) 트리 쉐이킹을 돕기 위해 모든 연산자 메서드를 연산자 함수 이제 필요한 것만 가져올 수 있으므로 앱이 더 가벼워집니다. 좋아요!

관찰

그럼 새로운 상황으로 돌아가서 구성요소 내에서 이 문제를 어떻게 해결할까요?

물론이죠, 뭐, 그건 쉽죠! 우리는 WICG 제안에서 Subject와 BehaviorSubject를 얻거나(스포일러: 현재는 그렇지 않음) 창의력을 발휘하여 시스템을 해킹하고
가장 도움이 되는 프록시와 같은 것을 구상합니다. 네이티브 DOM Observable이 없더라도 거기에 있으므로 네이티브 연산자 메서드를 호출할 수 있습니다. ?

저는 그것을... 관측소라고 불렀습니다.

관찰 가능한 미래 = 관찰.

Observaturus는 라틴어로 '관찰하는 사람'이라는 뜻인데, 이를 영어로 억지로 해석하면 이렇게 들리겠죠.

좋습니다. 코드에서는 어떻게 보일까요?

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

야, 저것 좀 봐! 여기에 뭔가가 있습니다: new Observature(0).scan(x=>x 1).

이에 대해 설명하겠습니다.
기술적으로는 BehaviorSubject가 더 이상 없다는 점을 제외하면 새로운 BehaviorSubject(0).scan(x=>x 1)을 만드는 것과 같습니다. ?
Observature는 단지 프록시일 뿐입니다. 나중에 구독하고 나중에 바인딩하기 위해 Observable 및 Observer의 메서드를 노출합니다!
.scan(fn)을 호출하면, 때가 되면 구독하게 될 실제 Observable에서 .scan을 호출하는 것을 기억하게 됩니다.

그렇다면 Observatures는 어떤 흥미로운 것들을 가져오나요?

첫 번째는 실제 주제가 아니라는 점입니다. 따라서 위의 코드를 실행하면 제공한 연산자 함수가 스택의 1/2 수준에서 실행됩니다. 클릭부터 싱크까지 이전에 본 어떤 것보다 더 가볍고 빠를 수 있습니다. 아니요, 아직 벤치마크를 실행해 본 적이 없으며 신경쓰지 않습니다. 지금으로서는 개념이 중요합니다.

아, 또 하나의 메모입니다. 현재 사양에는 Observable.scan()도 없으므로 현재 우리가 할 수 있는 작업 중 하나는 원숭이 패치를 수행하는 것입니다. 그러나 이는 단지 작은 구현 세부 사항일 뿐입니다. 우리는 네이티브 Observable을 가지고 있습니다. 그게 큰 문제입니다!

100% 네이티브를 유지하려면 다른 사용 사례에서는 .map() 및 .filter()를 사용하면 되지만, 내 경험상 scan() 없이는 제대로 된 삶을 살 수 없습니다.

RxJS 8

그렇습니다... 위의 내용은 RxJS가 아닌 기본 항목을 사용하고 있었습니다.

RxJS8을 사용하면 어떤 모습일까요?
내 대답은 모르겠어요. @benlesh에게 물어보세요. 그는 당신의 남자입니다 :)

현재 장애물은 동일합니다. 네이티브 Observable은 RxJS에서 인식되지 않으므로 약간의 작업이 필요합니다. 다음과 같이 보일 수 있습니다.

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

당신의 생각은 무엇입니까? 이런거 써보실래요?

지금은 이 Stackblitz에서 DOM Observables, Observatures를 가지고 놀 수 있습니다

메시지를 남겨서 생각을 남겨주세요.

위 내용은 네이티브 Observable, 아직 존재하지 않는 Observable을 RxRxnd의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!