Почему мы используем два фильтра? - PullRequest
3 голосов
/ 03 марта 2020

Почему мы используем два фильтра в приведенном ниже коде вместо одного?

 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(), если он работает и без конвейера?

Ответы [ 2 ]

10 голосов
/ 03 марта 2020

Вы можете объединить их в один 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, если вы используете Rx JS в режиме обратной совместимости . Современный Rx JS всегда требует pipe() для создания конвейера для излучаемых значений / объектов наблюдаемого .

1 голос
/ 03 марта 2020

Кроме того, зачем нам нужен .pipe (), если он работает и без конвейера?

Вам это не нужно, но это улучшает удобочитаемость, когда несколько операторов собираются действовать. Из документов :

Трубные операторы являются функциями, поэтому их можно использовать как обычные функции: op () (obs) - но на практике их, как правило, много. сворачиваются вместе и быстро становятся нечитаемыми: op4 () (op3 () (op2 () (op1 () (obs)))). По этой причине в Observables есть метод .pipe (), который выполняет то же самое, но при этом гораздо проще для чтения:

obs.pipe(
  op1(),
  op2(),
  op3(),
  op3(),
)
...