如何避免在 JavaScript 中只有 id 值发生变化的重复代码？

Question

我最近才开始学习 HTML 和 HTML5。我的网站涉及不同的音频播放器播放不同的曲调/mp3。目前，我为每个音频播放器和每个播放/暂停和停止按钮创建了不同的 ID 名称。

我播放这个的 JavaScript 文件包含不必要的类似代码重复。我想有一个更好的方法可以使用变量来做到这一点，这样代码就不会用不同的 id 名称重复，但我对 JavaScript 不太熟悉。

这是我的 JavaScript 文件的 sn-p 的样子。

$(document).ready(function() {
  $("#play-bt1").click(function() {
    $("#audio-player1")[0].play();
    $("#message").text("Music started");
  })

  $("#pause-bt1").click(function() {
    $("#audio-player1")[0].pause();
    $("#message").text("Music paused");
  })

  $("#stop-bt1").click(function() {
    $("#audio-player1")[0].pause();
    $("#audio-player1")[0].currentTime = 0;
    $("#message").text("Music Stopped");
  })
})

$(document).ready(function() {
  $("#play-bt2").click(function() {
    $("#audio-player2")[0].play();
    $("#message").text("Music started");
  })

  $("#pause-bt2").click(function() {
    $("#audio-player2")[0].pause();
    $("#message").text("Music paused");
  })

  $("#stop-bt2").click(function() {
    $("#audio-player2")[0].pause();
    $("#audio-player2")[0].currentTime = 0;
    $("#message").text("Music Stopped");
  })
})
$(document).ready(function() {
  $("#play-bt3").click(function() {
    $("#audio-player3")[0].play();
    $("#message").text("Music started");
  })

  $("#pause-bt3").click(function() {
    $("#audio-player3")[0].pause();
    $("#message").text("Music paused");
  })

  $("#stop-bt3").click(function() {
    $("#audio-player3")[0].pause();
    $("#audio-player3")[0].currentTime = 0;
    $("#message").text("Music Stopped");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="grid_12" id="content">

  <div class="grid_4 alpha">
    <div class="audiobox">
      <audio id="audio-player" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4">
    <div class="audiobox">
      <audio id="audio-player1" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt1" href="#">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt1" href="#">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4 omega">
    <div class="audiobox">
      <audio id="audio-player2" name="audio-player" src="images/beatbox.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt2">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt2">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>




  <div class="grid_4 alpha">
    <div class="audiobox">
      <audio id="audio-player3" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt3">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt3">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4">
    <div class="audiobox">
      <audio id="audio-player4" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt4">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt4">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4 omega">
    <div class="audiobox">
      <audio id="audio-player5" name="audio-player" src="images/beatbox.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt5">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt5">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>


  <div class="grid_4 alpha">
    <div class="audiobox">
      <audio id="audio-player6" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt6">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt6">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4">
    <div class="audiobox">
      <audio id="audio-player7" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt7">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt7">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <feature class="grid_4 omega">
    <div class="audiobox">
      <audio id="audio-player8" name="audio-player" src="images/beatbox.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt8">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt8">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </feature>


</section>

Answer 1

为避免代码重复，需要为常见行为引入一个函数，为可变部分引入参数。

从示例的第一部分开始：

$(document).ready(function(){
    $("#play-bt1").click(function(){
        $("#audio-player1")[0].play();
        $("#message").text("Music started");
    })

    $("#pause-bt1").click(function(){
        $("#audio-player1")[0].pause();
        $("#message").text("Music paused");
    })

    $("#stop-bt1").click(function(){
        $("#audio-player1")[0].pause();
        $("#audio-player1")[0].currentTime = 0;
        $("#message").text("Music Stopped");
    })
})

我们可以将这个构建块包装在一个函数中。第一步是为这个函数找到一个好名字。由于该函数在文档准备好时初始化播放器，因此显式名称为initPlayerWhenDocumentReady。包裹在函数中，代码变为：

function initPlayerWhenDocumentReady(){
    $(document).ready(function(){
        $("#play-bt1").click(function(){
            $("#audio-player1")[0].play();
            $("#message").text("Music started");
        })

        $("#pause-bt1").click(function(){
            $("#audio-player1")[0].pause();
            $("#message").text("Music paused");
        })

        $("#stop-bt1").click(function(){
            $("#audio-player1")[0].pause();
            $("#audio-player1")[0].currentTime = 0;
            $("#message").text("Music Stopped");
        })
    })
}

下一步是提取变量部分的参数。一种可能性是添加单独的参数playerId、playButtonId、pauseButtonId、stopButtonId。

但再看一遍，似乎所有标识符都遵循相同的格式，只有末尾的数字发生了变化：1、2、3。因此，我们可以只为数字添加一个参数playerNumber：

function initPlayerWhenDocumentReady( playerNumber ){
    $(document).ready(function(){
        $("#play-bt"+playerNumber).click(function(){
            $("#audio-player"+playerNumber)[0].play();
            $("#message").text("Music started");
        })

        $("#pause-bt"+playerNumber).click(function(){
            $("#audio-player"+playerNumber)[0].pause();
            $("#message").text("Music paused");
        })

        $("#stop-bt"+playerNumber).click(function(){
            $("#audio-player"+playerNumber)[0].pause();
            $("#audio-player"+playerNumber)[0].currentTime = 0;
            $("#message").text("Music Stopped");
        })
    })
}

然后你可以调用这个函数来初始化三个播放器：

initPlayerWhenDocumentReady( 1 );
initPlayerWhenDocumentReady( 2 );
initPlayerWhenDocumentReady( 3 );

以不同的值调用相同的函数允许运行相似的代码，同时减少重复的代码：只有调用被重复。

甚至这种有限的重复也可以避免，通过使用循环，这里定义在一个新函数initPlayers，它以玩家总数为参数：

function initPlayers( total ) {
    for (var i = 1; i <= total; i++ ) {
        initPlayerWhenDocumentReady( i );
    }
}

initPlayers( 3 );