有人知道我能对这些javascript代码做些什么来提高它的可靠性吗？

Question

我对javascript还不太了解，我最近才开始学习它bc，我需要它用于一个微控制器项目，我们需要一个具有网络功能的MCU，所以除了制作mcu代码之外，我还负责创建它提供给用户的网页。在一个例子中，我创建了一个部分，用户将能够看到所有(实际上，至少是我认为对他们重要的部分)他们要设置的Led矩阵的参数。问题是，为了加载参数，我使用了一种我认为不太有效的方法，而我仍然对js不太了解这一事实无助于此。这其中的任何一个似乎有一个更容易的解决方案对你？

<div class="row">
  <div id="column1" class="column">
  </div>

  <div class="column middle">
    <h3 style="color: rgb(187, 187, 187);">Parámetros guardados: </h3>
    <div class="guardado">
    <p >Mensaje guardado inicial: <span id="mensaje"></span></p>
    <p >Brillo guardado: <span id="brightness"></span></p>
    <p >Velocidad guardada: <span id="speed"></span></p>
    <p >Alineación: <span id="text_align"></span></p>
    <p >Modo operando: <span id="MODO"></span></p>
    <p >Tiempo entre mensajes (M2): <span id="TIME"></span></p>
    <p >Efecto (M1): <span id="EM1"></span></p>
    <p >Efecto inicio (M2): <span id="E1M2"></span></p>
    <p >Efecto salida (M2): <span id="E2M2"></span></p>
</div>
</div>
  
 <script>
    //Load parameters
    var xhttp = new XMLHttpRequest();           //Message
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("mensaje").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/mensaje", true);
    xhttp.send();

    var xhttp = new XMLHttpRequest();           //Brightness
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("brightness").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/brillo_guardado.txt", true);
    xhttp.send();

    var xhttp = new XMLHttpRequest();           //Speed
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("speed").innerHTML = this.responseText;
        document.getElementById("speed").innerHTML += "%";
      }
    };
    xhttp.open("GET", "/velocidad_guardado.txt", true);
    xhttp.send();   

    var xhttp = new XMLHttpRequest();           //MODE
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("MODO").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/modo_guardado.txt", true);
    xhttp.send();   

    var xhttp = new XMLHttpRequest();           //Text alignment
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("text_align").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/alineacion_guardado.txt", true);
    xhttp.send();

    var xhttp = new XMLHttpRequest();         //var initial_time
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("TIME").innerHTML = this.response;
        document.getElementById("TIME").innerHTML += "ms";
      }
    };
    xhttp.open("GET", "/tiempo_guardado.txt");
    xhttp.send();

    var xhttp = new XMLHttpRequest();         //EFFECT MODE 1
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("EM1").innerHTML = this.response;
      }
    };
    xhttp.open("GET", "/effecto_modo1_guardado.txt");
    xhttp.send();

    var xhttp = new XMLHttpRequest();         //EFFECT 1 MODE 2
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("E1M2").innerHTML = this.response;
      }
    };
    xhttp.open("GET", "/effecto1_m2_guardado.txt");
    xhttp.send();
    
    var xhttp = new XMLHttpRequest();         //EFFECT 2 MODE 2
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("E2M2").innerHTML = this.response;
      }
    };
    xhttp.open("GET", "/effecto2_m2_guardado.txt");
    xhttp.send();
    
</script> 

这就是加载后的样子。

页面将要求mcu提供它存储的几个参数，然后显示它们。

Answer 1

代码可以被清理很多：

function loadText(elementId, url, suffix = ""){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById(elementId).innerHTML = this.responseText + suffix;
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

//Load parameters
loadText("mensaje",    "/mensaje");
loadText("brightness", "/brillo_guardado.txt");
loadText("speed",      "/velocidad_guardado.txt", "%");
loadText("MODO",       "/modo_guardado.txt");
loadText("text_align", "/alineacion_guardado.txt");
loadText("TIME",       "/tiempo_guardado.txt", "ms");
loadText("EM1",        "/effecto_modo1_guardado.txt");
loadText("E1M2",       "/effecto1_m2_guardado.txt");
loadText("E2M2",       "/effecto2_m2_guardado.txt");

当您重复这样的代码时，将其放入一个函数中。

除此之外，没有什么可以让它更快，因为您正在从一个单独的url加载每个单独的字符串。

与传统的XMLHttpRequest不同，您还可以使用API接口。

function loadText(elementId, url, suffix = ""){
    fetch(url).then((response) => {
        document.getElementById(elementId).innerHTML = response + suffix;
    });
}