前端代码规范整理

1.JS 代码规范
项目中的规范：
（1）写完代码后记得右键格式化一遍代码，便于代码美观，层次分明
（2）变量采用驼峰命名法
（3）TS中使用正确的数据类型（*如果是对象就定义 interface）
（4）一个组件代码劲量不要超过400行代码，在JS代码中写上对应的注释
（5）去除没必要的代码，没用到的模块删除掉，不应注释在代码行中
（6）开发中写的console.log应该在调试完之后删除，便于团队合作中其他同事调试代码，debugger也必须要删除
（7）JS代码中结束统一使用 ; 号结束
（8）修改项目公共样式会对整体项目UI样式会有影响，公共样式应由专人负责。（设置代码的对应提交权限）
（9）针对某个模块开发的组件应存放到对应模块文件夹中，不要存放在组件根目录
（10）静态资源文件不应导入没用到的图片的资源，规范管理到指定文件夹中，区分不同模块的文件，且导入项目的图片需要确保图片清晰度，过大的图片资源应当存储在服务器中
（11）表单或者筛选的数据配置，抽离出到单独的config配置文件中，避免主业务代码过多，影响代码可读性
（12）将重复的JS代码抽离封装掉用
（13）请求接口地址相同，method不同的应使用同一个函数传入不同的method参数（添加对应接口的注释）
（14）三目表达式不应该嵌套，通常是单行表达式
（15）避免一个逻辑使用过多的if else
（16）单行注释使用 // 多行注释使用 /**…/

1.1 类型使用规范
（1）基础数据类型
String Number Boolean null undefined symbol
（2）引用数据类型
Object Array Function
在TS中定义好变量或者常量的类型
例如： const isHave: boolean = false Or const value: string | number = ‘’

2.2 引用规范
劲量使用ES6语法 let 和 const，不要使用var命名
对于不需要重新赋值的变量使用const命名

2.3 对象规范
（1）使用字面语法来创建对象 const item = {}
（2）使用属性值缩写
（3）在对象声明的时候将简写的属性进行分组
（4）只使用引号标注无效标识符的属性
（5）不能直接调用Object.prototype的方法
（6）使用对象拓展操作符，不要使用Object.assign浅拷贝一个对象，使用对象的rest
（7）操作符来获得一个具有某些属性的新对象
（8）访问属性时使用点符号 res.data
（9）使用变量访问属性时使用【】 res[data]
https://github.com/BingKui/javascript-zh#%E5%AF%B9%E8%B1%A1

2.4 数组规范
（1）使用字面语法创建数组const items = []
（2）使用push方式添加数组，不要使用 arr[0] = 1的方式
（3）使用数组展开方法…来拷贝数组，获得新数组
（4）将一个类数组对象转换成一个数组，使用展开方法…代替Array.from
（5）对迭代器的映射，使用Array.from替代展开方法…，因为它避免了创建中间数组
https://github.com/BingKui/javascript-zh#%E6%95%B0%E7%BB%84

2.5 解构规范
（1）例如平时接口返回的参数中，我们应该采用对象结构的方式 const { value } = res.data 去获取接口返回对象的属性值。避免使用 res.data.value 的方式
（2）还可以采用数组结构的方式

2.6 字符串规范
（1）使用单引号定义字符串
（2）字符串中要拼接参数使用ES6的模板字符串，不要采用 + 号方式拼接
（3）在angular中若html中需要字符串拼接参数，应写函数返回对应的模板字符串
（4）不要在转义字符串中使用不必要的字符

2.7 函数规范
（1）函数中需要带入参数，而参数可以为空时，设置默认值，而不是调用函数时传入. 例如：function test(name = ‘’){return name}
（2）带入参数时，需要把设置默认值的参数放在最后

2.Css 样式规范
（1）样式名称采用驼峰命名 （鉴于旧项目之前都采用-命名分割方式，所以旧项目命名方式不变，后续新项目采用驼峰命名）
（2）组件内修改其他组件样式，外部必须包一层自己组件的class,避免引起样式冲突污染问题（非必要情况下请不要强制更改其他组件样式）
（3）避免使用在html中直接使用style设置样式
（4）*伪类使用使用例如 &:hover 方式
（5）需要margin padding border color一些常用变量，后续添加公共常用样式，需要添加找相关人员进行添加使用，不要自行添加
（6）项目采用less,sass 避免写出css既视感
https://less.bootcss.com/#%E6%A6%82%E8%A7%88
（7）VScode下载 CSS插件右键格式化代码，使代码整洁缩进 （Beautify css/sass/scss/less）

3.文件命名规范
（1）xx-xx-xx的格式，进行文件以及文件夹命名（所有文件，包括图片资源文件）
（2）组件名称命名，app-xx-xx的格式进行命名
（3）命名单词应具有实际意义