js监听元素尺寸变化

上代码： 

/**
 * @description 监听元素尺寸变化
 * @author: hruomei
 * @update
 * @date: 2021-07-22 11:29:40
 */

export default class ResizeObserver {
    constructor() {}

    static handleResize(e) {
        const trigger = e.target.__resizeTrigger__;

        if (!trigger) return;

        const handlers = trigger.__z_resizeListeners;
        if (handlers) {
            handlers.forEach(({ handler, context }) => {
                handler.apply(context, [e]);
            });
        }
    }

    static removeHandler(ele, handler, context) {
        const handlers = ele.__z_resizeListeners;

        if (!handlers) return;
        ele.__z_resizeListeners = handlers.filter(
            h => !(h.handler === handler && h.context === context)
        );
    }

    static createResizeTrigger(ele) {
        let obj = document.createElement('object');
        obj.setAttribute(
            'style',
            'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;'
        );
        obj.onload = ResizeObserver.handleObjectLoad;
        obj.type = 'text/html';
        ele.appendChild(obj);
        obj.data = 'about:blank';
        return obj;
    }

    static handleObjectLoad() {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
        this.contentDocument.defaultView.addEventListener('resize', ResizeObserver.handleResize);
    }

    on(ele, handler, context) {
        if (!ele) throw new Error('illegal element')

        let handlers = ele.__z_resizeListeners;

        if (!handlers) {
            handlers = [];
            ele.__z_resizeListeners = handlers;

            if (window.getComputedStyle(ele, null).position === 'static') {
                ele.style.position = 'relative';
            }

            let obj = ResizeObserver.createResizeTrigger(ele);
            ele.__resizeTrigger__ = obj;
            obj.__resizeElement__ = ele;
        }

        handlers.push({
            handler,
            context
        });
    }

    off(ele, handler, context) {
        if (!ele) throw new Error('illegal element')

        let handlers = ele.__z_resizeListeners;

        if (!handlers) return;

        ResizeObserver.removeHandler(ele, handler, context);

        if (!handlers.length) {
            let trigger = ele.__resizeTrigger__;

            if (trigger) {
                trigger.contentDocument.defaultView.removeEventListener('resize', ResizeObserver.handleResize);
                ele.removeChild(trigger);
                delete ele.__resizeTrigger__;
            }

            delete ele.__z_resizeListeners;
        }
    }
}

用法：

 

const resizeObserver = new ResizeObserver();
const element = document.getElementById('netcallLeftWrapper');
const callback = () => {
    console.log('leftWrapper尺寸变化')
});

// 监听resize事件
resizeObserver.on(element, callback, this);

// 取消监听resize事件
resizeObserver.off(element, callback, this);