阶段总结之—代码风格

最近接手了公司一个新的项目，在大概看了一遍代码之后觉得一些地方让我看着有点难受，而且没有太多注释，不利于理解，所以就对自己看到的一些可以更合理的地方进行了改动。再结合之前自己写过的一些不和规范的代码，一起来做个总结。

1. 命名相关

• 不论是对变量命名，还是函数命名，又或者文件命名都要做到 语义化 ，争取就算不做注释别人也能一眼就看懂。在这个基础上，再做到简洁明了。缩写可以有，但是不要用一些自我感觉良好的缩写！后面过几个月再看肯定想不起来这缩写代表啥意思了。
• 组件名一定要语义化，让人知道这个组件是干啥的，下面这个完全看不出来是什么意思。
• 
• 如果是多个单词要驼峰式命名。
• 特定的变量要适当的加注释。
• 如果是Boolean值，在命名时最好以is/has/can 等开头。
• 常量名大写，如果是多个单词用下划线_相连。

2. JavaScript相关

if-else：

• 合理的使用 switch/数组/对象/循环 来代替较多的 if…else 语句。

switch (type) {
  case 'text':
    ...
    break
  case 'button':
    ...
    break
  case 'select':
    ...
    break
  default:
    ...
}

handler = {
  1: () => {}, // 记得return返回值
  2: () => {},
  3: () => {},
  default: () => {}
}
handler['1']() || handler['default']()

• 可以优先选一些条件分支，当进入这些分支之后，就立即退出这个函数。减少一些没有用的 else 片段，简化代码。
• 如果条件分支语句太长，可以提炼成一个独立的函数。

 

异常处理相关

• 在处理异步请求的时候，一定要对 response 中的数据进行异常处理。
• 在给变量赋值时，最好给一个默认兜底值。如：

  let name = person.name || ''
  let age = person.age || 1

   

优先使用函数式编程

• 普通的for循环可以用map, reduce, find等方法替代。 

函数相关

• 不写太长的函数，尽量一个函数只实现一个逻辑。
• 尽量提取可复用的函数。
• 函数传参时，传递对象参数代替传递过长的参数列表。
• 分辨并合理的使用return，break， continue。
• 功能函数最好为纯函数，只要输入确定，保证输出唯一。

递归函数相关

• 如果使用递归函数，最好改写为 尾递归 。（只存在一个调用帧，防止发生“栈溢出”错误）

 

3. Vue相关

• data中的属性初始化时，不要所有都给默认值为空字符串或者null，区分字符串，数字，空对象，数组，布尔值再赋值。
• props中的属性声明最好写上接受类型。

 

目前想到的就这些了，后面如果碰到了其他情况再进行补充。