RXJ를 사용한 기능적 반응 프로그래밍 소개

키 테이크 아웃

반응성 프로그래밍은 동시 데이터 스트림을 사용하여 프로그래밍하는 방법으로 비동기식 일 수 있습니다. CPU는 지침 및 데이터로 구성된 정보 스트림을 처리하기 때문에 프로그래밍 문제에 적용될 수 있습니다. JavaScript (RXJS) 라이브러리의 반응성 확장은 메소드 체인을 사용하고 관찰 가능 (생산자) 및 관찰자 (소비자)를 소개합니다. 두 가지 유형의 관측 가능성은 핫한 관측 가능성이며, 구독하지 않더라도 밀고 냉 관측 가능성이 있습니다. 관측소는 배열, 약속, 기능 및 생성기에서 생성 될 수 있으며 여러 비동기 반환 값을 제공하는 데 사용할 수 있습니다. 관찰 가능한 것은 값을 푸시하며 다음 사건이 발생하도록 강요 할 수 없습니다.

rxjs는 스로틀, 간격 또는 지연과 같은 동시성을 도입하는 많은 연산자를 제공합니다. 지정된 시간 간격에 걸쳐 이벤트를 집계하는 데 사용하거나 특정 유휴 시간 이후에 요청 만 시작하기 위해 입력을 스로틀에 사용하는 데 사용될 수 있습니다.

. rxjs는 JavaScript의 반응성 프로그래밍을보다 쉽고 효율적으로 만듭니다. 간결하고 합성 가능한 일련의 방법으로 반응성 프로그래밍 개념 중 일부를 통합합니다. 또한 RXJS-DOM과 같은 유용한 확장 기능이 있으며 DOM과의 상호 작용을 단순화합니다.

이 기사는 Moritz Kröger, Bruno Mota 및 Vildan Softic이 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! 우리가 주제를 다루기 전에 중요한 질문에 대답해야합니다. 반응성 프로그래밍이란 무엇입니까? 오늘날 가장 인기있는 대답은 반응 형 프로그래밍이 동시 데이터 스트림으로 프로그래밍한다는 것입니다. 대부분의 경우 우리는 동시성이라는 단어가 비동기로 대체 될 것이지만 나중에 스트림이 비동기적 일 필요는 없다는 것을 알게 될 것입니다. “모든 것이 스트림입니다”접근 방식이 프로그래밍 문제에 직접 적용될 수 있음을 쉽게 알 수 있습니다. 결국 CPU는 지침 및 데이터로 구성된 정보 스트림을 처리하는 장치에 지나지 않습니다. 우리의 목표는 특정 데이터의 경우 그 스트림을 관찰하고 변환하는 것입니다.
• 반응성 프로그래밍의 원리는 JavaScript에 완전히 새로운 것은 아닙니다. 우리는 이미 속성 바인딩, 이벤트 미터 패턴 또는 Node.js 스트림과 같은 것들이 있습니다. 때때로 이러한 방법의 우아함은 성능 감소, 지나치게 복잡한 추상화 또는 디버깅 문제가 발생합니다. 일반적으로 이러한 단점은 새로운 추상화 계층의 장점에 비해 최소입니다. 물론 우리의 최소한의 사례는 일반적인 응용 프로그램을 반영하지 않고 가능한 한 짧고 간결해야합니다.
. 더 이상 고민하지 않고 JavaScript (RXJ) 라이브러리의 반응성 확장을 가지고 손을 더럽 히 봅시다. RXJS는 jQuery와 같은 다른 라이브러리에서도 사용되는 인기있는 기술 인 Chaining을 많이 사용합니다. Sitepoint에서 방법 체인 (루비의 맥락에서)에 대한 안내서가 있습니다. 스트림 예제 우리가 RXJS로 뛰어 들기 전에 나중에 작업 할 몇 가지 예를 나열해야합니다. 이것은 또한 반응성 프로그래밍에 대한 소개와 일반적으로 스트림을 결론 지을 것입니다.

