写一手漂亮的 JavaScript

介绍

看了很多best practice，却没有人教我怎么去写一手漂亮的js代码，今天我来讲讲我自己写js的经验

不要在代码中留大段注释掉的代码

1. // bad

3. // function add() {

4. //   const a = b + c

5. //   return a

6. // }

8. function add() {

9.  return a + 1000

10. }

12. // good

13. function add() {

14.  return a + 1000

15. }

适当地换行

1. // bad

2. function a() {

3.  const {

4.    state_a,

5.    state_b,

6.    state_c

7.  } = this.state

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

9.  return 'done'

10. }

12. // good

13. function a() {

14.  const {

15.    state_a,

16.    state_b,

17.    state_c

18.  } = this.state

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

22.  return 'done'

23. }

适当的添加注释，但不要疯狂的添加注释

• 对一段代码或者一行特别需要注意的代码注释

• 不要疯狂的注释，太啰嗦，漂亮的代码自己会说话

1. // bad

2. const a = 'a' // 这是a

3. const b = 'b' // 这是b

4. const c = 'c' // 这是c

6. // good

7. /**

8. * 申明变量

9. */

10. const a = 'a'

11. const b = 'b'

12. const c = 'c'

将类似行为、命名的代码归类在一起

1. // bad

2. function handleClick(arr) {

3.  const a = 1

5.  arr.map(e => e + a)

7.  const b = 2

9.  return arr.length + b

10. }

12. // good

13. function handleClick(arr) {

14.  const a = 1

15.  const b = 2

17.  arr.map(e => e + a)

19.  return arr.length + b

20. }

在不破坏语义性的情况下，'能省则省'

• 牢记js中函数是一等公民

• 但是，如果省略到影响可读性了，就是失败的

• 在可读性和简洁性至今必须选一个的话，永远先选可读性

1. function add(a) {

2.  return a + 1

3. }

5. function doSomething() {

7. }

9. // bad

10. arr.map(a => {

11.  return add(a)

12. })

14. setTimeout(() => {

15.  doSomething()

16. }, 1000)

18. // good

19. arr.map(add)

21. setTimeout(doSomething, 1000)

1. // bad

2. const a = (v) => {

3.  return v + 1

4. }

6. // good

7. const a = v => v + 1

9. // bad

10. const b = (v, i) => {

11.  return {

12.    v,

13.    i

14.  }

15. }

17. // good

18. const b = (v, i) => ({v, i})

20. // bad

21. const c = () => {

22.  return (dispatch) => {

23.    // doSomething

24.  }

25. }

27. // good

28. const c = () => dispatch => {

29.  // doSomething

30. }

1. // bad

2. const a = this.props.prop_a + this.props.prop_b

4. this.props.fun()

6. // good

7. const {

8.  prop_a,

9.  prop_b,

10.  fun

11. } = this.props

13. const a = prop_a + prop_b

15. fun()

合理使用各种表达式

1. // bad

2. if (cb) {

3.  cb()

4. }

6. // good

7. cb && cb()

9. // bad

10. if (a) {

11.  return b

12. } else {

13.  return c

14. }

16. // good

17. return a ? b : c

19. // bad

20. if (a) {

21.  c = a

22. } else {

23.  c = 'default'

24. }

26. // good

27. c = a || 'default'

链式调用写法

1. // bad

2. fetch(url).then(res => {

3.  return res.json()

4. }).then(() => {

5.  // doSomething

6. }).catch(e => {

8. })

10. // good

11. fetch(url)

12.  .then(res => {

13.    return res.json()

14.  })

15.  .then(() => {

16.    // doSomething

17.  })

18.  .catch(e => {

20.  })

保持代码是纵向发展的

• 发现那些在整个文件中特别'突出'的代码时，应该考虑对他们做换行处理了

1. // bad

2. return handleClick(type, key, ref, self, source, props)

4. // good

5. return handleClick(

6.  type,

7.  key,

8.  ref,

9.  self,

10.  source,

11.  props

12. )

14. // bad

15. const a = this.props.prop_a === 'hello' ? <di>world</div> : null

17. // good

18. const a = this.props.prop_a === 'hello'

19.  ? <di>world</div>

20.  : null

总结

个人经验，如有错误，还望指正

原文：https://segmentfault.com/a/1190000012244094