resize-observer-polyfillResizeObserver 浏览器提供的一个JavaScript Ap

ResizeObserver

浏览器提供的一个JavaScript Api，可以同时监视一个或多个dom元素，以便在元素的大小或形状发生变化时触发回调函数。

目前来看还是一个实验性的api，在兼容性方面较差，所以如果你对较低版本的浏览器需要兼容，则不用考虑使用该api。如果你要在ie上展示，则完全不用考虑，完全不兼容ie。

总的来说，这个api，目前并不是监听dom的最优选择

onresize

onresize 事件会在窗口或框架被调整大小时发生。

局限性很大，对于窗口或者框架大小未被调整，但是页面内容却发生变化的情况，无能为力。

例如：侧边栏的收缩和展开会导致内容展示区宽度的改变，此时内容区的dom就无法监听并做出对应的变化

matchMedia

同样是对窗口或框架被调整大小时发生，不同于onresize在于只在某些特殊的节点会触发。

如果不希望每次 window 大小变化时通知我们，而只希望屏幕在大于或小于某个特定的大小时通知我们即可。这种场景下使用 matchMedia 会比监听 window.resize 要性能更高。

例如：matchMedia('(max-width: 600px)')

resize-observer-polyfill

如果你想获得ResizeObserver的能力，但是又因为兼容性的问题，那么resize-observer-polyfill应该就是你的最佳选择。各大框架均在使用，本身是一个polyfill，可以在不兼容ResizeObserver的浏览器上使用。

在这提供一个案例：

import ResizeObserver from 'resize-observer-polyfill';

/**
 * 初始化监听对象
 */
const resizeOb = new ResizeObserver(function(entries) {
    for(let entry of entries) {
        const listeners = entry.target.__resizeListeners__;

        if(listeners) {
            (listeners || []).forEach(fn => {
                fn(entry);
            });
        } else {
            resizeOb.unobserve(listeners.target);
        }
    }
});

export default resizeOb;

let $el = this.$refs.projectSelect;
$el.__resizeListeners__ = [
    entry => {
        this.initPage(entry.target.querySelectorAll(className)[0],entry.target);
    }
];
resizeOb.observe($el);