index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Salário</th>
</tr>
</thead>
</table>
<tbody>
<div id="impressao"></div>
</tbody>
<script src="./FuncionariosModel.js"></script>
<script src="./ListaFuncionariosModel.js"></script>
<script src="./FuncionariosView.js"></script>
<script src="./FuncionariosController.js"></script>
<script>
let funcionarios = new FuncionariosController();
</script>
</body>
</html>
FuncionariosModel.js (obs: não quis encapsular)
class Funcionarios {
constructor(nome, endereço, salario){
this._nome = nome
this._endereço = endereço
this._salario = salario
}
}
ListaFuncionariosModel.js
class ListaFuncionarios { // essa class existe para transformar os dados recebidos em um array
constructor(){
this._funcionarios = [
{
"nome": "Douglas",
"endereco" : "Rua da esquina, 123",
"salario" : "4500"
},
{
"nome": "Felipe",
"endereco" : "Rua da virada, 456",
"salario" : "5000"
},
{
"nome": "Silvio",
"endereco" : "Rua da aresta, 789",
"salario" : "6000"
}
];
}
}
FuncionariosView.js
class FuncionariosView {
constructor(elemento) {
this._elemento = elemento
}
_retorno(model) {
return`
<tbody>
${model._funcionarios.map(n =>
`<tr><br>
<td>${n.nome}</td><br>
<td>${n.endereco}</td><br>
<td>${n.salario}</td><br>
</tr><br>`
).join('')}
</tbody>`
}
update(model) {
this._elemento.innerHTML = this._retorno(model);
}
}
FuncionariosController.js
class FuncionariosController {
constructor(){
this._funcionarios = new ListaFuncionarios();
this._funcionariosView = new FuncionariosView(document.querySelector('#impressao'));
this._funcionariosView.update(this._funcionarios); //chamando update e inserindo a lista de negociaçoes
}
}