JS 코드를 보기 좋고 읽기 쉽게 만드는 방법_기본 지식

이 글은 주로 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의 기능이 먼저라는 점을 명심하세요- class citizen

단, 생략되어 가독성에 영향을 끼치면 실패입니다

가독성과 단순성 중 하나를 선택해야 한다면 언제나 가독성을 먼저 선택하세요

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
}

object 값을 미리 알아두세요(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'

합리적으로

Chain type 호출 작성 방법

// 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를 시작하는 학생들에게 도움이 되었으면 좋겠습니다.

관련 권장 사항:

웹 프런트 엔드 코드 사양

JavaScript 코드 사양 및 성능 마무리

Javascript 코딩 사양 PHP 코드 사양 요약

위 내용은 JS 코드를 보기 좋고 읽기 쉽게 만드는 방법_기본 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!