일반적으로, 우리는 두 가지 종류의 스트림을 구별 할 수 있습니다 : 내부 및 외부. 전자는 인공적인 것으로 간주 될 수 있고 우리의 통제 내에서 후자는 우리가 통제 할 수없는 출처에서 나옵니다. 외부 스트림은 코드에서 직접 또는 간접적으로 트리거 될 수 있습니다. 일반적으로 스트림은 우리를 기다리지 않습니다. 그들은 우리가 처리 할 수 ​​있는지 여부에 관계없이 발생합니다. 예를 들어 도로에서 자동차를 관찰하려면 자동차 흐름을 다시 시작할 수 없습니다. 스트림은 우리가 관찰하든 아니든 독립적으로 발생합니다. Rx 용어에서 우리는 이것을 라고 부릅니다. RX는 또한 표준 반복자와 비슷하게 작동하는 콜드 관측 가능 를 소개하여 스트림의 정보가 각 관찰자에 대한 모든 항목으로 구성됩니다. . 다음 이미지는 외부 종류의 스트림을 보여줍니다. 마우스 또는 키보드 상호 작용과 같은 UI 이벤트뿐만 아니라 (이전에 시작된) 요청과 일반적으로 웹 후크를 설정하는 것을 알 수 있습니다. 마지막으로 GPS 센서, 가속도계 또는 기타 센서와 같은 장치에서 데이터를받을 수도 있습니다.

이미지에는

emsag 메시지는 여러 형태로 나타날 수 있습니다. 가장 간단한 형식 중 하나는 웹 사이트와 다른 웹 사이트 간의 커뮤니케이션입니다. 다른 예로는 Websockets 또는 웹 작업자와의 커뮤니케이션이 포함됩니다. 후자에 대한 예제 코드를 보자 작업자 코드는 다음과 같습니다. 코드는 소수를 2에서 10

10 까지 찾으려고합니다. 숫자가 발견되면 결과가보고됩니다 전형적으로 웹 워크러 (Prime.js 파일에있는 것으로 가정)는 다음과 같이 포함됩니다. 간결성을 위해 우리는 웹 워커 지원 및 반환 된 결과의 합법성에 대한 점검을 건너 뜁니다. 웹 작업자 및 JavaScript와의 멀티 스레딩에 대한 자세한 내용은 Parallel.js의 병렬 자바 스크립트 기사에서 찾을 수 있습니다. 위의 예를 고려할 때, 우리는 소수가 양의 정수들 사이에서 점근 분포를 따른다는 것을 알고 있습니다. x ~ ∞의 경우 x / log (x)의 분포를 얻습니다. 이것은 우리가 처음에 더 많은 숫자를 볼 것임을 의미합니다. 여기서 수표는 훨씬 저렴합니다 (즉, 처음부터 시작보다 시간당 훨씬 더 많은 소수가 수신됩니다.) . 이것은 결과를 위해 간단한 시간 축과 얼룩으로 설명 할 수 있습니다.

사용자의 검색 상자에 대한 사용자의 입력을 보면 관련이 없지만 유사한 예제가 제공 될 수 있습니다. 처음에 사용자는 검색 할 무언가를 입력하는 데 열정적 일 수 있습니다. 그러나 그의 요청이 더 구체적 일수록 키 스트로크 간의 시차가 커집니다. 사용자가 요청을 좁히는 데 도움이되는 라이브 결과를 보여줄 수있는 능력을 제공하는 것이 바람직합니다. 그러나 우리가 원하지 않는 것은 모든 열쇠 뇌졸중에 대한 요청을 수행하는 것입니다. 특히 첫 번째 뇌졸중은 매우 빠르고 생각하지 않고 전문화 할 필요가 없기 때문에.

. 두 시나리오 모두에서 답은 주어진 시간 간격에 걸쳐 이전 이벤트를 집계하는 것입니다. 두 가지 설명 시나리오의 차이점은 주어진 시간 간격 후에 소수가 항상 표시되어야한다는 것입니다 (즉, 일부 소수는 프리젠 테이션에서 잠재적으로 지연됩니다). 대조적으로, 검색 쿼리는 지정된 간격 동안 키 스트로크가 발생하지 않은 경우에만 새 요청을 트리거합니다. 따라서 키 스트로크가 감지되면 타이머가 재설정됩니다.

