javascript - 使用 rxJS 观察 dom 元素的大小调整

Question

我想向我的 dom 中的 div 元素添加一个调整大小观察器，以便在它调整大小时给我一个回调。

我知道可以使用 ResizeObserver 来完成，但由于并非所有浏览器都支持它，因此我必须为其添加一个 polyfill。

我想知道我是否可以使用 rxJS 做同样的事情？只需观察 dom 元素并在其调整大小时在回调中执行某些操作。

Answer 1

我建议直接使用 ResizeObserver API 并使用 Polyfill 来处理，以防浏览器中没有 ResizeObserver [例如https://www.npmjs.com/package/resize-observer-polyfill]。

我认为可以很容易地使用 ResizeObserver API 创建一个 Resize DOM Observable，如下所示:

function resizeObservable(elem) {
    return new rxjs.Observable(subscriber => {
        var ro = new ResizeObserver(entries => {
            subscriber.next(entries);
        });

        // Observe one or multiple elements
        ro.observe(elem);
        return function unsubscribe() {
            ro.unobserve(elem);
        }
    });
}

然后你就可以像普通的 RxJS 一样调用它了。

resizeObservable(document.querySelector("XXXX"))
    .pipe(
        // ...
    )
    .subscribe(entries => {
        // handle as you like
    });

直接使用 RxJS 而不是 ResizeObserver 有几个优点，尤其是当您要合并可观察对象或想要使用运算符时。

例如，当一个人想创建一个滚动到底部的按钮时，只有当它不在底部时才会出现。然后你可以很容易地做到这一点

const toggleShowBottomBtnObs$ = rxjs.merge(
    rxjs.fromEvent(document.querySelector("XXX", "scroll"),
    resizeObservable(document.querySelector("XXX"))
)
    .pipe(
        rxjs.operators.debounceTime(200),
        rxjs.operators.map(() => isBottom()),
        rxjs.operators.distinctUntilChanged(),
    )
    .subscribe(toggleShowBtn)