これらの時代を変える JavaScript ユーティリティは信じられないでしょう!-jsチュートリアル-php.cn

これらの時代を変える JavaScript ユーティリティは信じられないでしょう!

WBOY

リリース： 2024-07-19 12:42:42

オリジナル

313 人が閲覧しました

You Won

こんにちは、シニアフルスタック開発者の 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 ユーティリティを一緒に探索するために時間を割いていただきありがとうございます。皆さんも私と同じように便利で刺激的なものだと感じていただければ幸いです。プロジェクトでこれらの関数を自由に試して、開発プロセスをどのように強化できるかを確認してください。ご質問がある場合、または独自のヒントを共有したい場合は、コメントに書き込んでください。コーディングを楽しんでください!

以上がこれらの時代を変える JavaScript ユーティリティは信じられないでしょう!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。