嗨，我是 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 實用程式。我希望你能像我一樣發現它們有用且令人興奮。請隨意在您的專案中嘗試這些功能，看看它們如何增強您的開發流程。如果您有任何疑問或想分享自己的技巧，請在評論中寫下。快樂編碼！