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! 😍
Top comments (0)