커스텀 이벤트 생성 및 소비

이번 주에 저는 DOM API에 대해 새로운 것을 배웠고, 맞춤 이벤트를 만들고 사용하는 방법에 대해 배웠습니다. 클릭 이벤트를 수신하는 대신 수신할 고유한 이벤트를 생성한다고 상상해 보십시오! 멋지죠? 내가 이벤트 리스너를 사용하고 있는 한, 내가 알지도 못했던 이 멋진 기능에 대해 더 많이 보여드리겠습니다.
맞춤 이벤트를 사용하는 한 가지 가능한 용도를 설명하기 위해 프로젝트를 만들었습니다. 예를 들어 주방 시스템에서 주문을 듣고 요리사가 다음에 무엇이 나올지 알 수 있도록 한 다음 해당 주문을 화면에 인쇄하고 싶습니다. github 의 프로젝트에서 이것을 시뮬레이션했습니다.

// fetch data from api using netlify functions
const fetchData = async () => {
    //get the data from my super secret netlify function
    const res = await fetch(`/.netlify/functions/token-hider`)
    //if something goes wrong, throw an error
    if (!res.ok) {
        throw new Error(`http response: ${res.status}`)
    }
    // if something goes right, save the json response
    const getMeals = await res.json();
    // pass the fetched data to a new function to process
    processOrder(getMeals)

}

우리는 표준 데이터 가져오기로 여정을 시작합니다. 저는 netlify cli를 사용하여 한 달에 2달러에 구입한 API 키를 숨기고 있지만 구입에 관심이 없는 분들을 위해 무료 api는 here에서 찾을 수 있습니다. . 이 프로그램의 주요 작업은 가져온 데이터를 함수로 전달하여 데이터를 자체적인 자유 범위의 유기적이며 윤리적으로 소싱된 이벤트로 처리한 후에 수행됩니다.

// This function is called to get a random selection of meals from the array passed in from fetch
const processOrder = (getMeals) => {
    //save an array of randomly selected meals
    const mealsData = getMeals.meals
    // select a random number of meals starting from the beginning of the mealsData array
    // at least one, up to the length of the array given.
    const customerOrder = mealsData.slice(0, Math.floor(Math.random() * mealsData.length) + 1)
// map an array of objects
    const orderDetails = customerOrder.map(item => (
        {
            mealName: item.strMeal,
            mealImg: item.strMealThumb
        }
    ))

// create and initialize event. 

    var orderEvent = new CustomEvent(
        'order',
        { detail: orderDetails }
    );
    // tell the browser api to fire the event
    window.dispatchEvent(orderEvent)
}

const stopMe = setInterval(fetchData, 2000);

먼저 데이터 배열에서 임의의 수의 항목을 가져오고 개체 배열을 매핑하여 식사 이름과 이미지를 저장합니다. 다음 트릭을 위해 구문을 사용하여 사용자 지정 이벤트를 만들고 초기화합니다.

var orderEvent = new CustomEvent('whatever name you want to call the event', { detail: data-you-want-to-pass }

그런 다음 window.dispatchEvent(variable-you-saved-custom-event-to)를 사용하여 이벤트를 발생시킵니다.

이 프로젝트에 대한 초기 생각은 이벤트를 발생시키는 임의의 시간 간격을 갖는 것이었지만 setInterval 함수에 임의의 시간 간격을 삽입하는 방법을 아직 파악하지 못했기 때문에 지금은 2초로 설정했습니다. 2초마다 order 이벤트를 발생시키는 processOrder 함수를 호출하는 fetchData 함수를 호출합니다. 브라우저의 API에서 다른 기본 제공 이벤트와 마찬가지로 주문 이벤트를 사용합니다. 주문 이벤트가 창 인터페이스로 전달되었으므로 창 인터페이스에 이벤트 리스너를 추가한 다음 event.detail을 사용하여 데이터를 처리하는 콜백 함수를 추가합니다(사용자 정의 이벤트를 초기화할 때 세부 정보에서 얻는 항목 설정을 기억하십시오).

window.addEventListener('order', (evt) => {
    let root = document.getElementById('root');
    const section = document.createElement('section');
    let orderNumber = document.createElement('p')

    section.className = 'order-container'
    orderNumber.className = 'order-number'
    orderNumber.innerText = `Order ${Math.floor(Math.random() * 1000)}`
    section.append(orderNumber)

    const displayOrder = evt.detail.map(item => {
        const p = document.createElement('p')
        const img = document.createElement('img')
        const div = document.createElement('div')
        div.className = 'item-in-order'
        img.src = `${item.mealImg}/preview`
        img.alt = item.mealName
        p.innerText = item.mealName
        div.append(p)
        div.append(img)

        return div

    })

    displayOrder.forEach(item => {
        section.append(item)
    })
    root.append(section)
})

해당 데이터를 DOM에 넣으면 다음과 같은 결과가 나타납니다.



그게 전부입니다! 꿈의 회사와 온라인 평가를 할 때 몰랐던 지식을 공유하고 싶었고 그 공백을 메우고 싶었습니다. 무언가를 배우는 가장 좋은 방법은 그것을 다른 사람에게 설명하는 것입니다. 제 설명이 간단하고 따라하기 쉬웠으면 좋겠습니다. 그렇지 않다면 어떻게 개선할 수 있는지 알려주세요!