1

Intento reducir código drásticamente en mi programa, ya que tengo 3 funciones distintas, con exactamente la misma estructura, donde lo único que cambian son los nombres. Voy a poner solo una como ejemplo ya que son algo largas:

addPower(el)   {
      var self = this;

      var temPower   = document.querySelector("#temp-power").innerHTML;

      let power = document.createElement("div");
      power.innerHTML = temPower;
      el.querySelector(".container-power").appendChild(power);

      power.querySelectorAll(".lbl-tmp-crd").forEach(item=>{
            item.addEventListener("keyup", ()=>{
               this.sndFrm();
            });
         });

      el.querySelectorAll("label[data-name=labe_power]").forEach((item,index)=>{
            if(index>0){
              item.remove();
            }
         });

      power.querySelectorAll("input[name=t_power]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      power.querySelectorAll("input[name=v_power]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      power.querySelectorAll("input[name=p_power]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      power.querySelectorAll("input[name=plus_]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      power.querySelector(".btn-event-disAble").addEventListener("click", (e)=>{
         this.disAble(e);
         if (e.target.getAttribute("data-disable")==null){
            e.target.setAttribute("data-disable",1);
         } else {
            e.target.removeAttribute("data-disable");
         }
      });

      power.querySelector(".btn-event-addInpt").addEventListener("click", (e)=>{
         this.addInpt(e);
      });

      power.querySelector(".btn-event-erase").addEventListener("click", (e)=>{
         this.eraseBtn(e);
      });

      self.draggedNODE = null;
      power.querySelectorAll(".sortable_p").forEach(item=>{

            item.addEventListener("dragstart", function(){
               self.draggedNODE = item;
            });

            item.addEventListener("dragover", function(evt){
               evt.preventDefault();
            });

            item.addEventListener("drop", function(evt){
               evt.preventDefault();
               if (item != self.draggedNODE) {
                  item.parentNode.insertBefore(self.draggedNODE, item);
               }
            });
      });

      return power;

   }

Esto sería exactamente igual con addEnergy() y addButton() (aunque bueno, este último tiene un pequeño cambio, pero no importa).

Pregunta:

¿Se podría hacer una función, que albergara la estructura de las 3 funciones aquí expuestas cambiando únicamente los nombres?

[EDIT]

Aquí pongo la funcionalidad del programa tal y como lo tengo hasta ahora, hay que dar al botón UPDATE TEXTAREA para que llame a la función deseada, más tarde se añadiría la misma invocación a los otros dos botones adyacentes claro:

class cls0{

   constructor(id, idtxt, params){

      var tem = document.querySelectorAll("template");

      this.id=id;

      this.f0 = document.createElement('div');
      this.f0.innerHTML = tem[3].innerHTML;
      document.getElementById(id).appendChild(this.f0);

      this.contentForm = this.f0.querySelector(".content-form");

      var ff = this.f0.querySelectorAll("button");

      for(let i = 0; i < ff.length; i++){
         if(i==0&&ff[0].addEventListener("click", (el, mag)=>{
            console.log('Hola');
            this.addMagnitude(el, mag);
         }));
         if(i==1&&ff[1].addEventListener("click", ()=>{
            console.log('adios');
         }));
         if(i==2&&ff[2].addEventListener("click", ()=>{
            console.log('adiew');
         }));
      }

      for (let i in params){
         var hi0 = document.createElement('input');
         hi0.type = 'hidden'; //cambiar a text si hay que verlo
         hi0.name = i;
         hi0.value = params[i];

         this.f0.querySelector('form').appendChild(hi0);
      }
   }

   addMagnitude(el, mag)   {
      var self = this;
      console.log(el)
      console.log(mag);

      var temMag   = document.querySelector(`#temp-${mag}`).innerHTML;

      let magnitude = document.createElement("div");
      magnitude.innerHTML = temMag;
      el.querySelector(`.container-${mag}`).appendChild(magnitude);

      magnitude.querySelectorAll(".lbl-tmp-crd").forEach(item=>{
            item.addEventListener("keyup", ()=>{
               this.sndFrm();
            });
         });

      el.querySelectorAll(`label[data-name=labe_${mag}]`).forEach((item,index)=>{
            if(index>0){
              item.remove();
            }
         });

      magnitude.querySelectorAll(`input[name=t_${mag}]`).forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      magnitude.querySelectorAll(`input[name=v_${mag}]`).forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      magnitude.querySelectorAll(`input[name=p_${mag}]`).forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      magnitude.querySelectorAll("input[name=plus_]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      magnitude.querySelector(".btn-event-disAble").addEventListener("click", (e)=>{
         this.disAble(e);
         if (e.target.getAttribute("data-disable")==null){
            e.target.setAttribute("data-disable",1);
         } else {
            e.target.removeAttribute("data-disable");
         }
      });

      magnitude.querySelector(".btn-event-addInpt").addEventListener("click", (e)=>{
         this.addInpt(e);
      });

      magnitude.querySelector(".btn-event-erase").addEventListener("click", (e)=>{
         this.eraseBtn(e);
      });

      self.draggedNODE = null;
      magnitude.querySelectorAll(".sortable_p").forEach(item=>{

            item.addEventListener("dragstart", function(){
               self.draggedNODE = item;
            });

            item.addEventListener("dragover", function(evt){
               evt.preventDefault();
            });

            item.addEventListener("drop", function(evt){
               evt.preventDefault();
               if (item != self.draggedNODE) {
                  item.parentNode.insertBefore(self.draggedNODE, item);
               }
            });
      });

      return magnitude;
   }



}

window.addEventListener("load",()=>{
   var id0 = new cls0("t0", "ta0", {key:100});
//   var id1 = new cls0("t1", "ta1", {key:101});
});
<!DOCTYPE html>
<html>
<head>
    <title>LOGOS Energía</title>
    <meta charset="UTF-8"/>
    <script src="app.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>


<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template id="temp-card">
 
    <div class="templatecARD" data-group="0">

        <label class="lbl-tmp-crd" contenteditable='true' data-name="label_gruop">Tarifa</label>
        <input type="text" class="name_tarif" name="tarif"/>
        <button type="button" class="btn-event-disAble" title="Deshabilitar">X</button>
        
        <div>

            <div class="container-power"></div>
            <button class="btn-event-addPower" type="button" title="Añadir">+</button>

        </div>
        <div>

            <div class="container-energy" ></div>
            <button class="btn-event-addEnergy" type="button" title="Añadir">+</button>

        </div>

    </div>

</template> 
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template  id="temp-power">
    <div class="box-power">
        <label class="lbl-tmp-crd" contenteditable='true' data-name="labe_power">POWER</label>
        <div class="sortable_p" draggable="true">
                <input type="text" name="t_power"/>
                <input type="text" name="v_power"/>
                <button type="button" class="btn-event-disAble" title="Deshabilitar">X</button>
                <button type="button" class="btn-event-erase" title="Borrar">-</button>
                <div class="draggl">
                    <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>
        </div>
    </div>

</template> 
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template  id="temp-energy">
    <div class="box-energy" >
        <label class="lbl-tmp-crd" contenteditable='true' data-name="labe_energy">ENERGY</label>
        <div class="sortable_t" draggable="true">
            <input type="text" name="t_energy"/>
            <input type="text" name="v_energy"/>
            <button type="button" class="btn-event-disAble" title="Deshabilitar">X</button>
            <button type="button" class="btn-event-erase" title="Borrar">-</button>
            <div class="draggl">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
        </div>
    </div>

</template> 
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->


    <!-- FORMULARIO -->
        <!-- FORMULARIO -->
            <!-- FORMULARIO -->
<template id="temp-form">
    <form method="post">

        <div class="content-form">

        </div>
            
        <div>
            <button class="btn-event-sndFrm" type="button" title="Actualizar">UPDATE TEXTAREA</button>
            <button class="btn-event-addFrm" type="button" title="Añadir tarifa">+</button>
            <button class="btn-event-delFrm" type="button" title="Borrar tarifa">-</button>
        </div>
    </form>
</template>
            <!-- FORMULARIO -->
        <!-- FORMULARIO -->
    <!-- FORMULARIO -->

<div class="dv-content">
    <div id="t0"></div>
    <textarea id="ta0" class="test-atex"> </textarea>
    <button class='btn-event-sndTo' type="button" title="Actualizar">UPDATE FORM</button>
</div>

</body>
</html>

De esta forma, ya mando el y mag a través del clic (creía que los tenía puestos de antes y no era así, he vuelto a editar), pero el (mag) me lo saca como undefined.

2
  • que "nombres" son los que cambian? los nombres de las funciones, o del contenido del selector querySelectorAll?
    – Jakala
    Commented el 3 mar. 2021 a las 8:08
  • El contenido del selector. La función addPower selecciona los input v_power y t_power, la addEnergy() selecciona v_energy y t_energy...etc
    – AQMR
    Commented el 3 mar. 2021 a las 8:12

3 respuestas 3

4

La función debería recibir un segundo parámetro con el nombre de la magnitud en cuestión (ya sea "power", "energy" o "button"). Así la función tendría el prototipo:

addMagnitude(el, mag)   {

Ya que ese nombre se usa como parte de varios selectores, puedes usar plantillas de cadenas para sustituir en ellas el nombre que venga en el parámetro. Estas cadenas van delimitadas por "backticks" y dentro usan ${variable} donde quieras poner el contenido de la variable. Por ejemplo:

document.querySelector(`#temp-${mag}`).innerHTML;

Usando estas técnicas tu función quedaría así:

addMagnitude(el, mag)   {
      var self = this;

      var temMag   = document.querySelector(`#temp-${mag}`).innerHTML;

      let magnitude = document.createElement("div");
      magnitude.innerHTML = temMag;
      el.querySelector(`.container-${mag}`).appendChild(magnitude);

      magnitude.querySelectorAll(".lbl-tmp-crd").forEach(item=>{
            item.addEventListener("keyup", ()=>{
               this.sndFrm();
            });
         });

      el.querySelectorAll(`label[data-name=labe_${mag}]`).forEach((item,index)=>{
            if(index>0){
              item.remove();
            }
         });

      magnitude.querySelectorAll(`input[name=t_${mag}]`).forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      magnitude.querySelectorAll(`input[name=v_${mag}]`).forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      magnitude.querySelectorAll(`input[name=p_${mag}]`).forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      magnitude.querySelectorAll("input[name=plus_]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      magnitude.querySelector(".btn-event-disAble").addEventListener("click", (e)=>{
         this.disAble(e);
         if (e.target.getAttribute("data-disable")==null){
            e.target.setAttribute("data-disable",1);
         } else {
            e.target.removeAttribute("data-disable");
         }
      });

      magnitude.querySelector(".btn-event-addInpt").addEventListener("click", (e)=>{
         this.addInpt(e);
      });

      magnitude.querySelector(".btn-event-erase").addEventListener("click", (e)=>{
         this.eraseBtn(e);
      });

      self.draggedNODE = null;
      magnitude.querySelectorAll(".sortable_p").forEach(item=>{

            item.addEventListener("dragstart", function(){
               self.draggedNODE = item;
            });

            item.addEventListener("dragover", function(evt){
               evt.preventDefault();
            });

            item.addEventListener("drop", function(evt){
               evt.preventDefault();
               if (item != self.draggedNODE) {
                  item.parentNode.insertBefore(self.draggedNODE, item);
               }
            });
      });

      return magnitude;

   }

Obviamente no he podido verificar si funciona correctamente. Ya me dirás tú :-)

