// 距离向上滑动的距离 可优化为 外部传入
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; // 解除引用
总结
- Map 更通用,适用于大多数需要键值对的场景。
- WeakMap 更适合用于临时数据存储,特别是当你希望数据在对象不再使用时自动被垃圾回收。
选择哪种数据结构取决于你的具体需求和使用场景。