Q:

Cómo separar el DOM de la lógica en Javascript

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

A:

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>

