前言

随着前端团队人员的逐步扩大,需要有一份规范来约束代码的书写。
无论人数多少,代码都应该同出一门。
主要参考了 腾讯alloyteam团队,里面有许多认同点。在此基础上做了些许改进,为了更适合自己团队,那些已经达成共识的代码习惯。仅供参考。

命名规则

总原则:全部采用小写方式, 以中划线分隔。

项目名
例:my-project-name

目录名
有复数结构时,要采用复数命名法。
例:scriptsstylesimages

JS、CSS/SCSS/LESS、HTML文件名
例:ad-group.jsad-group.scssad-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


03-05 18:35