如何减少包含略有不同逻辑的函数数量？

Question

我目前正在使用javascript中使用内置音频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();
});

我怎样才能把它变成一个函数而不是六个？如果我在播放列表中添加更多标签，我还需要能够选择多少首歌曲。谢谢

Answer 1

您在这里尝试使用的技术称为“不要重复自己”或“干”。

在这种情况下，最简单的方法是使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() 。