조금 다른 로직을 포함하는 함수의 수를 줄이려면 어떻게해야합니까?

Question

저는 현재 자바 스크립트에서 inbuilt 오디오 API를 사용하는 음악 플레이어에서 작업하고 있습니다. 은 다음과 같습니다 : 내가 노래를 나는 노래가 나와있는 다른 탭을 누를 때마다 변경 재생 목록 기능이

. 코드는 다음과 같습니다.

$('#song1').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/1.mp3"; 
    audio.play(); 
}); 

$('#song2').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/2.mp3"; 
    audio.play(); 
}); 

$('#song3').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/3.mp3"; 
    audio.play(); 
}); 

$('#song4').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/4.mp3"; 
    audio.play(); 
}); 

$('#song5').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/5.mp3"; 
    audio.play(); 
}); 

$('#song6').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/6.mp3"; 
    audio.play(); 
}); 

어떻게 이것을 6 개 대신 하나의 기능으로 가져올 수 있습니까? 또한 재생 목록에 더 많은 탭을 추가하면 노래 수를 선택할 수 있어야합니다. 고마워요

Answer 1

여기에서 고용하려고하는 기술을 '반복하지 말 것'또는 'DRY'라고합니다.

이 경우 가장 간단한 방법은 HTML 구조를 모든 요소에 공통으로 사용하고 class 특성을 사용하여 그룹화하고 data 특성을 사용하여 사용자 지정 메타 데이터를 보관하는 것입니다. 그리고이 같은 단일 이벤트 모두에 대한 핸들러, 뭔가를 사용할 수 있습니다

<button class="song" data-src="../sounds/1.mp3">Song 1</button> 
<button class="song" data-src="../sounds/2.mp3">Song 2</button> 

$('.song').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = $(this).data('src'); 
    audio.play(); 
}); 

이 기술은 간단하고 명료 한 HTML과 JS 코드 및 문제의 더 나은 분리 등 여러 가지 장점을 가지고 있습니다; 즉, 재생할 다른 파일을 추가하려면 올바른 data 속성을 가진 다른 HTML 요소를 추가하기 만하면 JS 코드를 건드리지 않고도 완료 할 수 있습니다.

콘텐츠가 아직 캐시되지 않은 경우 audio.load()전에audio.play()으로 전화해야 할 수도 있습니다.