gpt4 book ai didi

rxjs - 如何使用 Rx.Observable.prototype.let 操作符?

转载 作者:行者123 更新时间:2023-12-03 15:13:09 26 4
gpt4 key购买 nike

let的例子及说明运算符 ( https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md ) 不清楚。任何人都有一个很好的例子/解释let运营商工作,我们应该什么时候使用它?

最佳答案

&tldr;

这是一个方便的功能,可以划分逻辑并将其注入(inject)管道。

更长的解释

source大概是最权威的解释了。它实际上只是传递一个被源调用的函数 Observable .

Rx.Observable.prototype.let = function(fn) {
return fn(this);
}

这样做的用处是我们可以创建或预定义一个您想要为多个源重用的管道。考虑 Rx 的一个常见比喻,即响应式(Reactive)搜索栏:
// 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);

关于rxjs - 如何使用 Rx.Observable.prototype.let 操作符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38340541/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com