Exercício aula 12 | JavaScript: conhecendo o Browser e padrões de projeto

Segue abaixo como fiz o código:

Pagina HTML pré-definida, alterando só o nome dos arquivos:

<!-- upload.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Upload de arquivo</title>
</head>
<body>
    <label>Informações do arquivo</label>
    <input class="dados-arquivo" placeholder="formato: nome/tamanho/tipo">

    <button onclick="arquivoController.envia(event)"  >Enviar</button>

    <script src="Arquivo.js"></script>
    <script src="ArquivoController.js"></script>
    <script src="Transform.js"></script>
    <script>
        let arquivoController = new ArquivoController();

    </script>
</body>
</html>

Segue abaixo o código do ArquivoController, do Transform que é o HELPER e do Arquivo que é o Model;

class ArquivoController {

    constructor() {
        this._inputDados = document.querySelector('.dados-arquivo');

    }

    envia(event) {

        event.preventDefault();

        let data = this._inputDados.value;

        this.upload(data)
        console.log(this.upload(data))
        this._limpaFormulario();
        // exibe mensagem no console com os dados do arquivo.
    }

    _limpaFormulario() {
        this._inputDados.value = '';
        this._inputDados.focus();
    }

    upload(text){

        let transform = Transform.textToData(text)

        return new Arquivo(...transform);
    }

}

class Transform {

    constructor(){
        throw new Error('Esta classe não pode ser instanciada')
    }

    static textToData(text){
        return text.toUpperCase().split('/')
    }
}

class Arquivo {

    constructor(nome, tamanho, tipo) {
        this._nome = nome;
        this._tamanho = tamanho;
        this._tipo = tipo;
    }

    get nome() {
        return this._nome;
    }

    get tamanho() {
        return this._tamanho;    
    }

    get tipo() {
        return this._tipo;
    }
}

No console.log(this.upload(data)) será impresso no console o input do formulário;

O que poderia fazer para deixar o código melhor?

Fala Pedro, tudo bem?

O código está muito bom, a unica coisa que eu faria seria em vez de utilizar o método _limpaFormulario eu utilizaria o reset no target do formulário, ficando assim:

envia(event) {

        event.preventDefault();

        let data = this._inputDados.value;

        this.upload(data)
        console.log(this.upload(data))
        event.reset() //Aqui reseta o formulário
    }

Uma outra coisa que eu faria seria guardar o valor do retorno do método upload em uma variável e dar console nessa variável para que possa ser mais semântico:


envia(event) {

        event.preventDefault();

        let data = this._inputDados.value;

        const arquivo = this.upload(data)
        console.log(arquivo)
        event.reset() //Aqui reseta o formulário
    }

Mas fora isso esta tudo muito bom.

Espero ter ajudado, bons estudos :D