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
}

의미를 파괴하지 않고 'save what you can, save it''

JS의 함수는 일급 시민이라는 점을 명심하세요

다만 가독성에 영향을 미칠 정도로 생략하면 a failure

지금까지의 가독성과 단순성 측면에서 하나를 선택해야 한다면 항상 가독성을 먼저 선택하세요

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'

Chain call 작성 방법

// 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는 한 자리 숫자를 유지하고 숫자가 아닌 숫자는 제거합니다.

JS는 지정된 소수점 이하 자릿수를 유지하는 입력의 유효성을 검사합니다.

JS는 시간 공유 함수를 사용하여 코드를 최적화합니다.

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