-4

respetada comunidad.

Actualmente me encuentro en la elaboración de un proyecto en Jvascript, pero uno de los requisitos es el siguiente:

Keep the application logic separated from DOM manipulation tasks.

Me gustaría saber que formas hay de hacer esto, creando algun archivo externo? o todo en un mismo archivo?

A decir verdad no sé como implementar esta tarea ya que en una misma funcíón puede haber tanto lógica como manipulación del DOM, entonces, como se pueden tener de manera independiente?

Gracias de antemano

7
  • La pregunta es basada en opiniones y eso generaría su cierre
    – user128299
    Commented el 22 abr. 2020 a las 16:40
  • No es tanto una opinión, consiste en saber si alguien ha implementado el DOM y la lógica de forma separada, de ser así que por favor comparta como implementó dicha tarea. Commented el 22 abr. 2020 a las 16:46
  • Pues precisamente eso son opìniones amigo, por que depende de la lógica de cada uno que lo haya hecho esa será la respuesta, considera leer Cómo preguntar y de paso hacer el recorrido de bienvenida
    – user128299
    Commented el 22 abr. 2020 a las 16:51
  • No entendiste mi pregunta pero bueno, ya alguien me ha ayudado, gracias Commented el 22 abr. 2020 a las 16:52
  • Soy nuevo en la comunidad, pienso que si algo estoy haciendo mal hay mejores maneras de apoyar y corregir, esta es una comunidad de apoyo y no de juicio Commented el 22 abr. 2020 a las 16:56

1 respuesta 1

0

Por favor ignora los comentarios.

En el código puse comentarios para orientarte mejor. Por lo general, si quieres separar la lógica del DOM se utilizan diferentes scripts para no mezclar funciones, así obtienes un proyecto mejor organizado.

//----------------Esta parte sería un script de lógica----------------
//Supongamos que los datos de la base de datos vienen de esta manera:

const dbData = [
{
  Nombre: "Luis Perez",
  Edad: 25
},
{
  Nombre: "Alejandra Scott",
  Edad: 27
}]

//Supongamos que debemos tener el apellido por separado, entonces creamos una función de lógica para formatear el objeto

function FormatearData(data){
  return data.map(row => ({
    Nombre   : row.Nombre.split(' ')[0],
    Apellido : row.Nombre.split(' ')[1],
    Edad     : row.Edad
  }))
}

//Ahora creamos una funcion para crear el html que necesitaremos:
function GetHtmlRows(data){
  return data.map(row => 
  `
   <tr>
    <td>${row.Nombre}</td>
    <td>${row.Apellido}</td>
    <td>${row.Edad}</td>
   </tr>
  `).join('')
}

//---------Esta parte sería OTRO script de manipulación del DOM-----------
//Ahora si, ya tenemos toda la lógica que necesitamos, ahora tenemos que crear una función para setear las rows, aquí si vamos a manipular el DOM.

function SetTableData(idTbody, data){
  const div = document.getElementById(idTbody)
  
  const dataFormateada = FormatearData(data) //Hacemos uso de la función
  const html = GetHtmlRows(dataFormateada)
  
  div.innerHTML = html
}

//Ahora simplemente llamamos a la función
SetTableData("rows", dbData)
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
<table>
<thead>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Edad</th>
  </tr>
</thead>
  <tbody id="rows">
  </tbody>
</table>

3
  • Muchas gracias, tu ejemplo está genial, lo estoy ejecutando y me da una buena idea para implementarlo en mi proyecto. Creo que en el caso de tu ejemplo, lo que haré será crear archivos separados y usar la exportación e importación de módulos, un módulo podría destinarse únicamente para el DOM y otro para la Lógica. Me gusta el manejo de filas que propones, estoy tratando de comprender este concepto a profundidad porque considero que es una buena práctica para tener un proyecto organizado tal como planteas, gracias por comentar el código y por tu ayuda, lo valoro mucho gracias! Commented el 23 abr. 2020 a las 14:27
  • Hola, de nada! me alegra que te haya servido!. Si necesitas más tips o ayuda puedes contactarme por twitter: @leoocast10.. Me ayudaría que pusieras la respuesta como aceptada y la votaras hacia arriba, jaja. Gracias. Commented el 23 abr. 2020 a las 18:42
  • jeje Listo ya lo he hecho, disculpa no haberlo hecho antes, recién me estoy familiarizando con la plataforma, gracias de nuevo :) Commented el 23 abr. 2020 a las 21:47

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.