How to make your JS code better looking and easier to read

How to make your JS code better looking and easier to read_Basic knowledge

韦小宝

Release： 2017-12-04 13:53:44

Original

1374 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. If you are just getting started, Students of JS should take a look and 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 extremely smooth after other programmers take over.

Don’t leave large sections in the codeCommentsThe deleted 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 appropriately Comment, but don’t add crazy comments

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

Don’t comment crazy, it’s too verbose, beautiful code will take care of itself Talk

// 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 behavior and naming 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, 'save what you can, save it'

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

However, if it is omitted to the point of affecting readability, it will be a failure

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

Correct in advanceObjectValue (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

When you find those codes that are particularly 'prominent' in the entire file, you should consider wrapping 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 all the content of this article. I hope it will be helpful to students who are just getting started with js.

Related recommendations:

Web front-end code specifications

JavaScript code specifications and performance finishing

Javascript coding specifications PHP code specification summary

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