Rx 사용법.관측 가능.프로토타입.교환원으로 보내시겠습니까?
의 예와 설명.let
연산자(https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md)는 명확하지 않다.누구라도 좋은 예/설명서를 가지고 있다.let
오퍼레이터가 작동하고, 언제 사용해야 하는가?
&tldr;
논리를 구획하여 파이프라인에 주입할 수 있는 편리함수다.
긴 설명
출처는 아마도 가장 결정적인 설명일 것이다.그것은 정말로 소스와 함께 불려지는 함수를 통과하는 것이다.Observable
.
Rx.Observable.prototype.let = function(fn) {
return fn(this);
}
이를 통해 여러 소스에 대해 재사용하고자 하는 파이프라인을 만들거나 미리 정의할 수 있다.Rx에 대한 공통 트로피를 고려해 보십시오. 반응형 검색 모음:
// Listen to a key up event on the search bar
// and emit the value of the search
Rx.Observable.fromEvent(searchBar, 'keyup', e => e.target.value)
// Don't search too eagerly
.filter(text => text.length > 3)
.debounceTime(500)
//Search logic
.flatMap(text => $.getJSON(`my/search/api?q=${text}`))
.flatMap({results} => results)
//Handler
.subscribe(appendToList);
위의 내용은 파이프라인이 어떻게 생성될 수 있는지에 대한 기본적인 감각을 제공해야 한다.코드를 정리하거나 다른 곳에서 사용할 수 있도록 하기 위해 이러한 논리 중 일부를 추상화하려고 한다면, 약간 까다로울 수 있다. 왜냐하면 그것은 대개 새로운 운영자를 만드는 것을 의미하기 때문이다(그리고 그것 자체의 두통이 있다).
해결책은 출처를 통과할 수 있는 함수에 공통논리를 끌어들이는 비교적 간단한 접근법이다.Observable
그리고 새로운 것을 돌려줄 것이다.Observable
그런 논리를 적용해서.
따라서 위의 내용은 다음과 같을 수 있다.
//Defined in pipelines.js
function filterBuilder(minText, debounceTime) {
return (source) =>
source.filter(text => text.length > minText)
.debounce(debounceTime);
}
function queryBuilder(baseUrl) {
return (source) =>
source.flatMap(text => $.getJSON(`${baseUrl}?q=${text}`))
.flatMap({results} => results);
}
//In your application code
Rx.Observable.fromEvent(searchBar, 'keyup', e => e.target.value)
.let(filterBuilder(3, 500))
.let(queryBuilder('my/search/api'))
.subscribe(appendResults);
참조URL: https://stackoverflow.com/questions/38340541/how-to-use-rx-observable-prototype-let-operator
'IT이야기' 카테고리의 다른 글
@click과 v-on의 차이:Vuejs 클릭 (0) | 2022.03.22 |
---|---|
vue 구성 요소에서 변수를 정의하는 방법(Vue).JS 2) (0) | 2022.03.22 |
한 개 또는 여러 개의 인스턴스를 지정하시겠습니까? (0) | 2022.03.22 |
리액션 라우터의 쿼리 매개 변수를 프로그래밍 방식으로 업데이트하는 방법은? (0) | 2022.03.22 |
v-data-table 끌어서 놓기 설정 (0) | 2022.03.22 |