구조에 rxjs rx는 관찰 가능한 컬렉션을 사용하여 비동기 및 이벤트 기반 프로그램을 구성하기위한 라이브러리입니다. 쉬운 시간 핸들링 및 오류 모델을 도입하면서 선언적 구문 및 합성 가능성으로 잘 알려져 있습니다. 우리의 이전 사례를 생각하면 우리는 특히 시간 처리에 관심이 있습니다. 그럼에도 불구하고, 우리는 rxjs에 혜택이 더 많은 것을 볼 것입니다.

. RXJ의 기본 빌딩 블록은 관찰 가능 (생산자) 및 관찰자 (소비자)입니다. 우리는 이미 두 가지 유형의 관찰 가능성을 언급했습니다 :

우리가 구독하지 않은 경우에도 핫 관측 가능성이 밀고 있습니다 (예 : UI 이벤트). 콜드 관찰 정보는 구독 할 때만 밀기 시작합니다. 우리가 다시 구독하면 다시 시작합니다.

Cold Observables는 일반적으로 RXJ 내에서 사용되도록 변환 된 배열 또는 단일 값을 나타냅니다. 예를 들어, 다음 코드는 완료하기 전에 단일 값만 생성하는 콜드 관찰 가능성을 만듭니다.

우리는 또한 관찰 가능한 생성 기능에서 정리 로직을 포함하는 함수를 반환 할 수 있습니다. 관찰 가능한 것을 구독하는 것은 관찰 가능한 종류와 무관합니다. 두 유형 모두에 대해 OnNext, OnError 및 OnCompleted로 구성된 알림 문법의 기본 요구 사항을 충족하는 세 가지 기능을 제공 할 수 있습니다. onnext 콜백은 필수입니다.
모범 사례로서 우리는 Dispose 메소드를 사용하여 구독을 종료해야합니다. 필요한 청소 단계를 수행합니다. 그렇지 않으면 쓰레기 수집이 사용되지 않은 자원을 청소하는 것을 방지 할 수 있습니다.

. 가입없이 관찰 가능한 변수에 포함 된 관찰 가능한 것을 구독하지 않으면 냉간 관찰 가능입니다. 그럼에도 불구하고 게시 방법을 사용하여 핫 시퀀스 (즉, 의사 구독을 수행)로 변환 할 수도 있습니다.

RXJ에 포함 된 일부 도우미는 기존 데이터 구조의 변환만을 다룹니다. JavaScript에서 우리는 그 중 세 가지를 구별 할 수 있습니다

단일 비동기 결과를 반환 할 것을 약속합니다 단일 결과에 대한 함수 및 반복자를 제공하기위한 발전기

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++         <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i             found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span></span></span>

후자는 ES6의 새로운 것이며 ES5 이상에 대한 ES5 이상으로 대체 될 수 있습니다 (대체가 좋지 않아 단일 값으로 취급되어야 함). rxjs는 이제 비동기 다중 (반품) 값 지원을 제공하기 위해 데이터 유형을 가져옵니다. 따라서 4 개의 사분면이 이제 채워졌습니다.
반복자를 잡아 당겨야하는 동안 관찰 가능한 값이 밀려납니다. 예를 들어 다음 행사가 일어날 수없는 이벤트 스트림이 있습니다. 이벤트 루프에 의해서만 기다릴 수 있습니다.
관측 가능성을 생성하거나 다루는 대부분의 도우미는 구독이 시작될 때와 알림이 게시 될 때 제어하는 ​​스케줄러를 수락합니다. 기본 스케줄러가 대부분의 실용적인 목적으로 잘 작동하므로 여기서는 자세히 설명하지 않을 것입니다.
2. . RXJ의 많은 연산자는 스로틀, 간격 또는 지연과 같은 동시성을 소개합니다. 우리는 이제이 도우미들이 필수화되는 이전 예제를 다시 살펴볼 것입니다.
3. 예제 먼저, 소수 생성기를 살펴 보겠습니다. 우리는 UI (특히 처음에)가 너무 많은 업데이트를 처리 할 필요가 없도록 주어진 시간에 걸쳐 결과를 집계하고 싶었습니다.
. 여기서, 우리는 실제로 앞서 언급 한 인터벌 헬퍼와 함께 RXJ의 버퍼 함수를 ​​사용하고 싶을 수도 있습니다. 결과는 다음 다이어그램으로 표시되어야합니다. 녹색 얼룩은 지정된 시간 간격 (간격을 구성하는 데 사용되는 시간에 따라 주어진) 후에 발생합니다. 버퍼는 그러한 간격 동안 보이는 모든 파란색 얼룩을 집계합니다.
또한, 우리는 또한 맵을 소개하여 데이터를 변환하는 데 도움이됩니다. 예를 들어, 수신 된 이벤트 인수를 변환하여 전송 된 데이터를 숫자로 얻을 수 있습니다.

