前端开发规范

169 阅读2分钟

最近项目差不多完成,在反复的修改中,发现很多常识性的操作还没有形成规范,趁着刻意学习的博客时间,顺便整理一下后台项目CRM规范

  • 页码:定义一个全局变量存储每页显示条数
  • 编号/代码:控制只能用字母或者数字
  • 全局样式控制:全局定义一个样式文件,存储公共样式


前端JS代码规范

  • 命名
    • 文件夹命名:文件夹、文件的命名与命名空间应能代表代码功能,可读性强,如:hub
    • 函数和变量命名:
      • 具有意义的驼峰命名,如:hubList
      • 变量函数名禁止使用关键字和保留字,禁止重新定义(重名),或者定义了未使用
      • 常量:大写字母,如:HUBLIST
  • 编码
    • 采用统一的缩进方式排版代码:缩进为两个空格,句末又没分号等
  • 注释
    • 单行注释,多行注释
    • JS代码注释掉console.log 和 debugger 再提交
    • 重要的函数或者类都要添加头部描述
  • 字符串拼接
    • 应使用数组保存字符串片段,使用时调用join方法,避免使用+或+=的方式拼接较长的字符串(每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能)
  • ES6的使用
    • 变量声明:let 不存在变量提升问题,不能重复声明
    • 常量声明:Const 原理是内存地址不可变
    • 箭头函数
      • this指向定义者,内部无arguments对象,不能new(因为箭头函数的this就是指向定义本身),函数里面不要有太多的return
      • 函数的形参不超过7个,超过使用数组,调用时实参和形参对应
      • 不能有重复的返回
      • 在循环内部声明函数慎用,因为是循环执行完成函数调用才会执行
      • return 后面不要写代码,并且不封装成  if...then...else
    • 导入和导出:使用import和export,只能位于代码顶部和顶部,如果代码中部需要按需导入文件使用require
    • 解决地狱回调问题:promise
  • if 的使用
    • 能用三目运算符就用,减少if 的嵌套
    • 减少多余的条件判断
    • if ... else if ...else  多个条件时以else结尾,为了符合防御性编程规则
    • NAN 不应该用于比较, 应该是判断是否是数字
    • switch...case 使用在至少三个判断值,case不可省,每次case必须用break跳出
  • for...of:遍历数组和字符串
  • for...in: 遍历对象