다섯 가지 멋진 JavaScript 트릭

안녕하세요!
아래에서는 오늘부터 프로젝트에 사용할 수 있는 5가지 가까운 JavaScript 트릭을 찾을 수 있습니다. 초보자와 숙련된 개발자 모두 흥미로울 수 있습니다.

1. 디바운싱 함수 호출

디바운싱은 스크롤과 같은 이벤트에 대한 응답으로 함수가 실행되는 횟수를 제한하는 기술입니다. 이렇게 하면 이벤트가 중지된 후 일정 시간 동안 함수가 실행되도록 하여 성능을 향상할 수 있습니다.

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. 간단한 모달 만들기

HTML과 JavaScript만으로 간단한 모달 대화 상자를 만들 수 있습니다. 방법은 다음과 같습니다.

<!-- 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. 객체의 동적 속성 이름

객체 리터럴에 계산된 속성 이름을 사용하여 동적 키가 있는 객체를 생성할 수 있습니다.

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

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

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

4. Performance API로 성능 감지

병목 현상을 식별하는 데 도움이 되는 Performance API를 사용하여 코드의 다양한 부분의 성능을 측정할 수 있습니다.

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. 프로토타입 상속

JavaScript의 프로토타입 상속을 활용하여 간단한 클래스와 같은 구조를 만들 수 있습니다.

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."

오늘 새로운 것을 배우셨기를 바랍니다.

좋은 하루 보내세요!

위 내용은 다섯 가지 멋진 JavaScript 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!