10 hacks de JavaScript que te convertirán en un profesional

He escrito mucho código de baja calidad en el pasado. Revisando sus fragmentos, incluso empiezo a dudar si soy apto para el papel de programador. Para evitar que esto te suceda, aprende de mis errores.

1. Uso indebido de promesas

Las promesas proporcionan una forma elegante de manejar operaciones asincrónicas en JavaScript. Esta es también una de las soluciones para evitar el "infierno de las devoluciones de llamada". Sin entender esto correctamente, usted, como yo antes, escribirá código como este:

// ❌
getUserInfo()
  .then((userInfo) => {
    getArticles(userInfo)
      .then((articles) => {
        Promise.all(articles.map((article) => getArticleDetail(article)))
          .then((articleDetails) => {
            console.log(articleDetails)
          })
      })
  })

Este fragmento de código hace lo siguiente:

1. Obtiene información básica sobre el usuario.
2. Obtiene un breve resumen de todos los artículos sobre información del usuario.
3. Obtiene los detalles del artículo a través de una breve descripción de los artículos.

No aprovecha las promesas en absoluto, a diferencia del siguiente fragmento:

// ✅
getUserInfo()
  .then((getArticles)
  .then((articles) => {
    return Promise.all(articles.map((article) => getArticleDetail(article)))
  })
  .then((articleDetails) => {
    console.log(articleDetails)
  })

2. Ignorar los mensajes de error

Cuando escribimos lógica de código para solicitudes exitosas, a veces ignoramos las solicitudes fallidas.

// ❌
const getUserInfo = async () => {
  try {
    const userInfo = await fetch('/api/getUserInfo')
  } catch (err) {
    
  }
}

Tal código es un signo de la inexperiencia del programador. Es necesario implementar un mensaje fácil de usar y no dejar que todo siga su curso.

// ✅
const getUserInfo = async () => {
  try {
    const userInfo = await fetch('/api/getUserInfo')
  } catch (err) {
    Toast(err.message)
  }
}

3. Características con demasiados parámetros

Supongamos que desea obtener una serie de datos básicos sobre un usuario: nombre, sexo, edad, etc.

// ❌
const getUserInfo = (name, age, weight, gender, mobile , nationality, hobby, address) => {
  // ...
}
getUserInfo('fatfish', 100, 2000, ...)

Si hay demasiados parámetros de función, debe utilizar objetos para transmitir la información necesaria. Este truco de vida mejora la legibilidad y extensibilidad del código.

// ✅
const getUserInfo = (options) => {
  const { name, gender, age, mobile, weight, nationality, hobby, address } = options
  // ...
}
getUserInfo({
  name: 'fatfish',
  age: 100,
  weight: 2000
  // ...
})

4. Números mágicos

¿Alguna vez has escrito código como el de abajo? ¿Deberían usarse los números en todas partes para los juicios lógicos? Solo que ahora no entiendo qué significan exactamente, , .123

❌
// component1.js
if (status === 1 || status === 2) {
  // ...
} else if (status === 3) {
  // ...
}
// component2.js
if (status === 1 || status === 2) {
  // ...
}

Es mejor definir estos números como constantes.

// ✅
// constants.js
export const STATUS = {
  adultRealName: 1,
  minorRealName: 2,
  notRealName: 3,
  // ...
}
// component1.js
import { STATUS } from './constants.js'
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
} else if (status === STATUS.notRealName) {
  // ...
}
// component2.js
import { STATUS } from './constants.js'
// component2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
}

5. Usar .length para juzgar la longitud de una cadena

En la mayoría de los casos, es seguro usarlo para juzgar la longitud de una cuerda. Pero debes tener cuidado en el caso de ingresar un formulario..length

Cuando se introduzca, el valor será 2. ¿Qué tipo de rarezas?🍫nameLen

// ❌
<input type="text" id="name">
<script>
  const $name = document.getElementById('name')
  $name.addEventListener('blur', () => {
    const name = $name.value
    const nameLen = name.length
    // ввод: fatfish => nameLen: 7
    // ввод: 🍫  => nameLen: 2
    console.log(`name: ${name}, nameLen: ${nameLen}`)
  }, false)
</script>

Y hay una razón para eso.

// ✅
<input type="text" id="name">
<script>
  const $name = document.getElementById('name')
  $name.addEventListener('blur', () => {
    const name = $name.value
    const nameLen = name.length
    const spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g
    const nameRealLen = name.replace(spRegexp, '_').length
    // ввод: fatfish => nameLen: 7, nameRealLen: 7
    // ввод: 🍫  => nameLen: 2, nameRealLen: 1
    console.log(`name: ${name}, nameLen: ${nameLen}, nameRealLen: ${nameRealLen}`)
  }, false)
</script>

6. No hay comentarios sobre el código

A menudo reprochamos a nuestros colegas por esto, pero no nos molestamos en comentar.

// ❌
const fn = (dpr) => {
  if (dpr >= 2) {
    // ...
  } else {
  }
}

¿Qué crees que significa dpr? Esto es.window devicePixelRatio

// ✅
const fn = (dpr) => {
  if (dpr >= 2) {
    // ...
  } else {
  }
}

7. Comentarios sin sentido sobre el código

Peor que la ausencia total de comentarios sobre el código solo pueden ser comentarios sin sentido. Leerlos lleva mucho tiempo.

¿Por qué no explicar lo que significa "a" o usar nombres de variables significativos?

// ❌
let a = 1 

8. Denominación aleatoria

Los fragmentos de código con nombres de variables aleatorias dificultan su lectura.

// ❌
const mw = 375

Es mejor dar a las variables nombres correctos y significativos.

✅
const maxWidth = 375

9. Guardar código heredado

Las funciones en el sitio se ajustan constantemente. Como resultado, aparecen características nuevas y obsoletas. Pero un programador novato no elimina nada, porque está preocupado: ¿qué pasa si las funciones obsoletas serán útiles en el futuro?

Esta preocupación es completamente innecesaria, porque es extremadamente improbable que se utilicen características obsoletas en el futuro. Incluso si son necesarios, se pueden rastrear a través de git.

10. Más de mil líneas en el código del componente

¿Obtuviste más de mil líneas en el código del componente? No es bueno en absoluto. Debe dividir la funcionalidad en componentes más pequeños.