Lima helah JavaScript yang hebat

Hai!
Di bawah ini anda akan menemui 5 helah JavaScript terdekat yang boleh anda mulakan hari ini dalam projek anda. Kedua-dua pemula dan pembangun yang lebih berpengalaman mungkin menganggapnya menarik:

1. Panggilan Fungsi Menyahlantun

Menyahlantun ialah teknik untuk mengehadkan bilangan kali fungsi dilaksanakan sebagai tindak balas kepada peristiwa seperti menatal. Ini boleh meningkatkan prestasi dengan memastikan fungsi menjalankan jumlah masa yang ditetapkan selepas acara dihentikan.

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// Usage Example
window.addEventListener('resize', debounce(() => {
    console.log('Window resized!');
}, 500));

2. Mencipta Modal Mudah

Anda boleh mencipta dialog modal mudah dengan hanya HTML dan JavaScript. Begini cara anda boleh melakukannya:

<!-- Modal HTML -->
<div id="myModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5);">
    <div style="background:#fff; margin: 15% auto; padding: 20px; width: 80%;">
        <span id="closeModal" style="cursor:pointer; float:right;">&times;</span>
        <p>This is a simple modal!</p>
    </div>
</div>

<button id="openModal">Open Modal</button>

<script>
    const modal = document.getElementById('myModal');
    const openBtn = document.getElementById('openModal');
    const closeBtn = document.getElementById('closeModal');

    openBtn.onclick = function() {
        modal.style.display = 'block';
    };

    closeBtn.onclick = function() {
        modal.style.display = 'none';
    };

    window.onclick = function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    };
</script>

3. Nama Harta Dinamik dalam Objek

Anda boleh menggunakan nama sifat yang dikira dalam literal objek untuk mencipta objek dengan kekunci dinamik.

const key = 'name';
const value = 'John';

const obj = {
    [key]: value,
    age: 30
};

console.log(obj); // { name: 'John', age: 30 }

4. Mengesan Prestasi dengan API Prestasi

Anda boleh mengukur prestasi bahagian berlainan kod anda menggunakan Performance API, yang berguna untuk mengenal pasti kesesakan.

console.time("myFunction");

function myFunction() {
    for (let i = 0; i < 1e6; i++) {
        // Some time-consuming operation
    }
}

myFunction();
console.timeEnd("myFunction"); // Logs the time taken to execute `myFunction`

5. Warisan Prototaip

Anda boleh menggunakan warisan prototaip JavaScript untuk mencipta struktur seperti kelas yang ringkas.

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
    Animal.call(this, name); // Call parent constructor
}

// Inheriting from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    console.log(`${this.name} barks.`);
};

const dog = new Dog('Rex');
dog.speak(); // "Rex barks."

Semoga, anda telah mempelajari sesuatu yang baharu hari ini.

Semoga hari yang baik!

Atas ialah kandungan terperinci Lima helah JavaScript yang hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!