프ombent 함수는 표준 이벤트 이미 터 패턴을 사용하여 임의의 객체로부터 관찰 가능한 것을 구성합니다. 버퍼는 또한 제로 길이로 배열을 반환하므로 스트림을 비어 있지 않은 배열로 줄이기 위해 WHERE 기능을 소개합니다. 마지막으로,이 예에서는 생성 된 소수의 수에만 관심이 있습니다. 그러므로 우리는 버퍼를 매핑하여 길이를 얻습니다.

다른 예제는 검색 쿼리 상자입니다. 특정 유휴 시간 후에 요청 만 시작하기 위해 조절해야합니다. 이러한 시나리오에서 유용 할 수있는 두 가지 함수가 있습니다. 스로틀 함수는 지정된 시간 창 내에 보이는 첫 번째 항목을 산출합니다. 분해 함수는 지정된 시간 창 내에 보인 마지막 항목을 생성합니다. 시간이 그에 따라 (즉, 첫 번째 / 마지막 항목에 대해) 시간이 그에 따라 이동합니다. 우리는 다음 다이어그램에 반영되는 동작을 달성하고자합니다. 그러므로 우리는 분광 메커니즘을 사용할 것입니다.

우리는 이전의 모든 결과를 버리고 시간 창이 고갈되기 전에 마지막 결과를 얻고 싶습니다. 입력 필드에 ID 쿼리가 있다고 가정하면 다음 코드를 사용할 수 있습니다.

이 코드에서는 창이 300ms로 설정됩니다. 또한 우리는 이전 쿼리와 구별되는 최소 3 자 이상의 값에 대한 쿼리를 제한합니다. 이렇게하면 무언가를 입력하고 지우는 데 방금 수정 된 입력에 대한 불필요한 요청이 제거됩니다. 이 전체 표현에는 두 가지 중요한 부분이 있습니다. 하나는 SearchFor를 사용하여 쿼리 텍스트를 요청으로 변환하는 것입니다. 다른 하나는 switch () 함수입니다. 후자는 중첩 된 관측 가능성을 반환하고 가장 최근의 관측 가능한 순서에서만 값을 생성하는 모든 함수를 취합니다. 요청을 생성하는 함수는 다음과 같이 정의 될 수 있습니다.

중첩 된 관찰 가능 (유효하지 않은 요청에 대해 정의되지 않은 결과)에 주목하십시오. 그래서 우리는 switch ()와 위치 ()를 체인하는 이유입니다. 결론 rxjs는 JavaScript의 반응성 프로그래밍을 즐거운 현실로 만듭니다. 대안으로 Bacon.js도 있습니다. 그럼에도 불구하고 RXJS의 가장 좋은 점 중 하나는 많은 플랫폼에서 사용할 수있는 RX 자체입니다. 이것은 다른 언어, 플랫폼 또는 시스템으로의 전환을 매우 쉽게 만듭니다. 또한 간결하고 합성 가능한 일련의 방법으로 반응성 프로그래밍 개념 중 일부를 통합합니다. 또한 RXJS-DOM과 같은 몇 가지 매우 유용한 확장이 존재하며, 이는 DOM과의 상호 작용을 단순화합니다. rxjs가 빛나는 곳은 어디입니까? rxjs

를 사용한 기능적 반응 프로그래밍에 대해 자주 묻는 질문 기능적 프로그래밍과 기능적 반응 프로그래밍의 차이점은 무엇입니까?

기능적 프로그래밍 (FP)과 기능적 반응 프로그래밍 (FRP)은 모두 프로그래밍 패러다임이지만 초점이 다릅니다. FP는 계산을 수학적 기능의 평가로 취급하고 변화 상태 및 변이 가능한 데이터를 피하는 프로그래밍 스타일입니다. 그것은 명령적인 프로그래밍 스타일과 달리 함수의 적용을 강조하는데, 이는 상태의 변화를 강조한다. 반면에 FRP는 비동기 데이터 스트림을 다루는 FP의 변형이다. 반응성 프로그래밍 모델과 기능적 프로그래밍을 결합합니다. FRP에서는 정적 (예 : 배열) 및 동적 (예 : 마우스 클릭, 웹 요청) 데이터 스트림을 표현하고 변경 사항에 반응 할 수 있습니다.

