이 글은 주로 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 === 'hello' ? <di>world</p> : null // good const a = this.props.prop_a === 'hello' ? <di>world</p> : null
위 내용이 이 글의 전부입니다. 이제 막 js를 시작하는 학생들에게 도움이 되었으면 좋겠습니다.
관련 권장 사항:
위 내용은 JS 코드를 보기 좋고 읽기 쉽게 만드는 방법_기본 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!