有人知道我可以做这个javascript代码使它更可靠吗?

Question

我还不太了解javascript，我最近才开始学习它，因为我需要它用于一个微控制器项目，我们需要使用具有网络功能的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，您还可以使用fetchAPI:

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