前端开发技术规范1.0

目的：提高可维护性，减少代码耦合性，提高整体开发效率与速度

 

1、目录结构整理

1.根据功能模块拆分多级文件夹

2.组件归属，非通用组件就近原则放置

 

2、现有层面代码优化

1.单页面行数限制不得超过300-500行

2.功能过于复杂页面拆分组件，通讯过于复杂时考虑使用全局状态管理VUEX

3.接口请求统一使用async function 方式进行

4.请求接口统一封装方便调用

5.postcss使用，将全局px转换成rem/vw

6.采用LESS/SASS语法编写样式

7.统一封装页面通用组件，对高频率使用方法进行统一封装

8.复杂逻辑区域填写注释，CSS样式也需要添加对应区域注释

9.善用filters和directive功能

10.对多余不使用的依赖进行删除

11.所有页面顶部添加注释，包括页面功能和简介

12.所有页面使用的静态图片全部进行压缩

13.较长页面列表中的图片采用懒加载机制进行处理

 

3、重构计划

1.全面执行上述规范

2.使用vue-cli3进行生成，减少不常用编译文件的产生

3.原项目与重构同时进行再低开发周期中进行重构项目

4.代码合并执行review制度，对不合格页面进行不予合并

5.加入eslint代码审查

5.合并主分支时，采用git cz对提交内容进行审批

6.使用ES6语法进行开发

7.所有命名规范统一

css:

    第一级风格：xxx_xxx

    第二/三级风格：_xxx_xxx

js：

    方法(驼峰命名)：aaaBbbbCcc

    const/let 全局变量：AAA

    const/let 局部变量：aaa

    const/let 临时变量：_aaa

 

4、VUE项目中可优化项

1.不是所有变量都需要绑定到data中，可使用全局对象控制

2.所有data中对象需要表写对象用处或值的含义

3.对生命周期有了解，每个生命周期对应不同功能

4.setTimeout/setInterval必须绑定于对象，并在页面销毁钩子中进行clear

 

5、其他

1.全部使VSCODE作为主开发工具

2.统一VSCODE组件

3.统一代码风格缩进