避免在Javascript中重复代码:播放音频的按钮太多

Avoid repeated codes in Javascript: many buttons for playing audios

本文关键字：播放 音频 太多 按钮 代码 Javascript      更新时间：2023-09-26

这是一个简单的情况:
有26个按钮26个字母。点击该按钮，将播放一次对应字母的音频。如何使代码尽可能简洁?


我想这样做:
我打算建一个学习语言的网站。下面是我需要创建的按钮:

  1. 当鼠标进入按钮(原本为白色)区域(mouseenter())时，按钮变为蓝色并重复播放音频;

  2. 如果鼠标离开按钮区域(mouseleave())，按钮将变白并暂停播放音频

  3. 我可能有很多很多按钮或类似的UI组件。

    如何设计使代码尽可能简洁和可重用?

我已经实现了一个按钮的动画，请看下面的代码。但是我发现为每个按钮编写非常相似的代码是很尴尬的。在这种情况下请帮我抽象代码 

<audio loop src="audio/alphabet/n.mp3" id="alphabetpronunciationn"></audio>
<button id="buttonalphabetn" class="btn btn-default btn-block">N n</button>
<script type="text/javascript">
var audioalphabetn = document.getElementById("alphabetpronunciationn");
    $("#buttonalphabetn").mouseenter(function () {
    $("#buttonalphabetn").addClass("btn-primary");
    audioalphabetn.play();
}).mouseleave(function () {
    $("#buttonalphabetn").removeClass("btn-primary");
    audioalphabetn.pause();
});
</script>

你可以这样做:

 $("document").ready(function(){
    $('.btn-audio').on('mouseenter',function() {
        // add class to button, find previous sibling, start play
        $(this).addClass("btn-primary").prev().play();
    }).on('mouseleave',function() {
        // and reversve...
        $(this).removeClass("btn-primary").prev().pause();
    });
 });

如果这是你真正的html。如果标签嵌套不同，则可能需要另一个选择器，而不是prev，或者可能需要一个包含相应音频文件id的按钮的数据属性。

<audio loop src="audio/alphabet/n.mp3" id="alphabetpronunciationn"></audio>
<button id="buttonalphabetn" class="btn btn-audio btn-default btn-block">N n</button>

构建一个letter -> audio element映射，这样您就可以轻松地引用给定其对应字母的音频元素。例如

var audios = {};
'abc...xyz'.split('').forEach(function(letter) {
   audios[letter] = document.getElementById('alphabetpronunciation' + letter);
});

为每个按钮添加一个data-*属性，包含它所代表的字母，并赋予每个按钮相同的类而不是单独的id:

<button data-letter="n" class="letter btn btn-default btn-block">N n</button>

使用该类将事件处理程序绑定到所有按钮。事件处理程序获取它们的data-letter属性并访问映射:

$("button.letter").mouseenter(function () {
    $(this).addClass("btn-primary");
    audios[$(this).data('letter')].play();
});

我强烈推荐阅读jQuery教程，特别是关于选择器和事件的。

为每个按钮添加一个data属性，以表示它所代表的字母。在这个例子中，我将使用一个名为"playLetter"的数据属性。

<Button id="SomeButtonA" data-playLetter="A">Play A</Button> <Button id="SomeButtonB" data-playLetter="B">Play B</Button> <Button id="SomeButtonC" data-playLetter="C">Play C</Button>

选择所有具有playLetter属性和分配处理程序的按钮。这意味着将为每个按钮调用相同的处理程序。在处理程序中，使用$(this).data("playLetter")读取data属性并确定为特定按钮播放哪个字母。

$(":Button[data-playLetter]").mouseenter(function () {
    $(this).addClass("btn-primary");
    audioalphabet.play($(this).data("playLetter");
    });
$(":Button[data-playLetter]").mouseleave(function () {
    $(this).removeClass("btn-primary");
    audioalphabet.pause();
    });

我自己想出了一个解决办法。以下是我所做的:

<button id="buttonalphabetü" 
  class="btn btn-default btn-block buttonchangingcolorblue" 
  onmouseenter="play('alphabetpronunciationn')"
  onmouseleave="pause('alphabetpronunciationn')">N n</button>
// This part can be reused
<script type="text/javascript">
  function play(audio_id){
    document.getElementById(audio_id).play();
  }
  function pause(audio_id){
    document.getElementById(audio_id).pause();
  }
</script>
// This part abstract the changing color animation into a class(attribute)
<script type="text/javascript">
$(".buttonchangingcolorblue").mouseenter(function () {
    $(this).addClass("btn-primary");
    }).mouseleave(function () {
$(this).removeClass("btn-primary");
    });
</script>

编程真的很有趣!我喜欢编程!

相关文章：