前端项目基本规范
本文最后更新于:2022年4月22日 上午
一些工作中的前端项目规范和代码风格
项目及框架使用规范
文件夹、文件名称统一小写、多个单词以连接符(-)连接;
JavaScript 变量名称采用小驼峰标识,常量全部使用大写字母,组件采用大驼峰;
CSS 采用 SASS (看团队规范);
React 组件默认使用
memo
包裹;组件内部引入其他组件或模块按以下顺序
- 内置组件/模块
- 第三方组件/模块
- 自定义组件/模块/方法等
- 样式文件
React Hooks 组件内部基本按照如下顺序编写代码:
- 组件内部 state 管理;
- redux 的 hooks 代码;
- 其他组件 hooks 代码;
- 其他逻辑代码;
- 返回 JSX 代码;
redux 代码规范如下:
- 每个模块有自己独立的 reducer,通过
combineReducer
进行合并; - 异步请求代码使用
redux-thunk
,并且写在actionCreators
中; - redux hooks 中使用
useSelector
写法,不再使用 connect;
- 每个模块有自己独立的 reducer,通过
网络请求采用 axios
- 对
axios
进行二次封装; - 所有的模块请求会放到一个请求文件中单独管理,组件需要用到时则导入
- 对
Vue 使用组件
- 使用组件名时统一使用大驼峰或者分隔符的写法(两者都可以,但需要统一)
编码规范
- 尾随逗号,尾随分号
- 文件末尾保留一行空行
- 统一使用单引号或者双引号
- 引入文件时,相对路径的引入需要放在绝对路径的引入下方
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议,转载请注明出处。