How to make your JS code better looking and easier to read (see detailed introduction)-JS Tutorial-php.cn

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

亚连

Release： 2018-05-18 18:00:48

Original

1426 people have browsed it

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
}

Copy after login

Wrap lines appropriately

// bad
function a() {
 const {
 state_a,
 state_b,
 state_c
 } = this.state
 this.setState({state_a: state_a * 2})
 return &#39;done&#39;
}
// good
function a() {
 const {
 state_a,
 state_b,
 state_c
 } = this.state
 this.setState({state_a: state_a * 2})
 return &#39;done&#39;
}

Copy after login

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 = &#39;a&#39; // 这是a
const b = &#39;b&#39; // 这是b
const c = &#39;c&#39; // 这是c
// good
/**
 * 申明变量
 */
 const a = &#39;a&#39;
 const b = &#39;b&#39;
 const c = &#39;c&#39;

Copy after login

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
}

Copy after login

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)

Copy after login

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
}

Copy after login

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

Copy after login

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 = &#39;default&#39;
}
// good
c = a || &#39;default&#39;

Copy after login

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 => {
 })

Copy after login

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

Copy after login

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

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!