Maisum ano e o JavaScript está sempre mudando. No entanto, existem algumas dicas que podem ajudá-lo a escrever código limpo e eficiente que seja escalável, mesmo (ou talvez especialmente?) Em 2019. Abaixo está uma lista de 9 dicas pragmáticas que farão de você um desenvolvedor melhor.
1. assíncrono / aguardar
Se você ainda está preso no inferno, 2014 quer seu código de volta. Apenas não use retornos de chamada, a menos que seja absolutamente necessário, por exemplo, exigido por uma biblioteca ou por motivos de desempenho. As promessas são boas, mas são um pouco difíceis de usar se sua base de código ficar maior. A minha solução go-to hoje em dia é async / await, o que torna a leitura e a melhoria do meu código muito mais limpa. Na verdade, você pode awaitcada promessa em JavaScript, no caso de uma biblioteca que você está usando está retornando uma promessa, simplesmente awaitisso. De fato, async / await é apenas açúcar sintático em torno de promessas. Para fazer seu código funcionar, você só precisa adicionar a asyncpalavra – chave na frente de uma função. Aqui está um exemplo rápido:
Note que awaitno nível superior não é possível, você só pode chamar uma asyncfunção.
O async / await foi introduzido com o ES2017, portanto, certifique-se de transpilar seu código.
2. fluxo de controle assíncrono
Muitas vezes, é necessário buscar vários conjuntos de dados e fazer algo para cada um deles ou concluir uma tarefa depois que todas as chamadas assíncronas tiverem retornado um valor.
para de
Digamos que temos alguns Pokémons em nossa página e precisamos buscar informações detalhadas sobre eles. Não queremos esperar que todas as chamadas sejam concluídas, especialmente quando não sabemos quantas existem, mas queremos atualizar nossos conjuntos de dados assim que recebermos algo em troca. Podemos usar for...ofpara percorrer um array e executar asynccódigo dentro do bloco, a execução será interrompida até que cada chamada seja bem-sucedida. É importante observar que pode haver gargalos de desempenho se você fizer algo assim em seu código, mas é muito útil mantê-lo em seu conjunto de ferramentas. Aqui está um exemplo:
Esses exemplos estão realmente funcionando, sinta-se à vontade para copiá-los e colá-los em sua sandbox de código favorito
Promise.all
E se você quiser buscar todos os Pokemon em paralelo? Desde que você pode awaittodas as promessas, basta usar Promise.all :
for...ofe Promise.allforam introduzidos com o ES6 +, portanto, certifique-se de transpilar seu código.
3. Destruturação e valores padrão
Vamos voltar ao nosso exemplo anterior, onde fazemos o seguinte:
const result = axios.get (`https://ironhack-pokeapi.herokuapp.com/pokemon/$ {entry.id}`)
dados const = result.data
Existe uma maneira mais fácil de fazer isso, podemos usar a desestruturação para obter apenas um ou alguns valores de um objeto ou matriz. Nós faríamos assim:
const {data} = aguardo axios.get (...)
Nós salvamos uma linha de código! Yay! Você também pode renomear sua variável:
const {data: newData} = aguardo axios.get (...)
Outro truque interessante é dar valores padrão ao desestruturar. Isso garante que você nunca acabará undefinede você não precisa verificar as variáveis manualmente.
const {id = 5} = {}
console.log (id) // 5
Esses truques também podem ser usados com parâmetros de função, por exemplo:
O exemplo pode parecer um pouco confuso no começo, mas leve seu tempo e brinque com ele. Quando não passamos nenhum valor como argumento para nossa função, os valores padrão são usados. Assim que começarmos a passar valores, apenas os valores padrão para argumentos não existentes serão usados.
Os valores padrão e de desestruturação foram introduzidos no ES6, portanto, certifique-se de transpilar seu código.
4. Vigorosos e falsos valores
Ao usar valores padrão, algumas das verificações de valores existentes serão coisa do passado. No entanto, é muito bom saber que você pode trabalhar com valores verdadeiros e falsos. Isto irá melhorar o seu código e poupar algumas instruções, tornando-o mais eloquente. Muitas vezes vejo pessoas fazendo algo como:
if (myBool === true) {
console.log (...)
}
// OR
if (myString.length> 0) {
console.log (...)
}
// OR
if (isNaN (myNumber)) {
console.log (...)
}
Todos esses podem ser encurtados para:
if (myBool) {
console.log (...)
}
// OR
if (myString) {
console.log (...)
}
// OR
if (! myNumber) {
console.log (...)
}
Para realmente aproveitar essas declarações, você precisa entender o que são os valores verdadeiros e falsos. Aqui está uma pequena visão geral:
Paralisia
- strings com o comprimento de 0
- o número
0 falseundefinednullNaN
Truthy
- matrizes vazias
- objetos vazios
- Todo o resto
Observe que, ao verificar valores verdadeiros / falsos, não há comparação explícita, o que equivale a verificar com sinais de igual duplo ==e não com três ===. Em geral, ele se comporta da mesma maneira, mas há certas situações em que você acabará com um bug. Para mim, aconteceu principalmente com o número 0 .
5. Operadores lógicos e ternários
Estes são, novamente, usados para encurtar seu código, economizando preciosas linhas de código. Muitas vezes, são ótimas ferramentas e ajudam a manter seu código limpo, mas também podem criar alguma confusão, especialmente ao encadeá-las.
Operadores lógicos
Os operadores lógicos basicamente combinam duas expressões e retornam true, falseou o valor correspondente e são representados por && , significando “e” – assim como ||, significando “ou”. Vamos dar uma olhada:
console.log (true && true) // verdadeiro
console.log (false && true) // false
console.log (true && false) // false
console.log (false && false) // false
console.log (true || true) // true
console.log (true || false) // true
console.log (false || true) // true
console.log (false || false) // false
Podemos combinar operadores lógicos com o nosso conhecimento a partir do último ponto, valores verdadeiros e falsos. Ao usar operadores lógicos, as seguintes regras se aplicam:
&&: O primeiro valor da falsidade é retornado, se não houver nenhum, o último valor do truthy está sendo retornado.||: O primeiro valor geral é retornado, se não houver nenhum, a operação será igual ao último valor falsy.
console.log (0 && {a: 1}) // 0
console.log (false && 'a') // false
console.log ('2' && 5) // 5
console.log ([] || false) // []
console.log (NaN || null) // null
console.log (true || 'a') // verdadeiro
Operador ternário
O operador ternário é muito semelhante ao operador lógico, mas tem três partes:
- A comparação, que será ou falsa ou verdadeira
- O primeiro valor de retorno, caso a comparação seja verdadeira
- O segundo valor de retorno, caso a comparação seja falsamente
Aqui está um exemplo:
const lang = 'alemão'
console.log (lang = '' Alemão '?' Hallo ':' Olá ') // Hallo
console.log (lang? 'Ja': 'Yes') // Ja
console.log (lang = '' French '?' Bon soir ':' Boa noite ') // Boa noite
6. encadeamento opcional
Você já teve o problema de acessar uma propriedade de objeto aninhada, sem saber se o objeto ou uma das subpropriedades existe? Você provavelmente vai acabar com algo parecido com isto:
deixe os dados
if (myObj && myObj.firstProp && myObj.firstProp.secondProp && myObj.firstProp.secondProp.actualData) data = myObj.firstProp.secondProp.actualData
Isso é tedioso e há uma maneira melhor, pelo menos de uma forma proposta (continue lendo como habilitá-lo). É chamado encadeamento opcional e funciona da seguinte maneira:
dados de const = myObj? .firstProp? .secondProp? .actualData
Eu acho que é uma maneira eloqüente de verificar propriedades aninhadas e torna o código mais limpo.
Atualmente, o encadeamento opcional não faz parte da especificação oficial, mas está no estágio 1 como um recurso experimental. Você tem que adicionar @ babel / plugin-proposal-optional-chaining em seu babelrc para usá-lo.
7. Propriedades de classe e ligação
Funções de ligação em JavaScript é uma tarefa comum. Com a introdução das funções de seta na especificação do ES6, agora temos uma maneira de vincular funções automaticamente ao contexto de declaração – muito útil e comumente usado entre os desenvolvedores de JavaScript. Quando as classes foram introduzidas pela primeira vez, você não podia mais usar as funções de seta porque os métodos de classe precisam ser declarados de uma maneira específica. Precisávamos ligar as funções em outro lugar, por exemplo, no construtor (melhor prática com o React.js). Eu sempre fui incomodado pelo fluxo de trabalho de definir primeiro métodos de classe e, em seguida, ligá-los, parece ridículo depois de um tempo. Com a sintaxe da propriedade de classe, podemos usar as funções de seta novamente e obter as vantagens da vinculação automática. A função de seta pode agora ser usada dentro da classe. Aqui está um exemplo de _increaseCountestar ligado:
Atualmente, as propriedades de classe não fazem parte da especificação oficial, mas estão no estágio 3 como um recurso experimental. Você precisa adicionar @ babel / plugin-proposal-class-properties em seu babelrc para usá-lo.
8. Use parcela
Como desenvolvedor frontend, você quase certamente encontrou o empacotamento e o transpilar de código. O padrão de fato para isso foi o webpack por um longo tempo. Eu usei o webpack pela primeira vez na versão 1, o que foi uma dor naquela época. Brincando com todas as diferentes opções de configuração, passei incontáveis horas tentando colocar o pacote em funcionamento. Se eu fosse capaz de fazer isso, eu não tocaria novamente para não quebrar nada. Um par de meses atrás eu me deparei com parcela , que foi um alívio instantâneo. Faz praticamente tudo para você fora da caixa, enquanto ainda lhe dá a possibilidade de alterá-lo, se necessário. Ele também suporta um sistema de plugins, similar ao webpack ou babel, e é incrivelmente rápido. Se você não sabe parcela, eu definitivamente sugiro que você confira!
9. Escreva mais código você mesmo
Este é um bom tópico. Eu tive muitas discussões diferentes sobre isso. Mesmo para CSS, muitas pessoas tendem a usar uma biblioteca de componentes como o bootstrap. Para o JavaScript, ainda vejo pessoas usando o jQuery e pequenas bibliotecas para validação, controles deslizantes e assim por diante. Embora possa fazer sentido usar bibliotecas, eu recomendo fortemente escrever mais código, em vez de instalar cegamente pacotes npm. Quando há grandes bibliotecas (ou até mesmo frameworks), onde uma equipe inteira está construindo, por exemplo, moment.js ou react -datepicker , não faz sentido tentar codificar você mesmo. No entanto, você pode escrever a maior parte do código que está usando. Isso lhe dará três vantagens principais:
- Você sabe exatamente o que está acontecendo no seu código
- Em algum momento, você começará a entender realmente aprogramação e como as coisas funcionam sob o capô
- Você impede que seu codebase fique inchado
No começo, é mais fácil usar apenas um pacote npm. Levará mais tempo para implementar alguma funcionalidade por conta própria. Mas e se o pacote realmente não funcionar como esperado e você tiver que trocá-lo por outro, gastando ainda mais tempo lendo como a API está configurada. Ao implementá-lo por conta própria, você pode adequá-lo cem por cento ao seu uso.