个人整理前端代码规范

前端代码开发规范

规范目的

• 为提高团队协作效率
• 便于后来人员添加功能及前后期维护优化
• 输出高质量的代码

命名规范

1. 组件命名规范

• 组件文件名应该始终以单词大写开头，组件名也是以单词大写开头，当多个单词拼写成的组件时，单词开头大写，采用驼峰式命名规则。
• 一般是多个单词全拼，减少简写的情况，这样增加可读性。
• 组件应该都放到components文件夹下，单个页面独立一个文件夹，用来放相对应的vue文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。
• 文件夹名称应统一格式，小写开头，统一以page结尾，比如:homePage，listPage这样子的命名。公用组件应该统一放到public文件下
  

2. 公共的组件命名规范

• 当项目中需要自定义比较多的基础组件的时候，建议以一个统一的单词Mark开头，或者放到Mark文件夹统一管理，这样做的目的是为了方便查找。例如:
  

3. 注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每为组件中每一个方法编写方法说明

• 单行注释

// 定义牛牛
const markName = “勇敢牛牛”;
1
2

• 多行注释

  /**开始 
  @描述
  **/结束
  1
  2
  3

  • 例如：
    

4. method 方法命名命名规范

// 驼峰式命名，统一使用动名词形式
例如：AddList、RemoveList、tarkHomePage

// 获取数据，尽量使用易读的单词get开头
例如：getListData、getVideosData

// 经常会用到的还有 add/remove ; get/set ; open/close等 
1
2
3
4
5
6
7

5. 组件结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 组件的样式规范

  • 单个组件样式建议直接写到组件下style标签下，可添加scoped 属性，防止样式全局污染，写样式的时候尽量少写元素选择器，为了提高代码查找速度，可以用类选择器。
  • 如果组件涉及样式较多，要在style标签中引入外链样式表，以保持代码的整洁易读性
    

• 特性的元素规范

  • 多个特性的元素应该分多行撰写，每个特性一行，增强更易读
    

• 元素特性的顺序
  原生属性放前面，指令放后面。如下：

  • class
  • id,ref
  • name
  • data-*
  • src, for, type, href,value,max-length,max,min,pattern
  • title, alt，placeholder
  • aria-*, role
  • required,readonly,disabled
  • is
  • v-for
  • key
  • v-if
  • v-else-if
  • v-else
  • v-show
  • v-cloak
  • v-pre
  • v-once
  • v-model
  • v-bind,:
  • v-on,@
  • v-html
  • v-text

6. 指令规范

• 指令有缩写一律采用缩写形式

:class=“{‘active’：true}”
@click=“getListData”

• v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

    

      {{ todo.text }}
    

1
2
3
4
5

• 避免 v-if 和 v-for 同时用在一个元素上（性能问题）解决方案如下：

• 将数据替换为一个计算属性，让其返回过滤后的列表

    

      {{ user.name }}
    
  
 
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 将 v-if 移动至容器元素上 (比如 ul, ol)

    

      {{ user.name }}
    

1
2
3
4
5

7.CSS规范

• 通用规范

1. 统一使用"-"连字符
2. 如果 CSS 可以做到，就不要使用 JS
3. 在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。
4. 元素选择器应该避免在 scoped 中出现,在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
5. 在非必要情况下，样式文件一率需要外部引入，尽量避免在vue页面中直接书写css样式。
6. 定义的class类名尽量不要冲突，尽可能的保证class类名的唯一性。

• 声明应该按照下表的顺序 从左到右 从上到下

  显示属性	自身属性	文本属性和其他修饰
  display	width	font
  visibility	height	text-align
  position	margin	text-decoration
  float	padding	vertical-align
  clear	border	white-space
  list-style	overflow	color
  top	min-width	content
  	background	other text

• 结构属性：

1. display
2. position,left,top,right
3. overflow,float
4. margin,padding

• 表现属性

1. background,border etc
2. font,text

.exemple {
  display: inline-block;
  position: absolute;
  left: calc(50% - 10px);
  top: 20vh;
  overflow: hidden;
  margin: 1rem;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #eee;
  font-family: 'Arial', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

功能性样式表：方便引用，可加入简写样式表

皮肤（.s-）

状态（.z-）

8. 其他规范

1. 建议避免使用 this.$parent，容易混淆
2. 除了三目运算，if,else 等禁止简写
3. 如果方法中一个变量值对应超过三个判断，可以用switch替代if elseif else
4. vue 打包去除打印日志
5. 在遍历对象之前先进行判断，判断对象是否为空，然后再去遍历该对象，可以用try catch编写程序
6. 调试信息 console.log() debugger 使用完及时删除