반복적으로 JavaScript에서 선택 옵션 만들기

나는 최근에 Nashville Number System의 수정된 형태로 음악을 차트로 표시하는 Vanilla JavaScript 앱을 완성했습니다.



컴포지션은 그룹화된 선택 모음인 형식으로 처리되며 각 소절은 두 개의 반 소절로 나뉘며 각 소절에는 토닉의 간격과 코드에 대한 문자 수정을 나타내는 두 개의 선택이 있습니다. 양식은 내 백엔드의 데이터베이스 행에 저장된 JSON 개체에서 생성되며 수정 및 저장되면 양식이 동일한 방식으로 유지되도록 JSON 개체로 변환됩니다.

하지만 이 기사에서 이야기하고 싶은 것은 선택 자체입니다. 보시다시피 상당히 단순한 노래에도 많이 있습니다.




그리고 그들 각각에는 많은 옵션이 있습니다. 앞으로 두 번째 옵션 세트인 코드 수정자는 다른 곳에서 확장되거나 참조될 수 있으므로 지원되는 수정자에 대한 업데이트가 있는 경우 앱에서 쉽게 업데이트할 수 있도록 해야 합니다.

이러한 각 옵션 목록을 배열로 만든 다음 선택 항목이 만들어지고 DOM에 추가될 때 선택 항목에 추가하여 두 가지 문제(큰 옵션 목록 및 목록이 나중에 추가될 가능성)를 해결했습니다.

const INTERVALS = ["", "1", "b2", "2", "b3", "3", "b4", "4", "b5", "5", "b6", "6", "b7", "7"]
const MODIFIERS = ["", "maj", "min", "maj7", "min7", "maj9", "min9", "dim"]

...

    static buildSelectsFromHalfMeasure(halfMeasure, targetDiv) {
        const intervalSelect = document.createElement('select')
        targetDiv.appendChild(intervalSelect)

        const modifierSelect = document.createElement('select')
        targetDiv.appendChild(modifierSelect)

        INTERVALS.forEach(interval => {
            const option = document.createElement('option')
            option.text = interval
            intervalSelect.add(option)
        })

        MODIFIERS.forEach(modifier => {
            const option = document.createElement('option')
            option.text = modifier
            modifierSelect.add(option)
        })

        intervalSelect.value = halfMeasure["interval"]
        modifierSelect.value = halfMeasure["modifier"]

        intervalSelect.addEventListener('change', Song.addSaveButtonIfNonePresent)
        modifierSelect.addEventListener('change', Song.addSaveButtonIfNonePresent)
    }

각 절반 측정에 대해 div를 만듭니다. 해당 div를 측정에 속하는 div에 추가하고 절반 측정 div에 두 개의 선택을 추가한 다음 간격 및 수정자 목록을 반복하여 선택에 대한 옵션을 채웁니다. 나중에 "13sus4add2"와 같이 겉보기에 이상해 보이는 코드 수정자를 추가하고 싶다면 한 곳에서 추가할 수 있으며 사용 가능한 모든 수정자를 참조하는 모든 곳에서 문제가 해결되었음을 알 수 있습니다.