web前端技术分享

封装resize指令

2023-08-17  本文已影响0人  懂会悟

Map 与 WeakMap的区别

JavaScript 中的 Map 和 WeakMap 提供了类似的功能 ——都是为了存储键值对——但是它们在一些关键点上有显著的不同:

  1. 键的类型:Map 可以接受任何类型的键(包括基本类型和对象类型),而 WeakMap 只接受对象作为键。

  2. 强/弱引用:Map 维持着对键的强引用,这意味着只要 Map 存在并且包含这个键,那么它就不会被垃圾回收掉。相反,WeakMap 维持着对键的弱引用,即当没有其他地方引用此对象时,垃圾回收器会自动回收该键所引用的对象,并从 WeakMap 中删除对应的条目。

  3. 可迭代:Map 是可迭代的,可以使用例如 for...of 循环、keys()、values()、entries() 方法遍历整个 Map。但是 WeakMap 不可迭代。

  4. 获取大小:Map 有一个 size 属性,你可以使用它来获取 Map 中元素的数量。但是 WeakMap 没有这个属性,你不能知道 WeakMap 中有多少元素。

总的来说,当你需要一个映射关系并且希望手动管理对象的生命周期时,你应该选用 Map;当你需要一个映射关系并希望为对象的生命周期交由JavaScript引擎自动管理时,可以优先考虑 WeakMap。

vue3 自定义指令

在 Vue3中,自定义指令的定义有些许变化。下面是一个创建自定指令的示例:

export default {
  directives: {
    focus: {
      // 当被绑定的元素挂载到 DOM 中时……
      mounted(el) {
        // 聚焦元素
        el.focus();
      },
    },
  },
};

你可以看到,之前的 bind 和 inserted 钩子在 Vue 3 中被 mounted 取代,同时 unbind 钩子在 Vue 3 中改为 unmounted。

在Vue3中定义指令主要有以下钩子可用:

每个函数都接收如下参数:

ResizeObserver

在日常开发中有时需要根据浏览器窗口大小变化,作出相应的变化,因此可以封装一个自定义指令来监听窗口的变化

ResizeObserver 是一个可以监听到 Element 或 SVGElement 的内容尺寸变化的接口。这使得我们能够观察到任何元素在其内容方面的变化——而不只是基于其窗口大小的变化。

以下是创建一个新的 ResizeObserver 的例子,每当被其观察的元素发生尺寸变化时都会在 Console 中打印其新的尺寸:

// 新建一个新的 ResizeObserver 实例,将观察到的更改输出至 Console

var resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Size of', entry.target, 'has changed:', entry.contentRect);
  }
});
// 开始观察一个元素的尺寸变化
resizeObserver.observe(document.querySelector('div'));

在上述代码中,entries 是数组,里面包含着 ResizeObserverEntry 对象,每个对象代表了一个观察到的元素。每个 ResizeObserverEntry 对象都有一个 contentRect 属性,其值是一个具有 width、height、top、right、bottom 和 left 信息的 DOMRectReadOnly 对象。

// 要停止观察一个或多个元素,可以使用 ResizeObserver 实例的 unobserve 方法:
resizeObserver.unobserve(target);
// 要停止观察所有元素,可以使用 disconnect 方法:
resizeObserver.disconnect();

得注意的是,ResizeObserver 是一个相对较新的特性,还没有被所有浏览器全面支持,可以通过 https://caniuse.com/resizeobserver 查看具体的支持情况。

监听元素变化指令

在日常开发中有时需要根据dom元素大小变化,作出相应的变化,因此可以封装一个自定义指令来监听dom元素的变化

// 为每个调用指令的dom元素绑定回调函数
<q-input v-focus-border="handleWidth" placeholder="红色边框" />

<script>
// 不使用Map防止dom消失而Map中的对象未删除而导致的内存泄漏
const elMap = new WeakMap() 
const ob = new ResizeObserver((entries) => {
  for (const item of entries) {
    let handleFun = elMap.get(item.target)
    handleFun(item.target)
  }
})
export default {
  directives: {
    'focus-border': {
      mounted(el, binding) {
        // binding.value 可以拿到指令绑定的回调函数
        elMap.set(el, binding.value)
        ob.observe(el)
      },
      unmounted(el) {
      // 解除绑定时需要解除监听
        ob.disconnect()
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    handleWidth(size) {
      console.log('handleWidth-------------size', size)
    }
  }
}
</script>
上一篇 下一篇

猜你喜欢

热点阅读