JSコードを見やすく・読みやすくする方法_基礎知識

この記事では、主に大多数の JS プログラマーが作成する JS コードを美しく読みやすくする方法を紹介します。JS を始めたばかりの学生は注意が必要です。わかりました、一緒に学びましょう。

JS プログラマーとして、自分が書くコードが見栄えが良くて読みやすいと、見た目が良いだけでなく、別のプログラマーが引き継ぐ際の引き継ぎが非常にスムーズになります。コードにコメントの大きなセクションを残してはいけません

管理するためにgitにそれを削除してください。そうでなければ、なぜgit

rreee

wrapラインが適切にしたいのですか

rreee

コメントは適切に追加してください。ただし、おかしなコメントは追加しないでください

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

冗長すぎるため、おかしなコメントはしないでください。美しいコードはそれ自体を物語っています

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

セマンティクスを破壊せずに、「保存できるものは保存」します

jsの関数が最初であることに留意してください。クラス市民

ただし、これが省略されて読みやすさに影響を与える場合は失敗します

読みやすさと単純さのどちらかを選択しなければならない場合は、常に読みやすさを最初に選択してください

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

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

arrow function

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

事前に
オブジェクト

の値を取得しておきます（reactを書く生徒は理解する必要があります）

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
}

チェーンタイプ通話書き方

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

以上がこの記事の内容のすべてであり、jsを始めたばかりの学生に役立つことを願っています。

関連する推奨事項:

Web フロントエンドのコード仕様

JavaScript コードの仕様とパフォーマンスの構成

JavaScript のコーディング仕様 PHP コード仕様の概要

以上がJSコードを見やすく・読みやすくする方法_基礎知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。