rxjs는 기능적 반응 프로그램에 어떻게 적합합니까?

rxjs (JavaScript의 반응 확장)는 비동기식 또는 콜백 기반 코드를보다 쉽게 ​​구성 할 수 있도록 관찰 가능성을 사용하여 반응성 프로그래밍을위한 라이브러리입니다. 이것은 기능적 반응성 프로그래밍에 완벽하게 맞습니다. RXJ를 사용하면 다양한 소스에서 데이터 스트림을 생성하고 제공된 연산자를 사용하여 이러한 데이터 스트림을 변환, 결합, 조작 또는 반응 할 수 있습니다.

RXJS의 관찰 가능한 것은 무엇입니까?
관찰 가능성이 있습니다. RXJ의 핵심 개념. 데이터 스트림으로 시간이 지남에 따라 여러 값을 방출 할 수 있습니다. 다음은 다음, 다음, 오류 및 완료의 값을 방출 할 수 있습니다. '다음'값은 JavaScript 객체 일 수 있습니다. 'Error'는 무언가 잘못 될 때 오류 객체이며 '완료'는 값이 없으며 관찰 가능한 사람이 더 이상 값을 방출하지 않는다는 신호입니다.

rxjs에서 오류를 처리하는 방법?

rxjs는 Catcherror 및 Retry와 같은 오류를 처리 할 수있는 여러 연산자를 제공합니다. CatchError 연산자는 소스 관측 가능한 소스의 오류를 포착하고 새로운 관찰 가능 또는 오류로 스트림을 계속합니다. 재 시도 연산자는 실패 할 때 관찰 가능한 소스로 다시 구술합니다.
rxjs의 연산자 란 무엇입니까?
운영자는 'MAP와 같은 작업과 함께 컬렉션을 다루는 강력한 기능 프로그래밍 스타일을 가능하게하는 순수한 기능입니다. ','필터 ','concat ','reting '등. rxjs에는 컬렉션의 복잡한 조작을 처리하는 데 사용될 수있는 수십 개의 연산자가 있습니다. 품목의 배열, 이벤트 스트림 또는 약속이든 심지어 약속. RXJS 코드를 테스트하려면 어떻게해야합니까?

rxjs는 테스트 스키 디어와 같은 테스트 유틸리티를 제공하여 비동기 코드를보다 쉽게 ​​테스트 할 수 있습니다. 테스트 중에 관측 가능성을 시각화하기 위해 대리석 다이어그램을 사용할 수도 있습니다.

angular와 함께 rxjs를 사용할 수 있습니까?
예, rxjs는 실제로 각도의 핵심 부분입니다. 각도의 HTTP 모듈 및 사용자 정의 이벤트에 사용되는 Eventemitter 클래스에서도 사용됩니다. 약속과 관찰 가능성의 차이점은 무엇입니까?
약속과 관찰 가능성은 모두 비동기 작전을 다루지 만 다른 방식으로 수행합니다. 약속은 아직 사용할 수없는 가치입니다. 한 번만 해결 (이행 또는 거부) 할 수 있습니다. 반면에, 관찰 가능한 것은 0 이상의 값을 방출 할 수있는 값의 스트림이며,

에서 구독하거나 구독을 취소 할 수 있습니까? 관찰 가능한 것을 구독하면 구독 객체가 나타납니다. 구독을 취소하고 구독을 취소하고 데이터 수신을 중지하기 위해이 개체의 구독 취소 방법을 호출 할 수 있습니다.

rxjs의 주제는 무엇입니까?
rxjs의 주제는 값이 값을 허용하는 특수한 유형의 관찰 가능한 유형입니다. 많은 관찰자들에게 멀티 캐스트. 평범한 관측 가능성과 달리 피험자들은 많은 청취자의 레지스트리를 유지합니다.

위 내용은 RXJ를 사용한 기능적 반응 프로그래밍 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!