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();
        }
    });
}

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

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

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

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

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)

Answer 2

忽略MutationObserver和动画技巧，因为它们不是问题的一部分...

也许在将来。但是目前存在此限制：

... resize事件仅在（发送到）窗口对象上触发（document.defaultView）。仅在窗口对象上注册的处理程序将接收事件。

来源：https://developer.mozilla.org/en-US/docs/Web/Events/resize

否则：

您正在寻找有效HTMLElement事件的rxJS fromEvent()方法（读取：不调整大小）。

从文档中： https://www.learnrxjs.io/operators/creation/fromevent.html

//create observable that emits click events
const source = fromEvent(document.querySelector('#myDiv'), 'click');
const subscribe = source.subscribe(evt => console.log(evt));

使用rxJS

2 个答案: