Home > Article > Web Front-end > How to make your JS code better looking and easier to read_Basic knowledge
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 }
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 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'
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 }
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)
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 }
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()
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
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 === 'hello' ? <di>world</p> : null // good const a = this.props.prop_a === 'hello' ? <di>world</p> : null
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!