5
  • Tiene buena pinta, pero creo que estoy haciendo algo mal yo, porque no recibe los parámetros el y mag Hago un console.log(el / mag) al principo (uno u otro) y ninguno de los dos recibe nada.
    – AQMR
    Commented el 3 mar. 2021 a las 8:21
  • Habría que ver cómo invocas esas funciones
    – abulafia
    Commented el 3 mar. 2021 a las 8:23
  • Ya lo edité, a ver si aprendo cómo hacerlo bien...
    – AQMR
    Commented el 3 mar. 2021 a las 8:36
  • Le estoy dando ya muchas vueltas, y no entiendo el parámetro mag. Si es la magnitud, me la está devolviendo directamente con 'el' con los valores clientX,Y y layerX,Y. Sencillamente, no entiendo ahora mismo nada.
    – AQMR
    Commented el 3 mar. 2021 a las 9:15
  • 1
    mag tiene que valer 'power' o 'energy' Commented el 3 mar. 2021 a las 9:25
3

Iterando sobre la respuesta de @abulafia:

  • Podemos declarar una sola vez la función que le pasas a los event listeners
  • Podemos eliminar la necesidad de self si usamos funciones flecha

El código quedaría así:

addMagnitude(el, mag) {
    var temMag = document.querySelector(`#temp-${mag}`).innerHTML;

    let magnitude = document.createElement("div");
    magnitude.innerHTML = temMag;
    el.querySelector(`.container-${mag}`).appendChild(magnitude);

    el.querySelectorAll(`label[data-name=labe_${mag}]`)
        .forEach((item, index) => {
            if (index > 0) {
                item.remove();
            }
        });

    const addEventSndForm = item => {
        item.addEventListener("keyup", () => this.sndFrm());
    }

    magnitude.querySelectorAll(".lbl-tmp-crd").forEach(addEventSndForm);

    magnitude.querySelectorAll(`input[name=t_${mag}]`).forEach(addEventSndForm);
    magnitude.querySelectorAll(`input[name=v_${mag}]`).forEach(addEventSndForm);
    magnitude.querySelectorAll(`input[name=p_${mag}]`).forEach(addEventSndForm);
    magnitude.querySelectorAll("input[name=plus_]").forEach(addEventSndForm);

    magnitude.querySelector(".btn-event-disAble").addEventListener("click", (e) => {
        this.disAble(e);
        if (e.target.getAttribute("data-disable") == null) {
            e.target.setAttribute("data-disable", 1);
        } else {
            e.target.removeAttribute("data-disable");
        }
    });

    magnitude.querySelector(".btn-event-addInpt").addEventListener("click", (e) => {
        this.addInpt(e);
    });

    magnitude.querySelector(".btn-event-erase").addEventListener("click", (e) => {
        this.eraseBtn(e);
    });

    this.draggedNODE = null;
    magnitude.querySelectorAll(".sortable_p").forEach(item => {

        item.addEventListener("dragstart", () => this.draggedNODE = item);

        item.addEventListener("dragover", (evt) => evt.preventDefault());

        item.addEventListener("drop", (evt) => {
            evt.preventDefault();
            if (item != this.draggedNODE) {
                item.parentNode.insertBefore(this.draggedNODE, item);
            }
        });
    });

    return magnitude;

}
3
  • Al haber mandado los parámetros el y mag, me salta el mismo error que con la respuesta de @abulafia, en el primer querySelector, cuand pongo ${mag} me salta un error null. No hace nada a partir de ahí. ¿Tengo que añadir algo?
    – AQMR
    Commented el 3 mar. 2021 a las 9:29
  • 1
    Estás "inventándote" el parámetro mag. Donde usabas addPower(A) debes poner addMagnitude(A,'power'); y donde usabas addEnergy(A), debes poner addMagnitude(A,'energy'); Commented el 3 mar. 2021 a las 9:42
  • Ah cooooñaaa, ahora lo entendí, mag no tiene un valor por defecto como puede ser el, que es el target. Vale, coña, ahora si.
    – AQMR
    Commented el 3 mar. 2021 a las 9:50
