前言
随着前端团队人员的逐步扩大,需要有一份规范来约束代码的书写。
无论人数多少,代码都应该同出一门。
主要参考了 腾讯alloyteam团队,里面有许多认同点。在此基础上做了些许改进,为了更适合自己团队,那些已经达成共识的代码习惯。仅供参考。
命名规则
总原则:全部采用小写方式, 以中划线分隔。
项目名
例:my-project-name
目录名
有复数结构时,要采用复数命名法。
例:scripts,styles,images
JS、CSS/SCSS/LESS、HTML文件名
例:ad-group.js,ad-group.scss,ad-group.html
工程约定
一个工程内只有一个UI控件
以vue为例,确定使用element-ui之后,不可再引入其他ui控件。
工程中,src的目录结构
assets、components、pages/views、store、service、utils、styles、libs、static
代码的行数与列数限制
为了提升阅读体验,一个文件的行数不超过300,一行代码的列数不超过120
建议开启编辑器的自动换行功能
router的定义,要对应pages中的目录结构
例:如router为/advertise/group/list,则pages中的目录应为advertise->group->list
组件的传值
保持单一数据流,公用组件需有一个index文件进行统一注册
css的预编译器
采用less或者sass,非两者混用
变量申明
尽可能少用var,习惯使用let和const
不要使用eval
出于安全性考虑
一个工程内,所有文件名小写,以‘-’的形式联结
例:components/ad-group.vue、services/create-ad-service.js
import的变量名,首字母大写,并采用驼峰形式
例:
import AdGroup from @/components/ad-group.vue;
import CreateAdService from @/services/create-ad-service;
src下直属components文件夹中的组件约定
1、该组件在不同的2个页面中被引用
2、该组件中没有接口调用(若有接口调用,则表示与业务强关联,应放到views中对应的业务文件夹下)
目录索引
前端工程代码规范(二)——HTML
前端工程代码规范(三)——CSS, SCSS
前端工程代码规范(四)——JS