How to make your JS code better looking and easier to read (see detailed introduction)

This article mainly introduces to the majority of JS programmers how to make the JS code they write beautiful and easy to read. It also analyzes several places and methods that need attention. Let’s learn together.

As a JS programmer, if the code you write is good-looking and easy to read, it will not only look good to you, but also make the handover work go smoothly after another programmer takes over.

Don’t leave large sections of commented-out code in the code

Leave it to git to manage, otherwise why would you want git

// bad
// function add() {
// const a = b + c
// return a
// }
function add() {
 return a + 1000
}
// good
function add() {
 return a + 1000
}

Wrap lines appropriately

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

Add comments appropriately, but don’t add comments crazy

Comment a piece of code or a line of code that requires special attention

Don’t make crazy comments, too verbose, beautiful code can speak for itself

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

Category codes with similar behaviors and names together

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

Without destroying semantics Next, 'If you can save it, save it'

Keep in mind that functions in js are first-class citizens

However, if it is omitted to the extent that it affects readability, it will fail

In readability If you have to choose between readability and simplicity, always choose readability first

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)

Arrow function

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

Get the value of the object in advance (students who write react must understand)

// 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()

Use various expressions reasonably

// 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 writing method

// bad
fetch(url).then(res => {
 return res.json()
}).then(() => {
 // doSomething
}).catch(e => {
})
// good
fetch(url)
 .then(res => {
 return res.json()
 })
 .then(() => {
 // doSomething
 })
 .catch(e => {
 })

Keep the code developing vertically

Find those that are particularly 'prominent' in the entire file When coding, you should consider line-breaking them

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JS retains one digit and removes non-digits

JS validates input retaining specified decimals

JS uses time-sharing functions to optimize code

The above is the detailed content of How to make your JS code better looking and easier to read (see detailed introduction). For more information, please follow other related articles on the PHP Chinese website!