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

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

您在此处尝试使用的技术称为“不要重复自己”，或 '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.play() 之前调用 audio.load() 。

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

How can I reduce the number of functions containing marginally different logic?

jquery

function

optimization

minify

audio-player