为什么我们使用两个过滤器？

Question

为什么我们在下面的代码中使用两个过滤器而不是一个？

 fromEvent<MouseEvent>(this.mapElement, "click")
    .pipe(
        filter(e => !this.props.disableEvents),
        filter(_ => !this.mouseState.moved && mouseDownInMap)
    )
    .subscribe(e => {});

为什么不：

fromEvent<MouseEvent>(this.mapElement, "click")
    .pipe(filter( e => !this.props.disableEvents && !this.mouseState.moved && mouseDownInMap))
    .subscribe(e => {});

另外，.pipe()如果它也可以在没有管道的情况下工作，为什么我们需要？

Answer 1

您可以将它们组合成一个filter.

但是为了代码维护，通常更容易阅读两个单独的过滤器函数，特别是如果它们在概念上不相关 - 并避免水平滚动。

另一个原因是过滤器函数本身可能在别处定义，在这种情况下，您filter无论如何都必须使用单独的调用：

例如

function whenEventsAreEnabled( e ) {
    return !this.props.disableEvents;
}

function whenMouseIsInMap( e ) {
    !this.mouseState.moved && mouseDownInMap
}

fromEvent<MouseEvent>(this.mapElement, "click")
    .pipe(
        filter( whenEventsAreEnabled ),
        filter( whenMouseIsInMap )
    )
    .subscribe(e => {});

另外，为什么我们需要.pipe()它是否也可以工作pipe？

你确实需要pipe。pipe如果你在向后兼容模式下使用 RxJS，你只能不使用。现代 RxJS 总是需要pipe()为 observable 发出的值/对象创建一个管道。