Comment rendre votre code JS plus beau et plus facile à lire_Connaissances de base

Cet article présente principalement à la majorité des programmeurs JS comment rendre le code JS qu'ils écrivent beau et facile à lire. Il analyse également plusieurs endroits et méthodes qui nécessitent une attention particulière. Si vous débutez tout juste, les étudiants JS devraient y jeter un œil et apprendre ensemble.

En tant que programmeur JS, si le code que vous écrivez est beau et facile à lire, non seulement il vous semblera beau, mais il facilitera également le transfert lorsqu'un autre programmeur prend le relais.

Ne laissez pas de grandes sections de code commenté dans le code

Laissez-le gérer à git, sinon pourquoi voudriez-vous git ?

// bad

// function add() {
//  const a = b + c
//  return a
// }

function add() {
 return a + 1000
}

// good
function add() {
 return a + 1000
}

Enrouler les lignes de manière appropriée

// bad
function a() {
 const {
  state_a,
  state_b,
  state_c
 } = this.state
 this.setState({state_a: state_a * 2})
 return 'done'
}

// good
function a() {
 const {
  state_a,
  state_b,
  state_c
 } = this.state

 this.setState({state_a: state_a * 2})

 return 'done'
}

Ajoutez des commentaires de manière appropriée, mais n'ajoutez pas de commentaires comme des fous

Commentez un morceau de code ou une ligne de code qui nécessite une attention particulière

Ne Je ne fais pas de commentaires fous, c'est trop verbeux et beau Le code peut parler de lui-même

// bad
const a = 'a' // 这是a
const b = 'b' // 这是b
const c = 'c' // 这是c

// good
/**
 * 申明变量
 */
 const a = 'a'
 const b = 'b'
 const c = 'c'

Codes de catégories avec des comportements et des noms similaires ensemble

// bad
function handleClick(arr) {
 const a = 1

 arr.map(e => e + a)

 const b = 2

 return arr.length + b
}

// good
function handleClick(arr) {
 const a = 1
 const b = 2

 arr.map(e => e + a)

 return arr.length + b
}

Sans détruire la sémantique, 'enregistrez ce que vous pouvez, enregistrez'

Gardez en gardant à l'esprit qu'une fonction en js est une En attente de citoyens

Cependant, si elle est omise au point d'affecter la lisibilité, ce sera un échec

Si vous il faut choisir entre lisibilité et simplicité, choisissez-le toujours en premier Lisibilité

function add(a) {
 return a + 1
}

function doSomething() {

}

// bad
arr.map(a => {
 return add(a)
})

setTimeout(() => {
 doSomething()
}, 1000)

// good
arr.map(add)

setTimeout(doSomething, 1000)

Fonctions fléchées

<. 🎜>

// bad
const a = (v) => {
 return v + 1
}

// good
const a = v => v + 1


// bad
const b = (v, i) => {
 return {
  v,
  i
 }
}

// good
const b = (v, i) => ({v, i})


// bad
const c = () => {
 return (dispatch) => {
  // doSomething
 }
}

// good
const c = () => dispatch => {
 // doSomething
}

Obtenez la valeur de l'

objet à l'avance (les étudiants qui écrivent réagissent doivent comprendre)

// bad
const a = this.props.prop_a + this.props.prop_b

this.props.fun()

// good
const {
 prop_a,
 prop_b,
 fun
} = this.props

const a = prop_a + prop_b

fun()

Utilisation raisonnable de diverses

expressions

// bad
if (cb) {
 cb()
}

// good
cb && cb()


// bad
if (a) {
 return b
} else {
 return c
}

// good
return a ? b : c


// bad
if (a) {
 c = a
} else {
 c = 'default'
}

// good
c = a || 'default'

Méthode d'écriture d'appel en chaîne

// bad
fetch(url).then(res => {
 return res.json()
}).then(() => {
 // doSomething
}).catch(e => {

})

// good
fetch(url)
 .then(res => {
  return res.json()
 })
 .then(() => {
  // doSomething
 })
 .catch(e => {

 })

Gardez le code verticalement

Trouvez ceux qui se démarquent particulièrement tout au long du fichier. Lors de la saisie du code, vous devriez envisager de les couper en lignes

// bad
return handleClick(type, key, ref, self, source, props)

// good
return handleClick(
 type,
 key,
 ref,
 self,
 source,
 props
)

// bad
const a = this.props.prop_a === &#39;hello&#39; ? <di>world</p> : null

// good
const a = this.props.prop_a === &#39;hello&#39;
 ? <di>world</p>
 : null

Ce qui précède représente tout le contenu de cet article, j'espère qu'il sera utile aux étudiants qui débutent avec js.

Recommandations associées :

Spécifications du code frontal Web

Spécifications du code JavaScript et finition des performances

Spécifications de codage Javascript Résumé des spécifications du code PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!