Comment rendre votre code JS plus beau et plus facile à lire (voir introduction détaillée)

Cet article présente principalement à la majorité des programmeurs JS comment rendre le code JS qu'ils écrivent beau et facile à lire. Il analyse plusieurs endroits et méthodes qui nécessitent une attention particulière.

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
}

Enroulez 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 de manière folle

Portez une attention particulière à un morceau de code ou une ligne Commentaires de code

Ne faites pas de commentaires fous, c'est trop verbeux, un beau 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
}

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

Sans détruire la sémantique, 'Omettez-le si vous pouvez'

Gardez à l'esprit que les fonctions en js sont des citoyens de première classe

Cependant, s'il est omis de au point d'affecter la lisibilité, cela échouera.

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)

Si vous devez choisir entre la lisibilité et la simplicité, choisissez toujours la lisibilité en premier

// 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
}

Fonction flèche

// 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()

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

// 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'

Utilisez raisonnablement diverses expressions

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

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

Laissez le code se développer verticalement

// 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

Lorsque vous trouvez les codes qui « dépassent » particulièrement dans l'ensemble du fichier, vous devriez envisager de les envelopper

Ce qui précède est ce que j'ai compilé pour tout le monde . J'espère que cela vous sera utile à l'avenir.

Articles connexes :

JS conserve un chiffre et supprime les non-chiffres

JS valide l'entrée en conservant les décimales spécifiées

JS utilise des fonctions de partage de temps pour optimiser le code

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!