前端规范
2019-03-28 本文已影响0人
爱死寂寞零
每个项目中需包含editorconfig和eslint，具体以这两个文件配置为准，参考下实际代码开发中比较好的规范标准。
一、通用规范
- TAB键统一为两个空格，整齐紧凑
- CSS样式属性或者JavaScript代码后加“;”，方便断句
- 文件内容统一编码为UTF-8
- 换行符统一为lf，除了IDE设置，还需设置git里的转换
- 做好兼容IE10+/firefox，
- 做自适应方案flex(栅格)+viewport+media query
二、目录规范
- 层次，建议扁平化，最多不要超过三层
- 分类，建议按模块分
- 模块，每个模块基本文件一致，模块入口文件默认为index.(相关后缀名)
三、命名规范
- 做到最简化，但能一眼看出意思
- 变量一般为名词，同模块不同功能可写成“模块名+功能”，类聚便于排序查找
- 方法、函数一般为动词（开头）
- 多单词驼峰，简写词大写
- 常量名：大写加下划线，如CONNECT_CLOSE
- 类名：开头大写
- 私有变量：开头下划线
四、JSON规范
- 属性名双引号""
- 花括号中最后一个属性后不需要逗号
五、HTML规范
- 开头第一行HTML5文档标准 <!doctype html>
- IE采用最新模式配置 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- 360等双核默认选用急速模式 <meta name="renderer" content="webkit">
- 自适应通用配置 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> 不需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
