Home > Web Front-end > JS Tutorial > body text

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

韦小宝
Release: 2017-12-04 13:53:44
Original
1336 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 'done'
}

// good
function a() {
 const {
  state_a,
  state_b,
  state_c
 } = this.state

 this.setState({state_a: state_a * 2})

 return 'done'
}
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 = 'a' // 这是a
const b = 'b' // 这是b
const c = 'c' // 这是c

// good
/**
 * 申明变量
 */
 const a = 'a'
 const b = 'b'
 const c = 'c'
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 = 'default'
}

// good
c = a || 'default'
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!