RxJS 간단 한 이해

오늘 《 기 무 위 크 》 의 《 스 트림 애플 리 케 이 션 구축 - RxJS 상세 해 》 를 통 해 RxJS 에 대해 간단 한 이 해 를 하 였 다.RxJS 는 Reactive Extensions for javascript 의 약자 이 고 제 이 해 는 Javascript 의 유연 한 확장 입 니 다.
글 은 RxJS 를 빌려 일반적인 방식 으로 이 루어 진 검색 기능 을 최적화 했다.이 검색 기능 을 약술 하고 사용 자 는 조회 내용 을 입력 하고 배경 에서 조회 결 과 를 되 돌려 줍 니 다.기능 은 매우 간단 합 니 다. 우 리 는 일반적으로 이 검색 상 자 를 가 져 오 는 동시에 검색 상자 의 입력 이 벤트 를 듣 고 검색 상자 의 내용 을 배경 으로 보 냅 니 다. 배경 은 검색 내용 에 따라 데 이 터 를 되 돌려 주 고 전단 은 데 이 터 를 받 아 페이지 에 보 여 줍 니 다.
우선 일반적인 방식 으로 이 검색 기능 을 실현 해 보 세 요.

var input = document.querySelector("#text");
input.addEventListener("keyup",(e)=>{
    var searchText = e.target.value;
    $.ajax({
        url: `search.com/${searchText}`,
        success:data=>{
            render(data);
        }
    })
});

여기에 최적화 해 야 할 두 가지 가 있다.
4. 567917. 불필요 한 요청.사용자 의 매번 입력 은 응답 을 합 니 다. 예 를 들 어 사용자 가 '핑 거 케이크' 를 검색 하려 고 하면 결 과 는 [손], [손가락] 두 글자 가 입력 이 벤트 를 촉발 합 니 다
4. 567917. 이미 쓸모없는 요 구 를 다시 수행 합 니 다.사용자 가 [콜라] 를 입력 했 을 때 검색 결과 가 돌아 오지 않 았 을 때 [핑 거 케이크] 를 입력 했 습 니 다. 이때 [콜라] 의 검색 결과 가 돌 아 왔 습 니 다. 이것 은 분명 정확 하지 않 습 니 다
불필요 한 요청 에 대해 서 는 타이머 setTimeout 방식 으로 처리 할 수 있 습 니 다.다음 과 같다.

var input = document.querySelector("#test"),
      timer = null;
input.addEventListener('keyup',(e){
      clearTimeout(timer);
      timer = setTimeout(()=>{
            var searchText = e.target.value;
            $.ajax({
                url: `search.com/${searchText}`,
                success:data=>{
                    render(data);
                }
            })
      },250)
})

요청 이 없 는 처리 에 대해 서 는 현재 검색 한 상태 변 수 를 미리 설명 하고 이 상태 변 수 를 데이터 와 함께 되 돌려 현재 입력 과 같 는 지 판단 할 수 있 습 니 다. 같 으 면 데 이 터 를 페이지 에 렌 더 링 할 수 있 습 니 다.다음 과 같다.

var input = document.querySelector("#test"),
      timer = null,
      currentSearch = "";
input.addEventListener('keyup',(e){
      clearTimeout(timer);
      timer = setTimeout(()=>{
            currentSearch = " ";
            var searchText = e.target.value;
            $.ajax({
                url: `search.com/${searchText}`,
                success:data=>{
                    if(data.search == currentSearch){
                        render(data);
                    }else{
                        ......
                    }
                }
            })
      },250)
})

이렇게 일반적인 방식 으로 검색 기능 을 실현 하면 완성 된다.RxJS 를 사용 하여 이 기능 을 어떻게 실현 하 는 지 살 펴 보 자.먼저 허름 한 버 전 을 실현 합 니 다.

var input = document.querySelector("#test");
Rx.Observable.fromEvent(input,"keyup")
                        .pluck('target','value')
                        .flatMap(url=>Http.get(url))
                        .subscribe(data=>render(data))

여기 서 from Event, pluck, flatMap 은 RxJS 가 제공 하 는 일련의 조작 으로 RxJS 가 제공 하 는 조작 이 매우 풍부 하 므 로 더 알 고 싶 으 면 RxJS 문 서 를 조회 할 수 있 습 니 다.이곳 의 호출 방식 은 체인 호출 을 사용 하 는데 JQuery 를 사용 한 적 이 있 으 면 체인 호출 에 대해 매우 익숙 하 다.다음은 각 문장의 작용 을 설명 한다.

Rx.Observable.fromEvent(input,"keyup")  // fromEvent      ，     ，   event      Observable    。
.pluck("target","value") //     event,   event.target .value
.flatMap(url=>Http.get(url)) //            Observer
.subscribe(data=>render(data)) // Observer           

나머지 요청 에 대한 RxJS 최적화 살 펴 보 겠 습 니 다.

var input = document.querySelector("#test");
Rx.Observable.fromEvent(input,"keyup")
                        .debounce(250) //   250   ，      ，          
                        .pluck('target','value')
                        .flatMap(url=>Http.get(url))
                        .subscribe(data=>render(data))

RxJS 는 불필요 한 요청 에 대한 처리 가 매우 편리 하 므 로, 직접 flatMapLatest 를 사용 하여 flatMap 을 교체 합 니 다.

var input = document.querySelector("#test");
Rx.Observable.fromEvent(input,"keyup")
                        .debounce(250) 
                        .pluck('target','value')
                        .flatMapLatest(url=>Http.get(url)) //            ，           
                        .subscribe(data=>render(data))

이렇게 RxJS 를 사용 하여 검색 기능 을 실현 하면 완성 된다.두 가지 실현 에 비해 Rx 를 사용 하 는 것 은 코드 양 에서 현저 한 장점 이 있다.
본 고 는 Rx 의 실현 원 리 를 간단하게 소개 했다. 개인 적 으로 Rx 는 제철소 와 같다 고 생각한다. 원자재 (각종 데이터 나 사건) 는 고온 (Rx. Observable) 을 거 쳐 쇳물 (흐름) 로 전환 한 다음 에 금 형 (Rx. Observer) 을 거 쳐 원 하 는 다양한 형식의 강재 (렌 더 링) 를 얻 을 수 있다.RxJS 는 Asynchronous Data streams 를 핵심 으로 하고 RxJS 는 이벤트, 변수, 속성 등 을 data streams 로 변환 하여 이러한 data streams 를 관찰 하고 그 가 만 든 side effets 에 따라 대응 하 는 작업 을 할 수 있다.이것 은 간단 한 입문 일 뿐 입 니 다. 이 글 은 RxJS 의 고급 사용 에 대해 소 개 했 습 니 다. 관심 이 있 으 면 읽 어 보 세 요.