> 웹 프론트엔드 > JS 튜토리얼 > JS 코드를 보기 좋고 읽기 쉽게 만드는 방법_기본 지식

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

韦小宝
풀어 주다: 2017-12-04 13:53:44
원래의
1367명이 탐색했습니다.

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