嗨，我是 Haroon，一名高级全栈开发人员。今天，我将分享一些非常有用的 JavaScript 函数，您几乎可以在每个项目中使用它们

1. 跟踪视口中元素的可见性

此实用程序使用 Intersection Observer API 来跟踪视口中元素的可见性。它调用带有布尔值的回调函数，指示元素是否可见。

function onVisibilityChange(element, callback) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => callback(entry.isIntersecting));
  });
  observer.observe(element);
}

// Example usage:
const targetElement = document.querySelector('#target');
onVisibilityChange(targetElement, (isVisible) => {
  console.log(`Element is ${isVisible ? 'visible' : 'not visible'}`);
});

2. 反应式视口断点

此实用程序允许您定义断点并在视口宽度穿过这些断点时收到通知。它使用当前断点值调用回调函数。

function onBreakpointChange(breakpoints, callback) {
  const mediaQueries = breakpoints.map(bp => window.matchMedia(`(max-width: ${bp}px)`));

  function checkBreakpoints() {
    const breakpoint = breakpoints.find((bp, i) => mediaQueries[i].matches);
    callback(breakpoint || 'default');
  }

  mediaQueries.forEach(mq => mq.addListener(checkBreakpoints));
  checkBreakpoints();
}

// Example usage:
onBreakpointChange([600, 900, 1200], (breakpoint) => {
  console.log(`Current breakpoint: ${breakpoint}`);
});

3.反应式剪贴板API

此实用程序侦听复制事件并从剪贴板读取复制的文本，使用复制的文本调用回调函数。

function onClipboardChange(callback) {
  document.addEventListener('copy', async () => {
    const text = await navigator.clipboard.readText();
    callback(text);
  });
}

// Example usage:
onClipboardChange((text) => {
  console.log(`Copied text: ${text}`);
});

4. 反应式屏幕方向 API

此实用程序侦听屏幕方向的变化并使用当前方向类型调用回调函数。

function onOrientationChange(callback) {
  window.addEventListener('orientationchange', () => {
    callback(screen.orientation.type);
  });
}

// Example usage:
onOrientationChange((orientation) => {
  console.log(`Current orientation: ${orientation}`);
});

5.反应状态显示鼠标是否离开页面

此实用程序跟踪鼠标何时离开或进入页面，并调用带有布尔值的回调函数，指示鼠标是否离开页面。

function onMouseLeavePage(callback) {
  document.addEventListener('mouseleave', () => {
    callback(true);
  });

  document.addEventListener('mouseenter', () => {
    callback(false);
  });
}

// Example usage:
onMouseLeavePage((hasLeft) => {
  console.log(`Mouse has ${hasLeft ? 'left' : 'entered'} the page`);
});

这些实用程序中的每一个都利用事件侦听器和现代 API 在 JavaScript 应用程序中提供反应行为。

感谢您花时间与我一起探索这些强大的 JavaScript 实用程序。我希望你能像我一样发现它们有用且令人兴奋。请随意在您的项目中尝试这些功能，看看它们如何增强您的开发过程。如果您有任何疑问或想分享自己的技巧，请在评论中写下。快乐编码！