JS コードの見栄えを良くし、読みやすくする方法 (詳細な紹介を参照)

この記事では、大多数の JS プログラマが書く JS コードを美しく、読みやすくする方法を主に紹介します。注意が必要な箇所と方法をいくつか分析します。

JS プログラマーとして、自分が作成するコードが見栄えが良くて読みやすいと、見た目が良いだけでなく、別のプログラマーが引き継ぐ際の引き継ぎ作業がスムーズになります。

コメントアウトされたコードの大きなセクションをコード内に残さないでください

管理は git に任せてください。そうでない場合、なぜ git が必要ですか

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

適切に行を折り返してください

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

コメントを適切に追加してください

コメントを追加してください

コードの一部または特別な注意が必要なコード行をコメントしてください

コメントは冗長すぎますので、コメントしないでください。美しいコード自体がすべてを物語っています

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

同様の動作を持つカテゴリコードと一緒に名前を付けます

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

セマンティクスを壊すことなく、「保存できるものは保存してください」

jsの関数は第一級市民であることを心に留めておいてください

ただし、読みやすさに影響を与えるほど省略された場合は、失敗です

これまでの可読性とシンプルさの点で、どちらかを選択しなければならない場合は、常に可読性を最初に選択してください

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)

アロー関数

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

オブジェクトの値を事前に取得してください（reactを書く学生は理解する必要があります）

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

さまざまな表現を合理的に使用する

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

チェーンコールの記述方法

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

コードを垂直方向に開発し続ける

ファイル全体で特に「目立つ」コードを見つけたら、それらをラップすることを検討する必要があります

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

上記は私が行った内容です将来的に皆さんのお役に立てば幸いです。 関連記事:

JS は 1 桁を保持し、桁以外を削除します

JS は、指定された小数点を保持したまま入力を検証します

🎜🎜JS は、タイムシェアリング関数を使用してコードを最適化します 🎜🎜

以上がJS コードの見栄えを良くし、読みやすくする方法 (詳細な紹介を参照)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。