Anda Tidak Akan Percaya Utiliti JavaScript yang Mengubah Ini!
Jul 19, 2024 pm 12:42 PMHai, 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!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom
