Comment rendre votre code JS plus beau et plus facile à lire (voir introduction détaillée)-js tutoriel-php.cn

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

亚连

Libérer： 2018-05-18 18:00:48

original

1474 Les gens l'ont consulté

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
}

Copier après la connexion

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 &#39;done&#39;
}
// good
function a() {
 const {
 state_a,
 state_b,
 state_c
 } = this.state
 this.setState({state_a: state_a * 2})
 return &#39;done&#39;
}

Copier après la connexion

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 = &#39;a&#39; // 这是a
const b = &#39;b&#39; // 这是b
const c = &#39;c&#39; // 这是c
// good
/**
 * 申明变量
 */
 const a = &#39;a&#39;
 const b = &#39;b&#39;
 const c = &#39;c&#39;

Copier après la connexion

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
}

Copier après la connexion

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)

Copier après la connexion

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
}

Copier après la connexion

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

Copier après la connexion

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 = &#39;default&#39;
}
// good
c = a || &#39;default&#39;

Copier après la connexion

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 => {
 })

Copier après la connexion

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

Copier après la connexion

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.