html 控件命名规则,前端工程代码规范（一）——命名规则与工程约定

前言

随着前端团队人员的逐步扩大，需要有一份规范来约束代码的书写。

无论人数多少，代码都应该同出一门。

主要参考了 腾讯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中对应的业务文件夹下)

目录索引