No último post criamos toda a lógica da nossa Calculadora usando o JavaScript. Porém, se vocês notarem, toda a aplicação está concentrada em um único arquivo. E eu particularmente, não curto desenvolver um projeto Front-End dessa maneira, porque ele pode crescer a ponto que ficar inviável de entender todo o contexto do projeto.

Durante esse artigo, vamos realizar a refatoração desse projeto, deixando ele mais fácil de ser mantido.

Vamos nessa?!

Refatorando o projeto

Em Vue.js, há 2 maneiras em que você pode estruturar o seu projeto:

• Single-File Component: que seria trabalhar com os escopos HTML, CSS e JavaScript em um único arquivo .vue, a qual centralizará todas as responsabilidades pela aparência e comportamento

• Fazer split dos arquivos: que seria fazer uma separação de responsabilidade, visando o conceito SOLID.

Nessa parte do tutorial, estarei explicando como realizar a separação dos arquivos de uma maneira correta e seguindo o Style Guide do Vue.js de nomenclatura de arquivos e pastas.

Separando os arquivos do componente 'Calculadora.vue'

Abram o Visual Studio Code e o projeto da Calculadora. Dentro da pasta src -> components, crie uma pasta chamada Calculadora.

Depois dentro da pasta Calculadora, crie os seguintes arquivos:

• index.vue (altere o arquivo 'Calculadora.vue' para 'index.vue')
• calculadora.css
• calculadora.js

A estrutura das pastas ficarão da seguinte forma:

Feito isso, vamos agora realizar a separação dos arquivos.

Realizando a separação do bloco style

Abram o arquivo index.vue e copiem todo o conteúdo contido na tag <style></style> e cole no arquivo calculadora.css.

O arquivo calculadora.css deverá ficar da seguinte maneira:

.calculadora {
  margin: 0 auto;
  width: 350px;
  font-size: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto);
}

.display {
  grid-column: 1 / 5;
  background-color: #333;
  color: white;
}

.zero {
  grid-column: 1 / 3;
}

.botao {
  background-color: #f2f2f2;
  border: 1px solid #999;
}

.operadores {
  background-color: orange;
  color: white;
}

Já no arquivo index.vue, vamos agora realizar a referência do arquivo calculadora.css dentro da tag <style></style> e notem como deve ficar:

<style src="./calculadora.css" scoped />

Execute a aplicação e veja se está tudo funcionando. Se sim. Vamos dar continuidade!

Realizando a separação do bloco script

O procedimento será muito parecido com o que fizemos no arquivo calculadora.css. Abram o arquivo index.vue e copie todo o bloco de script e cole no arquivo Calculadora.js

O arquivo Calculadora.js, ficará da seguinte forma:

/**
 * Arquivo: src/components/Calculadura.js
 * Data: 20/06/2019
 * Author: Glaucia Lemos
 * Descrição: arquivo responsável por tratar toda a lógica da Calculadora.
 */

export default {
  name: 'Calculadora',
  data() {
    return {
      numeroAnterior: null,
      valorCorrente: '',
      operador: null,
      operadorClicado: false,
    };
  },

  methods: {
    // Método responsável por limpar o display da 'Calculadora'
    limpar() {
      this.valorCorrente = '';
    },

    /*
    * Método responsável por colocar o sinal '-' ou '+' para realização de operações
    * matemáticas especiais.
    */
    sinal() {
      this.valorCorrente = this.valorCorrente.charAt(0) === '-'
        ? this.valorCorrente.slice(1)
        : `-${this.valorCorrente}`;
    },

    // Método responsável por realizar operações com 'porcentagem':
    porcentagem() {
      this.valorCorrente = `${parseFloat(this.valorCorrente) / 100}`;
    },

    // Método responsável por juntar os números no display da Calculadora:
    juntarNumeros(numero) {
      if (this.operadorClicado) {
        this.valorCorrente = '';
        this.operadorClicado = false;
      }
      this.valorCorrente = `${this.valorCorrente}${numero}`;
    },

    // Método responsável por adicionar 'ponto' no display da Calculadora:
    ponto() {
      if (this.valorCorrente.indexOf('.') === -1) {
        this.juntarNumeros('.');
      }
    },

    // Método responsável por 'resetar' o valor na Calculadora:
    setarValor() {
      this.numeroAnterior = this.valorCorrente;
      this.operadorClicado = true;
    },

    // Método responsável por realizar a operação da 'divisão' da Calculadora
    dividir() {
      this.operador = (a, b) => a / b;
      this.setarValor();
    },

    // Método responsável por realizar a operação da 'multiplicação' da Calculadora
    multiplicar() {
      this.operador = (a, b) => a * b;
      this.setarValor();
    },

    // Método responsável por realizar a operação da 'diminuir' da Calculadora
    diminuir() {
      this.operador = (a, b) => a - b;
      this.setarValor();
    },

    // Método responsável por realizar a operação da 'adição' da Calculadora
    somar() {
      this.operador = (a, b) => a + b;
      this.setarValor();
    },

    // Método responsável por apresentar o resultado das operações na Calculadora
    resultado() {
      this.valorCorrente = `${this.operador(
        parseFloat(this.numeroAnterior),
        parseFloat(this.valorCorrente),
      )}`;
      this.numeroAnterior = null;
    },
  },
};

Agora, volte ao arquivo index.vue e vamos referenciar o arquivo Calculadora.js, dentro da tag script, da seguinte forma:

<script src="./Calculadora.js"></script>

Execute a aplicação e veja se está tudo funcionando. Se sim, terminamos! 😊

Finalização do desenvolvimento do arquivo 'index.vue'

Observem que, o arquivo index.vue ficou muito mais clean e melhor para manter. Gosto dessa abordagem, devido ao bloco de script e css que tendem a ficar maiores caso o projeto seja extensivo, dificultando a manutenção desses componentes.

Não é errado usar o conceito Single-File Component, repito, gosto da abordagem de separação de arquivos por motivos pessoais. Assim sendo, caso deseja manter o projeto seguindo o SFC, não tem problemas!

Caso desejam ver todo o projeto pronto, bastam acessar AQUI

Nesse repositório também consta os vídeos ensinando o passo a passo em como desenvolver esse projeto. #ficaadica

Bom, o nosso projeto está pronto e preparado para ser enviado para a nuvem. Para isso, vamos usar o Azure App Service, um dos serviços do Azure para realizar hospegadem de páginas estáticas de maneira simples e gratuita*

Mas, para isso, vamos deixar para o próximo artigo!

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

Nos vemos! Até a próxima! 😍