如何使用 Rx.Observable.prototype.let 运算符?
How to use Rx.Observable.prototype.let operator?
let
运算符(https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md)的例子和解释不清楚。任何人都知道 example/explanation let
运算符是如何工作的,我们应该在什么时候使用它?
&tldr;
这是一个方便的功能,可以划分逻辑并将其注入管道。
更长的解释
source 可能是最明确的解释。它实际上只是传递一个用源 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
并将 return 应用该逻辑的新 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);
let
运算符(https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md)的例子和解释不清楚。任何人都知道 example/explanation let
运算符是如何工作的,我们应该在什么时候使用它?
&tldr;
这是一个方便的功能,可以划分逻辑并将其注入管道。
更长的解释
source 可能是最明确的解释。它实际上只是传递一个用源 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
并将 return 应用该逻辑的新 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);