vue2 自定义指令列表元素上划动画


// 距离向上滑动的距离 可优化为 外部传入
let slideDistace = 100;
// 动画完成的时间
let slideDuration = 500;
// 用来映射 元素 和 动画
let domMap = new WeakMap();
// 观察器 用来观察元素是否 出现在视口
const ob = new IntersectionObserver(entries => {// 循环元素entries.forEach(entry => {// 判断元素是否出现在视口if (entry.isIntersecting) {// 从map中获取动画let animation = domMap.get(entry.target)if (animation) {// 动画存在 播放动画 并且销毁观察器animation.play()ob.unobserve(entry.target)}}})
})
// 判断元素是否在视口
function isBelowViewPort(el) {const rect = el.getBoundingClientRect()return rect.top > window.innerHeight
}
Vue.directive('slide-in', {inserted (el, binding) {if (!isBelowViewPort(el)) {return}const animate = el.animate([{transform: `translateY(${slideDistace}px)`,opacity: 0.5},{transform: `translateY(0px)`,opacity: 1}], {duration: slideDuration,easing: 'ease-out',FillMode: 'forward'})animate.pause();domMap.set(el, animate)ob.observe(el)},unbind(el) {// 解除绑定 销毁观察器ob.unobserve(el)},
})

WeakMap 和 Map 都是 JavaScript 中用于存储键值对的数据结构，但它们之间存在一些重要的区别，特别是在键的类型、垃圾回收机制以及使用场景方面。下面是 WeakMap 和 Map 的主要区别：

1. 键的类型

Map: Map 的键可以是任何数据类型，包括原始值（如字符串、数字）和对象。
WeakMap: WeakMap 的键必须是对象。不能使用原始值（如字符串、数字、布尔值等）作为键。

2. 垃圾回收机制

Map: Map 中的键值对会阻止键对象被垃圾回收。也就是说，只要键值对存在，键对象就不会被垃圾回收器回收。
WeakMap: WeakMap 中的键是弱引用的，这意味着如果一个对象只被 WeakMap 作为键引用，而没有其他引用，那么这个对象可以被垃圾回收器回收。这使得 WeakMap 适合用于存储临时数据或与对象关联的元数据，而不用担心内存泄漏。

3. 使用场景

Map: 适用于需要强引用键值对的场景，特别是当你需要使用原始值作为键，或者需要长时间保留键值对的情况。
WeakMap: 适用于需要临时关联数据的场景，特别是当你希望数据在对象不再使用时自动被垃圾回收。常见的使用场景包括缓存、私有数据存储等。

4. API 差异

Map: 提供了丰富的 API，包括 set, get, has, delete, clear, keys, values, entries 等。
WeakMap: 提供了较为有限的 API，主要包括 set, get, has, delete。没有 clear 方法，也没有迭代方法（如 keys, values, entries）。

示例代码

Map 示例

const map = new Map();// 使用各种类型的键
map.set('string', 'Hello');
map.set(1, 'One');
map.set({ key: 'value' }, 'Object as key');console.log(map.get('string')); // 输出: Hello
console.log(map.get(1));       // 输出: One
console.log(map.get({ key: 'value' })); // 输出: undefined (因为是不同的对象实例)

WeakMap 示例

const weakMap = new WeakMap();// 只能使用对象作为键
const obj = { key: 'value' };
weakMap.set(obj, 'Data associated with obj');console.log(weakMap.get(obj)); // 输出: Data associated with obj// 如果 obj 不再被其他变量引用，它可能会被垃圾回收
obj = null; // 解除引用