框架选型
csr方案
框架
基于umi3（react+hooks+ts）搭建
文档：https://umijs.org/zh-CN
适用范围
react技术栈：pc(前后台)、m
ssr方案ykfe
框架
基于ykfe（react+midway+ts+hooks）搭建
文档：http://ykfe.surge.sh/
https://midwayjs.org/midway/v1/
适用范围
react技术栈：ssr
开发规范
命名规范（兼容eslint）
文件名
组件文件
大驼峰
hooks文件
小驼峰 以use开头 如：usePlace.ts
其他
英文小写
层级组合命名：用“-”隔开 如：order-center
变量
小驼峰
// 示例
let maxCount = 10;
常量
全部大写
组合命名：使用大写字母和下划线，下划线用
来分割单词
// 示例
const MAX = 5;
const MAX_COUNT = 10;
函数 & 方法
小驼峰（前缀应该为动词）
// 示例
function getList() {}
类 & 构造函数 & 组件
大驼峰
// 示例 -类 构造函数
class Persion {
constructor(name) {
...
}
}
let person = new Person('啦啦啦');
// 示例 -组件
const InStork: React.FC = function() {
...
}
export default InStork;
事件方法
事件处理应以handle开头,如handleBlur
css名
小驼峰代码规范 eslint
eslint：airbnb标准
参考文档：https://www.w3cschool.cn/rtuhtw/v7q3jozt.html图片运用规范
有透明要求的用png
没有透明要求的用jpg 比如背景图
图片品质不模糊即可
图片大小：pc端800k内 m端200K内
上传图片要压缩上传
ps：静态资源有条件尽量都放cdnts的一些使用规范
所有用到jsx语法的文件都需要以tsx后缀命名
使用组件声明时的Component<P,S>泛型参数声明，来代替PropTypes！
全局变量或者自定义的window对象属性，统一在项目根下的global.d.ts中进行声明定义
对于项目中常用到的接口数据对象，在types/目录下定义好其结构化类型声明
日期使用规范
服务端存的统一是时间戳
前端对接接口统一用时间戳
展示时间不用转换时区（会自动展示当前计算机的时区时间）
const timeStamp = 后端返回的时间戳； // 获取后端时间戳
// 前端展示
const timeDate = formatDate(orderCreateDate,'M dd, yyyy hh:mm:ss') // formatDate是自定义工具函数 后续会统一到工具库、前期有需要到可以找jobs项目或者我
或者用moment--推荐用法
const timeDate = moment(Number(date)).format('YYYY-MM-DD hh:mm:ss')
// 日期控件
拿到日期转为时间戳传给后端即可
前端展示时间格式--针对对外客户的项目
日期时间格式统一：
月+日：July 15th
月+日+年：July 15, 2020
月+日+年+星期：July 12, 2020 Thursday
月+日+年+时分秒：July 15, 2020 22:15:13
组件规范
对接规范
后端服务接口篇
对接口的要求一个页面第一次加载的api请求尽量减少数量、能合并则合并（对于m端这种复杂度不高的页面做到一个页面一个获取接口、web也不应该超过3个）
入参只传id或修改的内容（不是非前端必传的，全不传；）
出参只返回前端需要的数据字段，不要冗余；
接口只增不改、但不允许增的接口只有改的部分（增的接口是可以替代原来的接口业务的）
复杂业务计算逻辑等、后端能实现的以后端优先，前端尽量避免复杂业务逻辑的处理
对接口文档的要求文档要输出明确（接口用途、不同环境host地址、入参、出参）
参数要详细到具体字段且有说明
接口及文档更新要同步、前端以文档为主
网友评论