您的位置: 首页  >  文章  >  写一手漂亮的 JavaScript

写一手漂亮的 JavaScript

分类: 文章 • 2024-01-27 12:36:58

介绍

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

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



    

  1. // bad
    2. 

    3. 

  3. // function add() {
    4. 

  4. //   const a = b + c
    5. 

  5. //   return a
    6. 

  6. // }
    7. 

    8. 

  8. function add() {
    9. 

  9.   return a + 1000
    10. 

  10. }
    11. 

    12. 

  12. // good
    13. 

  13. function add() {
    14. 

  14.   return a + 1000
    15. 

  15. }
    16. 



适当地换行




    

  1. // bad
    2. 

  2. function a() {
    3. 

  3.   const {
    4. 

  4.     state_a,
    5. 

  5.     state_b,
    6. 

  6.     state_c
    7. 

  7.   } = this.state
    8. 

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

  9.   return 'done'
    10. 

  10. }
    11. 

    12. 

  12. // good
    13. 

  13. function a() {
    14. 

  14.   const {
    15. 

  15.     state_a,
    16. 

  16.     state_b,
    17. 

  17.     state_c
    18. 

  18.   } = this.state
    19. 

    20. 

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

    22. 

  22.   return 'done'
    23. 

  23. }
    24. 



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


    

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

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





    

  1. // bad
    2. 

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

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

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

    6. 

  6. // good
    7. 

  7. /**
    8. 

  8.  * 申明变量
    9. 

  9.  */
    10. 

  10.  const a = 'a'
    11. 

  11.  const b = 'b'
    12. 

  12.  const c = 'c'
    13. 



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




    

  1. // bad
    2. 

  2. function handleClick(arr) {
    3. 

  3.   const a = 1
    4. 

    5. 

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

    7. 

  7.   const b = 2
    8. 

    9. 

  9.   return arr.length + b
    10. 

  10. }
    11. 

    12. 

  12. // good
    13. 

  13. function handleClick(arr) {
    14. 

  14.   const a = 1
    15. 

  15.   const b = 2
    16. 

    17. 

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

    19. 

  19.   return arr.length + b
    20. 

  20. }
    21. 



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


    

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

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

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





    

  1. function add(a) {
    2. 

  2.   return a + 1
    3. 

  3. }
    4. 

    5. 

  5. function doSomething() {
    6. 

    7. 

  7. }
    8. 

    9. 

  9. // bad
    10. 

  10. arr.map(a => {
    11. 

  11.   return add(a)
    12. 

  12. })
    13. 

    14. 

  14. setTimeout(() => {
    15. 

  15.   doSomething()
    16. 

  16. }, 1000)
    17. 

    18. 

  18. // good
    19. 

  19. arr.map(add)
    20. 

    21. 

  21. setTimeout(doSomething, 1000)
    22. 





    

  1. // bad
    2. 

  2. const a = (v) => {
    3. 

  3.   return v + 1
    4. 

  4. }
    5. 

    6. 

  6. // good
    7. 

  7. const a = v => v + 1
    8. 

    9. 

  9. // bad
    10. 

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

  11.   return {
    12. 

  12.     v,
    13. 

  13.     i
    14. 

  14.   }
    15. 

  15. }
    16. 

    17. 

  17. // good
    18. 

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

    20. 

  20. // bad
    21. 

  21. const c = () => {
    22. 

  22.   return (dispatch) => {
    23. 

  23.     // doSomething
    24. 

  24.   }
    25. 

  25. }
    26. 

    27. 

  27. // good
    28. 

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

  29.   // doSomething
    30. 

  30. }
    31. 





    

  1. // bad
    2. 

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

    4. 

  4. this.props.fun()
    5. 

    6. 

  6. // good
    7. 

  7. const {
    8. 

  8.   prop_a,
    9. 

  9.   prop_b,
    10. 

  10.   fun
    11. 

  11. } = this.props
    12. 

    13. 

  13. const a = prop_a + prop_b
    14. 

    15. 

  15. fun()
    16. 



合理使用各种表达式




    

  1. // bad
    2. 

  2. if (cb) {
    3. 

  3.   cb()
    4. 

  4. }
    5. 

    6. 

  6. // good
    7. 

  7. cb && cb()
    8. 

    9. 

  9. // bad
    10. 

  10. if (a) {
    11. 

  11.   return b
    12. 

  12. } else {
    13. 

  13.   return c
    14. 

  14. }
    15. 

    16. 

  16. // good
    17. 

  17. return a ? b : c
    18. 

    19. 

  19. // bad
    20. 

  20. if (a) {
    21. 

  21.   c = a
    22. 

  22. } else {
    23. 

  23.   c = 'default'
    24. 

  24. }
    25. 

    26. 

  26. // good
    27. 

  27. c = a || 'default'
    28. 



链式调用写法




    

  1. // bad
    2. 

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

  3.   return res.json()
    4. 

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

  5.   // doSomething
    6. 

  6. }).catch(e => {
    7. 

    8. 

  8. })
    9. 

    10. 

  10. // good
    11. 

  11. fetch(url)
    12. 

  12.   .then(res => {
    13. 

  13.     return res.json()
    14. 

  14.   })
    15. 

  15.   .then(() => {
    16. 

  16.     // doSomething
    17. 

  17.   })
    18. 

  18.   .catch(e => {
    19. 

    20. 

  20.   })
    21. 



保持代码是纵向发展的


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




    

  1. // bad
    2. 

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

    4. 

  4. // good
    5. 

  5. return handleClick(
    6. 

  6.   type,
    7. 

  7.   key,
    8. 

  8.   ref,
    9. 

  9.   self,
    10. 

  10.   source,
    11. 

  11.   props
    12. 

  12. )
    13. 

    14. 

  14. // bad
    15. 

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

    17. 

  17. // good
    18. 

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

  19.   ? <di>world</div>
    20. 

  20.   : null
    21. 



总结


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





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







写一手漂亮的 JavaScript


															

																					

								

									相关推荐