1

Tienes que agregar un atributo adicional a tus botones llamado "buttontype" para identificar si es power, energy o btn. Por ejemplo, en el html cambia:

<button class="btn-event-addPower" type="button" title="Añadir">+</button>

por:

<button buttontype="power" class="btn-event-addPower" type="button" title="Añadir">+</button>

Y de esa forma la función que muestras en el ejemplo queda generica de la siguiente manera:

addPower(el)   {
      var self = this;
      var btnType = this.getAttribute("buttontype")

      var temPower   = document.querySelector("#temp-"+btnType).innerHTML;


      let power = document.createElement("div");
      power.innerHTML = temPower;
      el.querySelector(".container-"+btnType).appendChild(power);

      el.querySelectorAll("label[data-name=labe_"+btnType+"]").forEach((item,index)=>{
            if(index>0){
              item.remove();
            }
         });

      power.querySelectorAll(".lbl-tmp-crd, input[name=t_"+btnType+"], input[name=v_"+btnType+"], input[name=p_"+btnType+"], input[name=plus_]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

     
      power.querySelector(".btn-event-disAble").addEventListener("click", (e)=>{
         this.disAble(e);
         if (e.target.getAttribute("data-disable")==null){
            e.target.setAttribute("data-disable",1);
         } else {
            e.target.removeAttribute("data-disable");
         }
      });

      power.querySelector(".btn-event-addInpt").addEventListener("click", (e)=>{
         this.addInpt(e);
      });

      power.querySelector(".btn-event-erase").addEventListener("click", (e)=>{
         this.eraseBtn(e);
      });

      self.draggedNODE = null;
      power.querySelectorAll(".sortable_p").forEach(item=>{

            item.addEventListener("dragstart", function(){
               self.draggedNODE = item;
            });

            item.addEventListener("dragover", function(evt){
               evt.preventDefault();
            });

            item.addEventListener("drop", function(evt){
               evt.preventDefault();
               if (item != self.draggedNODE) {
                  item.parentNode.insertBefore(self.draggedNODE, item);
               }
            });
      });

      return power;

   }
3
  • Pero así estaría obligadoa hacer un addPower(), un addEnergy() y un addBtn(), cosa que ya tengo, y no me sirve, tengo que reducir código como sea.
    – AQMR
    Commented el 3 mar. 2021 a las 9:51
  • vale entiendo, ya modifico la respuesta, un minuto
    – ManuelV
    Commented el 3 mar. 2021 a las 10:01
  • Sí, agrupar los selectores CSS me lo estaba planteando también. se puede aplicar esta solución en lugar de declarar la función y aplicarla 4 veces Commented el 3 mar. 2021 a las 10:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.