Rumah hujung hadapan web tutorial js Anda Tidak Akan Percaya Utiliti JavaScript yang Mengubah Ini!

Anda Tidak Akan Percaya Utiliti JavaScript yang Mengubah Ini!

Jul 19, 2024 pm 12:42 PM

You Won

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'}`);
});
Salin selepas log masuk

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}`);
});
Salin selepas log masuk

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}`);
});
Salin selepas log masuk

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}`);
});
Salin selepas log masuk

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`);
});
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Ganti aksara rentetan dalam javascript Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen jQuery mendapatkan padding/margin elemen Mar 01, 2025 am 08:53 AM

jQuery mendapatkan padding/margin elemen

periksa jQuery jika tarikh sah periksa jQuery jika tarikh sah Mar 01, 2025 am 08:51 AM

periksa jQuery jika tarikh sah

10 Tab Accordion JQuery 10 Tab Accordion JQuery Mar 01, 2025 am 01:34 AM

10 Tab Accordion JQuery

10 patut diperiksa plugin jQuery 10 patut diperiksa plugin jQuery Mar 01, 2025 am 01:29 AM

10 patut diperiksa plugin jQuery

HTTP Debugging dengan Node dan HTTP-Console HTTP Debugging dengan Node dan HTTP-Console Mar 01, 2025 am 01:37 AM

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom Tutorial Persediaan API Carian Google Custom Mar 04, 2025 am 01:06 AM

Tutorial Persediaan API Carian Google Custom

jQuery tambah bar scroll ke div jQuery tambah bar scroll ke div Mar 01, 2025 am 01:30 AM

jQuery tambah bar scroll ke div

See all articles