记录前端常用代码规范

代码规范的目的是为了编写出高质量的代码、让团队人员每天都是愉悦的，大家在一起每天都是快乐的 ![](，一下就来列举一些常用的代码规范条约，在后面的开发中大家也可以一同来完善我们的代码规范条例；让我们的代码规范文档更加的完善。

1）、命名规范：

（1）项目命名规范：

项目命名规范为使用全小写，中间使用 ‘-’ 中划线连接的方式；

（2）项目目录名称规范：

项目目录名称使用全小写，中间使用 ‘-’ 中划线接的方式；特殊备注：vue components组件目录下，目录使用大驼峰命名规则，征询vue组件命名规范。

（3）JS、CSS、SCSS、HTML、图片文件命名规范：

全部使用小写，使用 ‘-’ 中划线接的方式；

（4）文件命名严谨性：

命名过程中不能使用中文，中文拼音与英文拼接，中文与英文拼接，这样容易望闻不生意。即使使用拼音也要避免，减少出现；避免使用不规范的缩写来命名，这样会使阅读者难以看懂，望文不生义。时间久了可能自己都无法看懂。

2）、HTML规范：

（1）：缩进

html元素缩进，采用一个tab符，两个空格键；这样可以让代码层次清晰。

（2）：注释

重要组件元素需要添加html注释，如：table表格，frome表单，等html元素添加注释，后期能够更好的修改；

（3）：语义化标签：

在html5 中添加了很多语义化的标签：如

等语义化标签；避免整个页面 div 标签到底；

（4）：元素属性值使用“ ”：

元素属性值使用“ ” 双引号。在vue组件中由于肯属性值会出现字符拼接，模板语法等，在给元素声明属性是规范使用" " 双引号。

3）、css规范：

（1）：命名规范：

ID名称使用驼峰命名规范；

class名称使用全小写，下划线分割的方式；

scss 中的变量、函数、混合、placeholder 采用大驼峰命名发；

说明：ID、class，尽量使用可以反应其元素目的及用途的名称；

（2）：选择器：

css 选择器中尽量避免出现html 标签名；从表现、结构、行为、分离的原则来看，css 中出现html标签名会污染页面标签样式。也会出现一些潜在的问题。

子选择器：在写链式选择器的时候，建议直接使用子选择器，不要使用迭代选择器，这样能够减少性能消耗。

（3）：属性缩写：

尽量使用属性缩写；如：margin：0，0，10px，20px；不建议使用margin-bottom：10px； margin-left：20px；

（4）：其他规范：

每个选择器及属性独立一行书写；

避免使用ID，标签选择器；会出现污染页面样式；

省略0 后面的单位；

4）、Javascript 规范：

（1）命名规范：

1、采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束

2、方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式

3、其中 method 方法命名必须是动词或者动词+名词形式

特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）

add / update / delete / detail / get 附：函数方法常用的动词: get 获取/set 设置, add 增加/remove 删除, create 创建/destory 销毁, start 启动/stop 停止, open 打开/close 关闭, read 读取/write 写入, load 载入/save 保存, begin 开始/end 结束, backup 备份/restore 恢复, import 导入/export 导出, split 分割/merge 合并, inject 注入/extract 提取, attach 附着/detach 脱离, bind 绑定/separate 分离, view 查看/browse 浏览, edit 编辑/modify 修改, select 选取/mark 标记, copy 复制/paste 粘贴, undo 撤销/redo 重做, insert 插入/delete 移除, add 加入/append 添加, clean 清理/clear 清除, index 索引/sort 排序, find 查找/search 搜索, increase 增加/decrease 减少, play 播放/pause 暂停, launch 启动/run 运行, compile 编译/execute 执行, debug 调试/trace 跟踪, observe 观察/listen 监听, build 构建/publish 发布, input 输入/output 输出, encode 编码/decode 解码, encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩, pack 打包/unpack 解包, parse 解析/emit 生成, connect 连接/disconnect 断开, send 发送/receive 接收, download 下载/upload 上传, refresh 刷新/synchronize 同步, update 更新/revert 复原, lock 锁定/unlock 解锁, check out 签出/check in 签入, submit 提交/commit 交付, push 推/pull 拉, expand 展开/collapse 折叠, enter 进入/exit 退出, abort 放弃/quit 离开, obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集

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

正例： MAXSTOCKCOUNT

反例：MAX_COUNT

（2）：代码格式：

1、使用两个缩进，可以设置编辑器的缩进方式；

2、不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性，

3、方法，变量，class 等添加代码说明

4、字符串，统一使用单引号，不适应双引号；

（3）：对象声明：

1、使用字面值创建对象

正例： let user = {};

反例： let user = new Object();

2、使用字面量来代替对象构造器

（4）：使用es6 +:

在代码编写过程中必须优先使用es6 的新语法糖、函数；简化代码，同时提高代码复用性。

（5）： js其它规范：

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

条件判断和循环最多三层，条件判断使用三目运算符解决，就不要使用条件判断，但是不能使用太长的三目运算符，如果超出三层，抽离出来写成函数，并且写清注释。

this 的转换命名：对上下文的this 的转义，只能使用self 来命名。

慎用 console.log，会造成性能问题，

5）、vue项目代码规范：

vue项目规范与vue 官方代码规范为准：（https://v3.cn.vuejs.org/api/sfc-spec.html）

请仔仔细细阅读 Vue 官方规范，切记，此为第一步

（1）、组件规范：

1、组件名为多个单词；

2、组件文件名以大驼峰命名规则： PascalCase 格式

3、基础组件文件名为 Base 开头，使用完整单词而不是缩写

4、和父组件紧密耦合的子组件应该以父组件名作为前缀命名

5、在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。

6、Prop 定义应该尽量详细

必须使用 camelCase 驼峰命名

必须指定类型

必须加上注释，表明其含义

必须加上 required 或者 default，两者二选其一

如果有业务需要，必须加上 validator 验证

7、为组件样式设置作用域

8、如果特性元素较多，应该主动换行

（2）、模板中使用简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式

（3）、指令都使用缩写形式

指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)

（4）、标签顺序保持一致

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

（5）、必须为 v-for 设置键值 key

v-for 必须设置键值key ，有利优化页面dom数渲染性能；

（6）、v-show 与 v-if 选择

如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。

（7）、Vue Router 规范

1、使用路由懒加载（延迟加载）机制

2、router 中的命名规范

3、router 中的 path 命名规范

4、页面跳转数据传递使用路由参数

6）、vue项目目录规范：

7）、其他规范

（1）删除无用代码

因使用了 git/svn 等代码版本工具，对于无用代码必须及时删除

（2）尽量不要手动操作dom

因使用 vue 框架，所以在项目开发中尽量使用 vue 的数据驱动更新 DOM，尽量（不到万不得已）不要手动操作 DOM，包括：增删改 dom 元素、以及更改样式、添加事件等。