如何避免JavaScript中只有id值更改的重复代码

How to avoid duplicate code where only id values change in JavaScript?

本文关键字：代码 id JavaScript 何避免      更新时间：2023-09-26

我最近刚开始学习HTML和HTML5。我的网站涉及不同的音频播放器播放不同的音乐/MP3。目前，我已经为每个音频播放器和每个播放/暂停和停止按钮创建了不同的id名称。

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

以下是我的JavaScript文件的一个片段。

$(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>

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

从示例的第一部分开始：

$(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 );
相关文章：