7 recomendações para melhorar a confiabilidade do código JavaScript

O autor do artigo, cuja tradução estamos publicando hoje, decidiu compartilhar com os leitores sete recomendações sobre JavaScript. Essas recomendações, como o autor gostaria de esperar, ajudarão a escrever programas mais confiáveis.



1. Use as funções de fábrica


Se alguém não souber, uma função de fábrica é uma função comum (não uma classe ou construtor) que retorna objetos. Esse conceito simples nos permite tirar proveito dos poderosos recursos do JavaScript para criar aplicativos poderosos e confiáveis.

É importante saber que uma função de fábrica é chamada sem usar uma palavra-chave new. Se você chamá-la com essa palavra-chave, ela deixará de se comportar como deveria.

▍ Por que usar funções de fábrica?


As funções de fábrica podem ser usadas para simplificar a instanciação de um objeto sem precisar vincular-se às classes ou à palavra-chave new.

A essência das funções de fábrica é que elas são consideradas as funções mais comuns. Isso significa que eles podem ser usados ​​para construir objetos, outras funções e até promessas. Ou seja, essas funções podem ser combinadas e combinadas para criar funções de fábrica mais poderosas, que, por sua vez, também podem ser combinadas com outras funções ou objetos para criar funções de fábrica ainda mais avançadas. As funções de fábrica abrem possibilidades ilimitadas para o programador.

Dado o exposto e combinando o uso das funções de fábrica com as abordagens recomendadas para escrever código, essas funções podem se tornar ferramentas poderosas e convenientes.

Aqui está um exemplo simples de uma função de fábrica:

function createFrog(name) {
  const children = []
  
  return {
    addChild(frog) {
      children.push(frog)
    },
  }
}

const mikeTheFrog = createFrog('mike')

Se você usar as funções de fábrica por algum tempo, poderá entender que, em comparação com seus concorrentes na forma de funções de construtor, as funções de fábrica podem aumentar o nível de reutilização de código. Como resultado, o programador precisa escrever menos código. As funções de fábrica facilitam a refatoração, pois são capazes de retornar objetos arbitrários e simplificam o trabalho na base de código.

2. Ao escrever funções construtoras, adicione métodos aos seus protótipos


Se você começou recentemente a aprender JavaScript, trabalhar com um objeto de protótipo pode parecer algo novo. Então, no começo, estava comigo.

Lembre-se de que essa técnica não é adequada para as aulas. As classes, sem esforço adicional por parte do programador, salvam independentemente os métodos em seus protótipos.

Aqui está um exemplo de função construtora:

function Frog(name, gender) {
  this.name = name
  this.gender = gender
}

Frog.prototype.leap = function(feet) {
  console.log(`Leaping ${feet}ft into the air`)
}

Por que usar uma construção em Frog.prototype.leapvez de apenas escrever um método leapem um objeto criado pelo construtor? Por exemplo, assim:

function Frog(name, gender) {
  this.name = name
  this.gender = gender
  
  this.leap = function(feet) {
    console.log(`Leaping ${feet}ft into the air`)
  }
}

O fato é que, se um método for anexado diretamente a uma propriedade do construtor prototype, isso significa que essa instância será compartilhada por todas as instâncias do objeto criado pelo construtor.

Em outras palavras, se você confiar no exemplo anterior, que é usado this.leap, acontece que, ao criar várias instâncias do objeto Frog, cada uma delas terá seu próprio método leap. Ou seja - várias cópias deste método serão criadas. Nesse caso, isso indica o uso irracional dos recursos do sistema, pois em todos esses objetos haverá uma cópia do mesmo método que se comporta da mesma maneira em todos os lugares. Não é necessário criar cópias desse método em cada instância do objeto.

Como resultado, isso levará a uma diminuição no desempenho do programa. Mas isso não é difícil de evitar. Note-se que as propriedades this.namee this.genderdevem ser declaradas neste formulário, uma vez que devem pertencer a um objeto específico. Se traçarmos uma analogia com os sapos reais, cuja representação virtual é descrita usando o construtor Frog, verifica-se que os sapos podem ter seus próprios nomes, os sapos têm um gênero diferente. Como resultado, para armazenar informações exclusivas sobre sapos em cada um dos objetos, faz sentido declarar as propriedades dos objetos para que eles sejam usados ​​exatamente no nível das instâncias do objeto.

Aqui está um exemplo de uso dessa técnica no pacote de solicitação popular .

3. Adicione a propriedade .type aos objetos a serem distinguidos.


Uma propriedade .typeque, por acordo não oficial, é frequentemente adicionada a objetos, encontrou uso extremamente difundido nos dias de hoje. Se você estiver escrevendo aplicativos React, poderá encontrar essa propriedade o tempo todo. Especialmente - se você usa Redux .

O uso dessa abordagem se mostra muito bem no processo de desenvolvimento, uma vez que, entre outras coisas, permite criar código de auto-documentação:

function createSpecies(type, name, gender) {
  if (type === 'frog') {
    return createFrog(name, gender)
  } else if (type === 'human') {
    return createHuman(name, gender)
  } else if (type == undefined) {
    throw new Error('Cannot create a species with an unknown type')
  }
}

const myNewFrog = createSpecies('frog', 'sally', 'female')

4. Use TypeScript


O TypeScript tornou-se difundido na comunidade JavaScript devido ao fato de que essa linguagem fornece ao programador uma ferramenta poderosa para trabalhar com segurança com tipos e também permite identificar erros antes mesmo que eles apareçam no código em execução.

O uso do TypeScript permite encontrar erros em potencial na fase de compilação do código, mesmo antes do lançamento do código. Se algo estiver errado no código, uma notificação de compilação será exibida quando for compilada.

Mas a segurança de tipos e a detecção precoce de erros estão longe de ser uma lista completa dos motivos para o uso do TypeScript em qualquer situação. Uma das grandes vantagens do TypeScript é que ele permite que você aproveite os novos recursos do JavaScript antes que eles apareçam nos principais navegadores. O fato é que o código TypeScript é compilado no código JavaScript suportado pelos navegadores modernos e não pelos navegadores mais recentes.

5. Escreva testes


Se você está trabalhando em um projeto e leva a sério esse trabalho, praticamente precisa escrever testes. Isso tornará o código mais previsível, menos propenso a erros. Isso dará um nível mais alto de confiança na qualidade do código ao fazer alterações nele. Em outras palavras, se você deseja que seu código resista ao teste do tempo, não há melhor maneira de prepará-lo para esse teste do que escrever testes. Quanto mais testes você tiver no seu projeto, mais confiança você terá no código ao implementá-lo na produção.

Se fosse necessário destacar apenas uma, a característica mais importante e positiva dos testes, qual seria? Acredito que este é o fato de que os testes ajudam a encontrar erros antes que eles entrem em um programa de trabalho. Que tipo de programador não gostaria de ter essa oportunidade? Eu certamente não recusaria uma coisa dessas. É por isso que estou escrevendo testes de unidade para meus projetos.

Se você está começando a criar testes para o seu projeto, saiba que hoje existem muitas ferramentas e estruturas para organizar o teste de código. Aqui estão algumas coisas boas sobre isso.

6. Escreva as funções mais simples possíveis.


Como todos sabemos, o JavaScript sem problemas permite criar funções enormes que resolvem muitas tarefas ao mesmo tempo.

Se você é novo na programação, isso pode parecer positivo para você. Diria sobre mim mesmo que nos velhos tempos me senti ótimo quando escrevia grandes pedaços de código que faziam o que eu precisava. Isso importava principalmente para mim. Fiquei mais confiante quando vi que meu código funcionava sem problemas, sem mencionar o fato de que minha autoconfiança foi reforçada pelo fato de que eu era capaz de escrever um enorme bloco de código que funcionava bem. Quão ingênuo eu era então!

Se você deseja escrever um código fácil de manter, simples e não muito propenso a erros, sua melhor aposta é tornar suas funções o mais simples e pequenas possível. Quanto mais simples a função, mais fácil é testá-la isoladamente de outras partes do sistema.

Isso é especialmente importante para quem deseja usar os princípios da programação funcional em seu trabalho. Nesse sentido, podemos lembrar um requisito bem conhecido para funções: uma função deve resolver apenas um problema e precisa resolvê-lo muito bem.

7. Lembre-se sempre da importância do tratamento de erros ao usar JSON.parse e JSON.stringify


Na programação JavaScript, ao passar dados JSON para um método JSON.parse, é necessário levar em consideração o fato de que esse método espera receber, como primeiro argumento, um código JSON executado corretamente. Se esse método receber materiais JSON com os quais algo está errado, ocorrerá um erro.

O perigo aqui é que a passagem de um JSON.parsecódigo JSON incorreto faz com que o aplicativo pare. No trabalho, encontrei recentemente uma situação em que um de nossos projetos da web gerava erros devido ao fato de um dos pacotes externos não se encaixar JSON.parseno bloco try/catch. Isso terminou com uma falha na página e não pudemos nos livrar do problema até que o código do pacote externo fosse corrigido. Tudo isso aconteceu devido ao fato de que no código, durante sua operação, apareceu um erro não processado:

SyntaxError: Unexpected token } in JSON at position 107

Ao processar dados JSON que entram no aplicativo a partir de fontes externas, não se pode esperar que sejam formatados corretamente. Você sempre precisa estar preparado para o fato de que eles podem encontrar algo que causará um erro.

Sumário


Esperamos que as recomendações fornecidas aqui para melhorar a confiabilidade do código JavaScript sejam úteis para você.

Queridos leitores! O que você recomendaria para quem deseja escrever um código JavaScript melhor e mais confiável?

Source: https://habr.com/ru/post/undefined/


All Articles