DEV Community 👩‍💻👨‍💻

Glaucia Lemos for Microsoft Azure

Posted on

Desenvolvendo Calculadora em Vue.Js — Refatorando o projeto

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:

Screen-Shot-06-20-19-at-07-24-PM.png

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;
}
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

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;
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Twitter

Nos vemos! Até a próxima! 😍

Top comments (0)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.