Question

let运算符（https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md）的示例和说明尚不清楚。任何人都有一个很好的例子/解释let运算符如何工作，以及何时应该使用它？

Answer 1

<强>＆安培; 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的函数中，并返回一个应用了该逻辑的新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);

如何使用Rx.Observable.prototype.let运算符？

1 个答案: