Como escrever código JS limpo? 5 dicas de redação para compartilhar

Reduza a carga de leitura, inspire o pensamento criativo e aprenda habilidades de JavaScript facilmente. Rigongyiping, jym, rush ~

1. Definimos números como constantes

, como o seguinte código:

const isOldEnough = (person) => {.
  return person.getAge() >= 100;
}

Quem sabe a que se refere especificamente este 100? Geralmente precisamos combinar o contexto da função para especular e julgar qual valor esse 100 pode representar especificamente.

Se houver vários desses números, isso causará facilmente maior confusão.

Escreva JavaScript limpo: Definir o número como uma constante

resolve este problema claramente:

const AGE_REQUIREMENT = 100;
const isOldEnough = (pessoa) => {
  return person.getAge() >= IDADE_REQUIREMENT;
}

Agora, ao declarar o nome da constante, podemos entender imediatamente que 100 significa “requisito de idade”. Ao modificar, você pode localizá-lo rapidamente, modificá-lo em um local e ter efeito em vários locais.

2. Evite usar valores booleanos como parâmetros de função.

Passar valores booleanos para funções como parâmetros é um método de escrita comum que facilmente causa confusão no código.

const validCreature = (criatura, isHuman) => {
  if (éHumano) {
    // ...
  } outro {
    // ...
  }
}

O valor booleano passado para a função como parâmetro não pode expressar um significado claro. Ele apenas pode dizer ao leitor que esta função fará um julgamento e produzirá duas ou mais situações.

No entanto, defendemos o Princípio da Responsabilidade Única para funções, portanto:

Escreva JavaScript limpo: Evite valores booleanos como parâmetros de função

const validPerson = (person) => {
  // ...
}
const ValidateCreature = (criatura) => {
  // ...
}

3. Encapsulando múltiplas condições,

geralmente escrevemos código como este:

if (
  pessoa.getAge() > 30 &&
  pessoa.getNome() === "simão" &&
  person.getOrigin() === "Suécia"
) {
  // ...
}

Não é impossível, mas depois de muito tempo, de repente você não entenderá para que servem esses julgamentos, por isso é recomendado encapsular essas condições com variáveis ​​ou funções.

Escreva JavaScript limpo: encapsule múltiplas condições

const isSimon =
  pessoa.getAge() > 30 &&
  pessoa.getNome() === "simão" &&
  person.getOrigin() === "Suécia";
if (éSimão) {
  // ...
}

ou

const isSimon = (pessoa) => {
  retornar (
    pessoa.getAge() > 30 &&
    pessoa.getNome() === "simão" &&
    person.getOrigin() === "Suécia"
  );
};
if (éSimão(pessoa)) {
  // ...
}

Ah, acontece que essas condições são para determinar se essa pessoa é Simon ~

Esse tipo de código é um código de estilo declarativo, que é mais legível.

4. Evite julgamentos negativos

Em julgamentos condicionais, o uso de julgamentos negativos causará uma carga adicional de pensamento.

Por exemplo, no código abaixo, a condição !isCreatureNotHuman(creature) é dupla negativa, o que dificulta um pouco a leitura.

const isCreatureNotHuman = (criatura) => {
  // ...
}

if (!isCreatureNotHuman(criatura)) {
  // ...
}

Escreva JavaScript limpo: evite condições de julgamento negativo

reescrevendo-o nas seguintes regras de escrita para torná-lo mais fácil de ler. Embora este seja apenas um pequeno truque, em uma grande quantidade de lógica de código, seguir este princípio em muitos lugares será definitivamente muito útil. ajuda útil.

Muitas vezes, ao ler o código, continuo lendo. Quando vejo um método de escrita "ruim", não aguento mais. Os detalhes serão sobrepostos e um dique de mil milhas desabará em um formigueiro.

const isCreatureHuman = (criatura) => {
  // ...
}
if (isCreatureHuman(criatura)) {
  // ...
}

5. Evite muito if...else...

Este ponto sempre foi enfatizado por Bengua:

Por exemplo, o seguinte código:

if(x===a){
   res=A
}senão se(x===b){
   res=B
}senão se(x===c){
   res=C
}senão se(x===d){
    //...
}

Reescrito como mapa:

let mapRes={
    uma: UMA,
    b: B,
    c:C,
    //...
}
res=mapRes[x]

Outro exemplo é o seguinte código:

const isMammal = (creature) => {
  if (criatura === "humano") {
    retornar verdadeiro;
  } else if (criatura === "cachorro") {
    retornar verdadeiro;
  } else if (criatura === "gato") {
    retornar verdadeiro;
  }
  // ...
retornar falso;
}

Reescrito como um array:

const isMammal = (criatura) => {
  const mamíferos = ["humano", "cachorro", "gato", /* ... */];
  retornar mamíferos.includes(criatura);
}

Escreva JavaScript limpo: evite muito if...else...

Então, quando houver muito if...else... no código, pense em mais um passo e veja se você pode fazer uma pequena modificação para fazer o código parecer mais "limpo".

Resumo: As técnicas acima podem não parecer dignas de menção em exemplos, mas em projetos reais, quando a lógica de negócios se torna complexa e a quantidade de código aumenta, essas dicas certamente fornecerão efeitos positivos e ajuda além da imaginação.

A descrição acima é como escrever código JS limpo? 5 dicas de escrita são compartilhadas em detalhes. Para obter mais informações, preste atenção a outros artigos relacionados no site PHP chinês!