不用addEventListener(‘resize‘, this.resize),用新的Web API ResizeObserver监听DIV元素尺寸的变化

不用addEventListener(‘resize‘, this.resize),用新的Web API ResizeObserver监听DIV元素尺寸的变化_第1张图片

响应式设计指的是根据屏幕视口尺寸的不同,对 Web 页面的布局、外观进行调整,以便更加有效地进行信息的展示。我们日常生活中接触的很多应用都遵循响应式的设计。

响应式设计如今也成为 web 应用的基本需求,而现在很多 web 应用都已经组件化,这意味着我们如果想要实现响应式的应用,那么我们也需要有某种方式监听 「组件/元素」 大小的变化,以便让 「组件/元素」 也做到响应式。

在 ResizeObserver 出现之前,我们也有一些实现响应式布局的方案,包括:

  • JS 方案——window.onresize /window.matchMedia。
  • CSS 方案——媒体查询。

但它们都各自有一些问题。

 ResizeObserver接口用于报告一个元素的尺寸变化。

ResizeObserver是新的实验中的API,可以通过构造一个 ResizeObserver 对象以观察者模式监听任意 Element / SvgElement 的尺寸变化。除了chrome 64+ 和最新的 Edge Insider版支持,其他浏览器均不支持此API。但有第三方的polyfill方案,可以支持到 FF44+,IE9+,Edge 10+ ,Safari 11+ ,兼容方案是通过 MutationObserver API 实现的,通过监听 dom 的变化并加以判断,至此主流浏览器均可运行。非轮询监控,所以不会造成性能问题。

一个ResizeObserver对象被创建,它有一个回调函数,定义了当检测到尺寸变化时应该执行的行动。此对象的observe()方法用于被追踪的元素。

这将检查任何变化,并在检测到任何尺寸变化时执行回调函数。

GitHub - que-etc/resize-observer-polyfill: A polyfill for the Resize Observer APIA polyfill for the Resize Observer API. Contribute to que-etc/resize-observer-polyfill development by creating an account on GitHub.icon-default.png?t=N7T8https://github.com/que-etc/resize-observer-polyfill

import ResizeObserver from 'resize-observer-polyfill';//npm install resize-observer-polyfill --save-dev
export default {
    data() {
        return {
            rb: null,
        }
    },
    mounted() {
        this.addResizeObserver(监听div元素);
    },
    destroyed() {
        this.removeResizeObserver(监听div元素);
    },
    methods: {
        // 监听视窗尺寸变化
        addResizeObserver(element) {
            this.rb = new ResizeObserver(entries => {
                entries.forEach(({ target, contentRect }) => {
                    switch (target) {
                        case element:
                            console.log(`对应的元素尺寸变化的值`, contentRect);
                            break;
                    }
                });
            });
            this.rb.observe(element);
        },
        // 移出监听视窗尺寸变化
        removeResizeObserver(element) {
            this.rb.unobserve(element);
        },
    },
};

你可能感兴趣的:(javascript,开发语言,ecmascript)