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

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() .