前端代码规范（个人约束）

基于 B站的学习视频：前端必备-阿里大厂前端开发规范！
整理的个人前端规则

Html、Css、等文件类

一、命名规范

（一）项目命名

• 全部采用小写的方式
• 以 _ (下划线) 的方式分割单词

（二）目录名称

• 全部采用小写的方式
• 以 _ (下划线) 的方式分割单词
• 复数时，要采用复数结构

（三）JS、CSS、SCSS、HTML、PNG等文件命名

• 全部采用小写的方式
• 以 _ (下划线) 的方式分割单词

（四）命名规则

• 禁止使用 中文和中文拼音
• 禁止使用 中文拼音首字母
• 正确使用 英文拼写和语法
• 一些特殊的词语可以采用国际通用的名称

如：河南 = henan / 人民币 = rmb

二、HTML规范（Vue Template通用）

（一）缩进

• 一个 Tab 使用两个空格
• 嵌套的节点 应该使用缩进

（二）分块注释

在每一个块级元素，列表元素 和 表格元素中，加上一个 或 一对HTML注释，注释格式

<!-- 英文 中文 -->
<!-- 英文 中文 start -->
<!-- 英文 中文 end -->

如：

<!-- header 头部 -->
<header>
  <div>头部</div>
</header>
<!-- or -->
<!-- header 头部 start -->
<header>
  <div>头部</div>
</header>
<!-- header 头部 end -->

（三）语义化标签

HTML5 有很多语义化标签，优先使用这些语义化标签，避免每一个页面都是 div 或者 p

（四）引号

**使用双引号 "" **而不是单引号 ''

三、Css规范

（一）命名

• 类名 采用小写的方式，以 _ (下划线) 的方式分割单词

.test_image { ... }

• id 使用 驼峰式命名

#test { .... }

• scss中的变量、函数、混合、placeholder采用驼峰命名
• class 的命名不要使用 标签名

（二）选择器

尽量使用直接子选择器，否则，有时会造成性能损耗
不推荐：

.content .title { ... }

推荐：

.content > .title { ... }

（三）尽量使用所需的属性

不推荐：

border-style: solid;
border-width: 1px;
border-color: red;

推荐：

border: 1px solid red;

（四）每个选择器及属性独占一行

不推荐：

img {
  width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}

推荐：

img {
  width: 100%;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}

（五）省略 0 后面的单位

width: 0;
border-width: 0;

（六）避免使用 ID 选择器及 全局标签污染全局样式

能不用 id选择器 就不要 使用id选择器，避免不是禁止

四、Less、Sass 规范

（一）避免嵌套等级过多

将嵌套深度限制在 3 级

Javascript

一、命名

• 采用小写驼峰命名 lowerCameCase，代码命名均不能以下划线开头，也不能以下划线或美元符号结尾
• 方法名、参数名、成员变量、局部变量统一采用驼峰命名风格
• 方法名 必须是 动词 或者 动词+名词 形式
• 增删查改，统一使用如下 5 个单词

add  /  update  /  delete  /  get  /  detail

附：函数常用方法的动词：

get    获取    /   set     设置
add    增加    /   remove  删除
create 创建    /   destory 移除
start  启动    /   stop    停止
open   打开    /   close   关闭
read   读取    /   write   写入
load   载入    /   save    保存
begin  开始    /   end     结束
backup 备份    /   restore 恢复
import 导入    /   export  导出
split  分割    /   merge   合并
inject 注入    /   extract 提取

• 常量全部大写，单词之间用下划线隔开，力求语义表达完整清楚，不要嫌名字长

二、代码格式

• 使用两个空格进行缩进

三、字符串

• 统一使用单引号’'，不使用双引号""，这对创建HTML字符串非常有好处

let str = 'foo';
let testDiv = '<div id="test"></div>'

四、优先使用ES6、ES7、ES8的语法

• 简化程序，使代码更加灵活和可复用

如：箭头函数、await/async、解构、let、for…of 等

五、括号

• 下列关键词必须有大括号（即使代码只有一行）:if / else / for / while / try / catch / finally / with

六、undefined判断

永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串 'undefined' 对变量进行判断

不推荐：

if (typeof person === 'undefined') { ... }

推荐：

if (person === undefined) { ... }

七、条件判断和循环最多三层

条件判断能使用 三目运算符 和 逻辑运算符的，就不要使用条件判断。

如果超过三层的 ，抽成函数，并写清楚注释

八、慎用 console.log

对 console.log 会有性能问题，生产环境下请清除 console.log

Vue

一、组件规范

（一）组件名为多个单词

组件名应该始终是多个单词的，且命名规范为 KebabCase格式

这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

正例：

export default {
	name: 'TodoItem',
    ...
}

反例：

export default {
  name: 'Todo',
  // ...
}

Vue.component('todo', {
  // ...
})

（二）组件名称为 pascal_case 格式

正例：

my_component.vue

反例：

myComponent.vue

（三）和父组件紧密契合的子组件以父组件名为前缀名

正例：

todo_list_item.vue
todo_list_button.vue

反例：

todoItem.vue

（四）Props定义应该尽量详细

（五）为组件样式设置作用域

写CSS样式时，加上 作用域 scope

（六）如果特性元素过多，应主动换行

如：

<MyConponent foo="a" bar="b"
             baz="z" />

二、模板中使用简单的表达式

组件模板中应该只包含简单的表达式，如果有复杂的表达式，应该使用计算属性或方法

<!-- 在模板中 -->
{{ normalizedFullName }}

// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

三、标签顺序保持一致

<template>...</template>
<script> ... </script>
<style> ... </style>

四、script标签内部解构顺序

components --> props --> data --> computed --> watch --> filter --> 钩子函数 --> methods