前端规范

每个项目中需包含editorconfig和eslint，具体以这两个文件配置为准，参考下实际代码开发中比较好的规范标准。

一、通用规范

• TAB键统一为两个空格，整齐紧凑
• CSS样式属性或者JavaScript代码后加“;”，方便断句
• 文件内容统一编码为UTF-8
• 换行符统一为lf，除了IDE设置，还需设置git里的转换
• 做好兼容IE10+/firefox，
• 做自适应方案flex(栅格)+viewport+media query

二、目录规范

• 层次，建议扁平化，最多不要超过三层
• 分类，建议按模块分
• 模块，每个模块基本文件一致，模块入口文件默认为index.(相关后缀名)

三、命名规范

• 做到最简化，但能一眼看出意思
• 变量一般为名词，同模块不同功能可写成“模块名+功能”，类聚便于排序查找
• 方法、函数一般为动词（开头）
• 多单词驼峰，简写词大写
• 常量名：大写加下划线，如CONNECT_CLOSE
• 类名：开头大写
• 私有变量：开头下划线

四、JSON规范

• 属性名双引号""
• 花括号中最后一个属性后不需要逗号

五、HTML规范

• 开头第一行HTML5文档标准
• IE采用最新模式配置
• 360等双核默认选用急速模式
• 自适应通用配置 不需rem配合
• 非特殊情况下CSS样式文件外链至HEAD之间，JavaScript文件在body底部引用
• 所有标签闭合
• 属性值双引号""
• 保持结构整合，避免无谓的增加层次嵌套

六、CSS规范

• 根据新建样式的适用范围分为三级：全站级、产品级、页面级
• 尽量通过叠层和继承重用已有样式
• 不要轻易改动全站级CSS。改动后，要经过全面测试
• 使用选择器时，命名比较短的词汇或缩写不建议直接定义，重名率高
• 可用上级节点进行限定，命名空间的概念，保证只对该模块有作用
• 尽量不要在标签上直接写样式
• 尽量不要写!important
• 避免写表达式expression
• 使用CSS扩展语言，如Sass

七、JavaScript规范

• “()”前后需要加空格
• “=”前后需要加空格
• “,”“:”后面需要加空格
• for-in循环体中必须用hasOwnProperty方法检查成员是否为自身成员，避免来自原型链上的污染
• 长语句断行
• 注重HTML分离，减小reflow
• 空行分隔逻辑独立块
• 多用why型的注释
• 需改进或未完成代码用TODO标记
• 使用Eslint中Airbnb标准
• 减少代码重复率和复杂度

八、图片规范

• 大图需要优化，保持大小不超过一两百K
• 图标用字体代替
• 极小图可用base64
• 可使用第三方图片服务，显示可控
• 图片加载考虑懒加载
• 图片显示建议采用相框居中

九、接口规范

• 统一接收、返回格式，现流行JSON，contentType最好为application/json而不是表单形式提交（表单传的值都是字符串，且不能嵌套），有图片用multipart/form-data
• 统一返回固定参数，成功/失败格式
• 统一分页参数
• 统一金额单位
• 统一时间日期格式
• 统一返回关联数据格式，2one需要一个显示名称，2many需要数组对象
• 实现CORS跨域
• 在线接口文档维护，利于管理及mock，如YAPI

十、组件设计规范

参考antd的精髓，https://ant.design/docs/spec/introduce-cn