Anda Tidak Akan Percaya Utiliti JavaScript yang Mengubah Ini!

Hai, saya Haroon, Pembangun Tindanan Penuh Kanan. Hari ini, saya akan berkongsi beberapa fungsi JavaScript yang sangat berguna yang boleh anda gunakan dalam hampir setiap projek

1. Menjejaki keterlihatan unsur dalam ruang pandang

Utiliti ini menggunakan Intersection Observer API untuk menjejaki keterlihatan elemen dalam viewport. Ia memanggil fungsi panggil balik dengan nilai boolean yang menunjukkan sama ada elemen itu kelihatan atau tidak.

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. Titik putus ruang pandang reaktif

Utiliti ini membolehkan anda mentakrifkan titik putus dan dimaklumkan apabila lebar ruang pandang melintasi titik putus ini. Ia memanggil fungsi panggil balik dengan nilai titik putus semasa.

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 Papan Klip Reaktif

Utiliti ini mendengar untuk menyalin acara dan membaca teks yang disalin daripada papan keratan, memanggil fungsi panggil balik dengan teks yang disalin.

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 Orientasi Skrin Reaktif

Utiliti ini mendengar perubahan dalam orientasi skrin dan memanggil fungsi panggil balik dengan jenis orientasi semasa.

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

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

5. Keadaan reaktif untuk menunjukkan sama ada tetikus meninggalkan halaman

Utiliti ini menjejak apabila tetikus meninggalkan atau memasuki halaman dan memanggil fungsi panggil balik dengan nilai boolean yang menunjukkan sama ada tetikus telah meninggalkan halaman.

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`);
});

---

Setiap utiliti ini memanfaatkan pendengar acara dan API moden untuk menyediakan gelagat reaktif dalam aplikasi JavaScript anda.

Terima kasih kerana meluangkan masa untuk meneroka utiliti JavaScript yang berkuasa ini bersama saya. Saya harap anda mendapati mereka berguna dan menarik seperti saya. Jangan ragu untuk mencuba fungsi ini dalam projek anda dan lihat cara ia boleh meningkatkan proses pembangunan anda. Jika anda mempunyai sebarang soalan atau ingin berkongsi petua anda sendiri, sila tulis dalam komen. Selamat mengekod!

Atas ialah kandungan terperinci Anda Tidak Akan Percaya Utiliti JavaScript yang Mengubah Ini!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!