ResizeObserver 监听容器大小变化

2025-04-05 | 0 浏览 | 0 评论

ResizeObserver 监听容器大小变化

// 使用 ResizeObserver 监听容器大小变化
const resizeObserver = new ResizeObserver(() => {
    myChart.resize();
});
resizeObserver.observe(document.getElementById('chart-container'));

‍

除了 ResizeObserver，还有其他几种 Observer API 可以监听不同类型的变化。以下是一些常见的 Observer：

1. MutationObserver

用途: 监听 DOM 树的变化，如节点添加、删除、属性修改等。

示例:

const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        } else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

2. IntersectionObserver

用途: 监听目标元素与视口或祖先元素的交叉状态，常用于懒加载或无限滚动。

示例:

const target = document.getElementById('target');
const options = {
    root: null, // 视口
    rootMargin: '0px',
    threshold: 0.5 // 50%可见时触发
};
const callback = function(entries, observer) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('Target is visible');
        }
    });
};
const observer = new IntersectionObserver(callback, options);
observer.observe(target);

3. PerformanceObserver

用途: 监听性能条目，如资源加载时间、长任务等。

示例:

const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log(entry.name + ': ' + entry.duration);
    }
});
observer.observe({ entryTypes: ['resource', 'longtask'] });

4. ReportingObserver

用途: 监听浏览器生成的报告，如弃用 API、干预报告等。

示例:

const observer = new ReportingObserver((reports, observer) => {
    reports.forEach(report => {
        console.log(report.type, report.body);
    });
}, { buffered: true });
observer.observe();

5. FontFaceObserver

用途: 监听字体加载状态，确保字体加载完成后再执行操作。

示例:

const font = new FontFaceObserver('MyFont');
font.load().then(() => {
    console.log('Font has loaded');
}).catch(() => {
    console.log('Font failed to load');
});

6. MediaQueryList

用途: 监听媒体查询的变化，如视口宽度变化。

示例:

const mediaQuery = window.matchMedia('(max-width: 600px)');
const callback = (event) => {
    if (event.matches) {
        console.log('Viewport is less than 600px wide');
    } else {
        console.log('Viewport is more than 600px wide');
    }
};
mediaQuery.addEventListener('change', callback);

7. CustomEvent

用途: 自定义事件监听器，用于监听自定义事件。

示例:

const target = document.getElementById('target');
target.addEventListener('customEvent', (event) => {
    console.log('Custom event triggered:', event.detail);
});
const event = new CustomEvent('customEvent', { detail: { message: 'Hello' } });
target.dispatchEvent(event);

这些 Observer API 可以帮助你在不同场景下监听和处理各种变化，提升应用的响应性和用户体验。

笔记