¿Cómo escribir código JS limpio? 5 consejos de escritura para compartir

Reduzca la carga de lectura, inspire el pensamiento creativo y aprenda habilidades de JavaScript fácilmente Rigongyiping, jym, rush~

1. Definimos números como constantes

, como el siguiente código:

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

Quién sabe a qué se refiere específicamente este 100? Por lo general, necesitamos combinar el contexto de la función para especular y juzgar qué valor puede representar específicamente este 100.

Si hay varios números de este tipo, fácilmente causará una mayor confusión.

Escribe JavaScript limpio: definir el número como una constante

resuelve este problema claramente:

const AGE_REQUIREMENT = 100;
const esOldEnough = (persona) => {
  return persona.getAge() >= AGE_REQUIREMENT;
}

Ahora, al declarar el nombre de la constante, podemos entender inmediatamente que 100 significa "requisito de edad". Al modificarlo, puede ubicarlo rápidamente, modificarlo en un lugar y surtir efecto en varios lugares.

2. Evite el uso de valores booleanos como parámetros de funciones.

Pasar valores booleanos a funciones como parámetros es un método de escritura común que fácilmente causa confusión en el código.

const validarCreatura = (criatura, esHumano) => {
  si (esHumano) {
    //...
  } demás {
    //...
  }
}

El valor booleano pasado a la función como parámetro no puede expresar un significado claro. Solo puede decirle al lector que esta función emitirá un juicio y producirá dos o más situaciones.

Sin embargo, defendemos el principio de responsabilidad única para las funciones, por lo tanto:

Escriba JavaScript limpio: evite los valores booleanos como parámetros de función

const validarPerson = (persona) => {
  //...
}
const validarCreature = (criatura) => {
  //...
}

3. Encapsulando múltiples condiciones,

a menudo escribimos código como este:

if (
  persona.getAge() > 30 &&
  persona.getName() === "simón" &&
  person.getOrigin() === "suecia"
) {
  //...
}

No es imposible, pero después de mucho tiempo, de repente no entenderás para qué sirven estos juicios, por lo que se recomienda encapsular estas condiciones con variables o funciones.

Escribir JavaScript limpio: encapsular múltiples condiciones

const isSimon =
  persona.getAge() > 30 &&
  persona.getName() === "simón" &&
  person.getOrigin() === "suecia";
si (esSimón) {
  //...
}

o

const esSimon = (persona) => {
  devolver (
    persona.getAge() > 30 &&
    persona.getName() === "simón" &&
    person.getOrigin() === "suecia"
  );
};
si (esSimón(persona)) {
  //...
}

Oh, resulta que estas condiciones son para determinar si esta persona es Simon ~

Este tipo de código es un código de estilo declarativo, que es más legible.

4. Evite los juicios negativos.

En los juicios condicionales, el uso de juicios negativos provocará una carga adicional de pensamiento.

Por ejemplo, en el código siguiente, la condición !isCreatureNotHuman(creature) es doblemente negativa, lo que dificulta un poco la lectura.

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

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

Escriba JavaScript limpio: evite las condiciones de juicio negativo

reescribiéndolo en las siguientes reglas de escritura para que sea más fácil de leer. Aunque esto es solo un pequeño truco, en una gran cantidad de lógica de código, seguir este principio en muchos lugares definitivamente será muy útil. útil.

Muchas veces, cuando leo el código, sigo leyendo. Cuando veo un método de escritura "malo", no puedo soportarlo más. Los detalles se superpondrán y un dique de mil millas colapsará en un hormiguero.

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

5. Evite muchos if...else...

Este punto siempre ha sido enfatizado por Bengua:

Por ejemplo, el siguiente código:

if(x===a){
   res=A
}de lo contrario si(x===b){
   res=B
}de lo contrario si(x===c){
   res=C
}de lo contrario si(x===d){
    //...
}

Reescrito como mapa:

let mapRes={
    Automóvil club británico,
    cama y desayuno,
    c:C,
    //...
}
res=mapRes[x]

Otro ejemplo es el siguiente código:

const isMammal = (criatura) => {
  if (criatura === "humano") {
    devolver verdadero;
  } else if (criatura === "perro") {
    devolver verdadero;
  } else if (criatura === "gato") {
    devolver verdadero;
  }
  //...
devolver falso;
}

Reescrito como una matriz:

const isMammal = (criatura) => {
  const mamíferos = ["humano", "perro", "gato", /* ... */];
  devolver mamíferos.incluye(criatura);
}

Escribe JavaScript limpio: evita muchos if...else...

Entonces, cuando haya muchos if...else... en el código, piensa un paso más y ve si puedes hacer una pequeña modificación. para que el código se vea más "limpio"".

Resumen: Puede que no parezca que valga la pena mencionar las técnicas anteriores en los ejemplos, pero en proyectos reales, cuando la lógica empresarial se vuelve compleja y la cantidad de código aumenta, estos consejos definitivamente proporcionarán efectos positivos y ayudarán incluso más allá de la imaginación.

¿Lo anterior es cómo escribir código JS limpio? Se comparten en detalle 5 consejos de escritura. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.