# 前端开发规范
#### 原则
- 坚持遵循代码规范;
- 写代码前先看看周围同事的代码，然后决定代码风格;
- 代码规范的意义在于提供一个参照物，不会让阅读你代码的人觉得很痛苦;
- **制定符合公司的开发规范是很简单的，重要的是我们能够认识到规范的重要性，并坚持规范的开发习惯。**
#### 目的
- 养成良好的编程习惯；
- 写出清楚、易懂、易维护的程序代码；
- 提高协同、开发效率；
- 减少编码过程中不必要的错误；
- 降低企业成本。
## HTML
**正确闭合：** 尽可能使用正确的 `HTML` 闭合元素。
```html
<article>This is only a test.</article>
```
**语义化：** 根据使用场景选择正确的 `HTML` 元素。
```html
<!-- 场景是需要跳转，不推荐使用<div>代替 -->
<a href="recommendations/">跳转</a>
```
**小写：** 推荐使用小写字母，小写风格看起来更加清爽，容易识别和编写。
```html
<img src="google.png" />
color: #e5e5e5;
```
**双引号：** 属性的赋值应使用 `""` 确保统一的风格。
```html
<input data-state="title" type="text" />
```
**缩进：** 一次缩进 `2` 个空格，不要使用 tab 或者混合 tab 和空格的缩进。
```html
<ul>
<li>Fantastic</li>
</ul>
.example {
color: blue;
}
```
**多媒体元素：** 图片、视频、canvas、动画等元素，应定义其 `alt` 属性，提供其他可访问的内容。
```html
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
```
**代码注释：** 采用类似标签闭合的写法，与 `HTML` 统一格式；注释文案两头空格，与CSS注释统一格式。
- 开始注释：（注释两头空格）。
- 结束注释：（注释前加 `/` 符号，类似标签的闭合）。
- 允许只有开始注释
```html
<body>
<!-- 侧栏内容区 -->
<div class="m_side">
<!-- 热门标签 -->
<div class="sideblk">
<div class="m_hd3"><h3 class="tit">热门标签</h3> </div>
...
</div>
</div>
</div>
<!-- /侧栏内容区 -->
</body>
```
**合理的结构布局**
- 按照从上至下、从左到右的视觉顺序书写HTML结构;
- 用 `<div>` 代替 `<table>` 布局，但表现具有明显表格形式的数据，首选 `<table>` ;
- 提倡并列结构布局，减少嵌套结构布局；
- 提倡简洁的嵌套，减少额外的冗余嵌套。
## CSS
**语义化命名：** 应该根据 `他们是什么` 来为元素命名，而不应该根据 `他们的外观如何` 来命名。
```css
.primary {}
.login {}
```
**分隔符：** 提倡使用 `_` 分隔符作为统一的命名规范。
```css
#video_id {}
.ads_sample {}
```
**CSS书写顺序**
```css
1. 位置属性 (position, top, right, z-index, display, float...)
2. 大小 (width, height, padding, margin...)
3. 文字系列 (font, line-height, letter-spacing, color- text-align...)
4. 背景 (background, border...)
5. 其他 (animation, transition...)
.heavy{
position: absolute;
top: 0;
left: 10px;
width: 100px;
color: #008000;
background: url(../img/logo.pg) no-repeat left center;
}
```
**简短：** `id` 和 `class` 应该尽量简短，同时要容易理解。
```css
#nav {}
.author {}
```
**缩进：** 为了反映层级关系和提高可读性，块级内容都应缩进 `2` 个空格位置。
```css
@media screen {
html {
background: #fff;
color: #444;
}
}
```
**选择器规则分隔：** 每个选择器规则之间都用空行隔开。
```css
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
```
**选择器分隔：** 每个选择器都另起一行。
```
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
```
**选择器结尾：** 在选择器和 `{}` 之间用空格隔开。
```css
#video {
margin-top: 1em;
}
```
**css属性结尾：** 属性名和值之间都应有一个空格。
```css
h3 {
font-weight: bold;
}
```
**css属性赋值结尾：** 每行属性之间都应以 `;` 结尾。
```css
.test {
display: block;
height: 100px;
}
```
**规则注释：** 注释把 CSS 分成各个部分。
```css
// Header
#adw_header {}
// Footer
#adw_footer {}
// Gallery
.adw_gallery {}
```
**选择器：** 除非需要，否则不要在 `id` 或 `class` 前加元素名。
```css
// 不推荐
ul#example {}
div.error {}
```
**避免使用标签名：** 在使用子选择器的时候，应尽量选择定义新的`class`来做选择器，除非确定子元素是最后一层。
```css
<!--不推荐写法-->
.warp span{
font-size: 14px;
}
```
**属性简写：** 尽量使用 CSS 中可以简写的属性 (如 `font、background、padding、margin、animation`等)，可以提高编码效率及代码可读性。
```css
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
```
**命名空间：** 给最外层的父容器设置选择器防止命名冲突，同时提高代码可维护性。
```css
.adw_container {}
#note_container {}
```
**嵌套：** 选择器的嵌套层级应不大于 `3` 级
```css
// 不推荐
.main {
.content {
.mark_content {
.mark_txt {
...
}
}
}
}
```
**CSS 引号：** 属性选择器和属性值用 `''` ，URI 的值不加引号。
```css
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
```
**CSS 颜色：** 颜色色值尽量使用简写小写形式，不建议使用命名色值。
```css
.a-body {
color: #fff;
}
```
**>、+、~选择器：** 的两边各保留一个空格。
```css
label + input {
margin-left: 5px;
}
```
**伪类：** 伪类使用 `:` 标识。
```css
a:hover {}
- active
- focus
- hover
- link
- visited
- lang
- not(n)
- first-chlid
- last-child
- only-child
- nth-child(n)
- nth-last-child(n)
- empty
- checked
- enabled
- disabled
- target
- @page:first
- @page:left
- @page:right
```
**伪元素：** 伪元素使用 `::` 标识。
```css
div::after {}
- first-letter
- first-line
- before
- after
- placeholder
- selection
```
**0：** 长度为 `0` 时须省略单位，数值不足 `1` 的应省略 `.` 前的数字。
```
.a-body {
padding: 0 5px;
opacity: .3;
}
```
## Javascript
**文件命名：** 对于项目中出现的 `.js` `.vue`等文件的命名。
- `.md`：前缀全部大写
- `.vue`：大驼峰式命名法（除 `index.vue` ）
- `.js`：小驼峰式命名法
- `.其他`：小驼峰式命名法
```javascript
README.md
Home.vue
index.vue
date.js
package.json
.env.development
```
**变量命名：** 小驼峰式命名法，前缀应当是 `名词` ，尽量在变量名字中体现所属类型（数字、字符串）。
```javascript
// 推荐
const maxCount = 10;
const tableTitle = 'LoginTable';
```
**常量命名：** 名称 `全部大写` ，使用字母和下划线来组合命名，下划线用以分割单词
```javascript
const MAX_COUNT = 10;
const URL = 'http://www.xxx.com';
```
**函数：** 小驼峰式命名法，前缀应当是 `动词`。
```javascript
// 是否可阅读
function canRead() {
return true;
}
```
**构造函数：** 大驼峰式命名法，`首字母` 大写。
```javascript
function Student(name) {
this.name = name;
}
let st = new Student('tom');
```
**类**
- 类的声明：大驼峰式命名法，`首字母` 大写。
- 公有属性和方法：参考变量命名和函数的命名。
- 私有属性和方法：添加前缀 `_`，后面参考变量命名和函数的命名。
```javascript
class Student {
constructor (name) {
this.name = name
this._times = 1
this._nation = 'china'
}
getTimes () {
return this._times
}
_getNation () {
return this._nation
}
}
let st = new Student('tom')
```
**空格：** 添加 `空格` 有利于提高代码的可读性。
- 花括号前添加一个 `空格`
- 在控制语句的小括号前添加一个 `空格`
- 在多个参数之间添加一个 `空格`
- 在属性赋值 `=` 前后添加一个 `空格`
- 字面量赋值 `：` 后面添加一个 `空格`
- 在运算符 `+ - * / %` 等前后添加一个 `空格`
- 在导入信息 `{ }` 里左右各添加一个 `空格`
- 注释 `*` 后添加一个 `空格·，`TODO` 前后添加 `空格`
```javascript
function Person(name, arg2, arg3) {
this.name = name
}
class Person {
}
if (true) {}
let user = {
name: 'zhangsan',
age: '18'
}
const number = x + y
import { name } from '/user'
```
**空行：** 添加 `空行` 有利于程序块的划分。
- 在新语句前和块末后插入 `空行`
- 不同功能属性之间插入 `空行`
- 注释之前插入 `空行`
```
function setName() {
}
let age = 12
let userName = '张三'
const maxTimes = 5
// 获取姓名
function getName() {
}
```
**换行：** 对象与数组过多情况下，酌情使用换行。
```
let items = [
{
name: '路由',
title: '跳转'
},
{
name: '路由',
title: '跳转'
}
]
let userInfo = {
name: '张三',
age: '18',
gender: '男'
}
```
**单行注释：** 以 `//` 双斜杠开始，`//` 与注释文字之间保留一个空格。
```javascript
// 调用了一个函数
setTitle()
```
**多行注释：** 注释行数 `>2` 行时开启，以 `/*` 开头，以 `*/` 结尾，其他行以 `*` 开始，并且与注释文字保留一个空格。
```javascript
/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
setTitle()
```
**功能注释：** 功能未实现或有待完善的功能，需添加 `TODO` 注释标记，后面加上 `描述`。
```javascript
// TODO 未实现分页
setTitle()
```
**函数（方法）注释：** 以多行注释为基础，添加特殊的 `注释要求`。
```javascript
/**
* 函数说明
* @关键字
*/
```
| 注释名 | 语法 | 含义 | 示例 |
| :---: | :---: | :---: | :---: |
| @param | @param 参数名 {参数类型} 描述信息 | 描述参数的信息 | @param name {String} 传入名称 |
| @return | @return {返回类型} 描述信息 | 描述返回值的信息 | @return {Boolean} true:可执行;false:不可执行 |
| @autho | @author 作者信息 \[附属信息：如邮箱、日期\] | 描述此函数作者的信息 | @author 张三 2015/07/21 |
| @version | @version XX.XX.XX | 描述此函数的版本号 | @version 1.0.3 |
| @example | @example 示例代码 | 演示函数的使用 | @example setTitle('测试') |
```javascript
/**
* 合并Grid的行
* @param {Grid} grid 需要合并的Grid
* @param {Array} cols 需要合并列的Index(序号)数组；从0开始计数，序号也包含。
* @param {Boolean} isAllSome 是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样
* @return void
* @author polk6 2015/07/21
* @example
* _________________ _________________
* | 年龄 | 姓名 | | 年龄 | 姓名 |
* ----------------- mergeCells(grid,[0]) -----------------
* | 18 | 张三 | => | | 张三 |
* ----------------- - 18 ---------
* | 18 | 王五 | | | 王五 |
* ----------------- -----------------
*/
function mergeCells(grid, cols, isAllSome) {
// Do Something
}
```
**单引号：** 属性的赋值应使用`''`确保统一的风格。
```javascript
const name = 'zhangsan'
```
**变量赋值：** 建议赋值使用 `const`，可变动的使用 `let` ，减少 `var` 的使用。
```javascript
const a = 1
let count = 1
if (true) {
count += 1
}
```
**创建对象：** 建议使用 `字面值` 创建对象，方法与属性均使用 `简写`，简写属性提到 `开头`。
```javascript
const first = 1
const second = 2
const item = {
first,
second,
name: '张三',
getName () {
return item.name
}
}
const userList = [1, 2, 3, 4]
```
**解构：** 增加操作的便利性。
```javascript
// Object
const user = { name: 'zhangsan', age: '18', gender: '男' }
const { name, age } = user
const { name, ...params } = user
// Array
let items = []
const itemsCopy = [...items]
const [first, second] = items
// String
let firstName = 'zhang', lastName = 'si'
let innerHtml = `我叫${firstName} ${lastName}`
```
**函数表达式：** 建议使用函数表达式增加程序的可读性。
```javascript
const foo = function getName() {
}
```
**函数参数：** 建议使用 `...` rest语法，如使用其他方式，建议参数存在默认值。
```javascript
function foo(...args) {
}
function func(options = {}, name) {
}
```
**箭头函数：** 推荐使用 `=>` 函数，并且尽量简洁化。
```javascript
const count = item => item + 1
(item => item + 1)(1)
```
**import 与 export：** 推荐使用 `import` `export` 来进行模块之间的依赖。
- 不推荐使用 `import *` 来作为依赖模块
- 依赖同一个文件不推荐多次`import`
- 引入数据过多时，大于 `3` 行，建议换行处理，提升程序的可读性
- 在只有一个需要 `export` 的模时，添加 `default` 更利于理解与维护
```javascript
import { username, password } from 'user'
import {
name,
title,
id,
type
} from 'project'
export default function foo() {}
```
**数组函数：** 推荐使用数组新的函数 ` -高阶函数-` 对数据进行处理。
```javascript
Array.map()
Array.every()
Array.filter()
Array.find()
Array.findIndex()
Array.reduce()
Array.some()
Array.every()
Array.foreach()
Array.keys()
Array.value()
Array.entries()
```
**DOM & JS**
- 尽可能的减少 `JS` 操作 `DOM`
- 不建议在循环中进行 `DOM` 操作
- 使用 `CSS` 实现优先级要大于 `JS` 实现
- 酌情使用事件委托，事件委托要接近事件触发节点，避免将所有事件冒泡委托给body节点。
## 命名参考
**元素命名参考**
```
1. page: 代表整个页面，用于最外层。
2. wrapper: 页面外围控制整体布局宽度，用于最外层
3. container: 一个整体容器，用于最外层
4. header: 页头区域，用于头部
5. nav: 导航条
6. main: 网站中的主要区域，用于中部主体内容
7. content: 网站中的内容区域
8. column: 栏目
9. sidebar: 侧栏
10. footer: 页尾、页脚
11. copyright: 网站一些附加信息
```
**文件命名参考**
```
1. index.css: 一般用于首页建立样式
2. head.css: 头部样式，当多个页面头部设计风格相同时使用。
3. base.css: 共用样式。
4. style.css: 独立页面所使用的样式文件。
5. global.css: 页面样式基础，全局公用样式，页面中必须包含。
6. layout.css: 布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
7. module.css: 模块，用于产品类页，也可与其它样式配合使用。
8. master.css: 主要的样式表
9. columns.css: 专栏样式
10. themes.css: 主体样式
11. forms.css: 表单样式
12. mend.css: 补丁，基于以上样式进行的私有化修补。
```
**导航命名参考**
```
1. nav, navbar, navigation, nav_wrapper: 导航条或导航包，代表横向导航
2. top_nav: 顶部导航
3. main_nav: 主导航
4. sub_nav: 子导航
5. sidebar: 边导航
6. left_sidebar: 左导航
7. right_sidebar: 右导航
8. title: 标题
9. summary: 摘要
10. menu: 菜单，区域包含一般的链接和菜单
11. sub_menu: 子菜单
12. drop: 下拉
13. dorp_menu: 下拉菜单
14. links: 链接菜单
```
**功能命名参考**
```
1. logo: 标记网站logo标志
2. banner: 标语、广告条、顶部广告条
3. login: 登陆，（例如登录表单：form_login）
4. login_bar: 登录条
5. register: 注册
6. tool, toolbar: 工具条
7. search: 搜索
8. search_bar: 搜索条
9. search_input: 搜索输入框
10. shop: 功能区，表示现在的
11. icon: 小图标
12. label: 商标
13. homepage: 首页
14. subpage: 二级页面子页面
15. hot: 热门热点
16. list: 文章列表，（例如：新闻列表：list_news）
17. scroll: 滚动
18. tab: 标签
19. sitemap: 网站地图
20. message: 提示信息
21. current: 当前的
22. joinus: 加入
23. status: 状态
24. btn: 按钮，（例如：搜索按钮可写成：btn_search）
25. tips: 小技巧
26. note: 注释
27. guild: 指南
28. arr, arrow: 标记箭头
29. service: 服务
30. breadcrumb: (即页面所处位置导航提示）
31. download: 下载
32. vote: 投票
33. site_info: 网站信息
34. partner: 合作伙伴
35. link, friend_link: 友情链接
36. copyright: 版权信息
37. siteinfo_credits: 信誉
38. siteinfo_legal: 法律信息
```
**动词命名参考**
| 动词 | 含义 | 动词 | 含义 | 动词 | 含义 | 动词 | 含义 |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| can | 能够 | transfer | 转换 | is | 是否判断 | append | 添加 |
| has | 含有 | finish | 完成 | get | 获取 | set | 设置 |
| load | 加载数据 | save | 保存 | add | 添加 | remove | 删除 |
| create | 创建 | destory | 销毁 | start | 启动 | stop | 停止 |
| open | 打开 | close | 关闭 | read | 读取 | write | 写入 |
| 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 | 移除 | clean | 清理 | clear | 清除 |
| index | 索引 | sort | 排序 | find | 查找 | search | 搜索 |
| increase | 增加 | decrease | 减少 | play | 播放 | pause | 暂停 |
| launch | 启动 | run | 运行 | compile | 编译 | execute | 执行 |
| debug | 调试 | trace | 跟踪 | observe | 观察 | listen | 监听 |
| build | 构建 | publish | 发布 | input | 输入 | output | 输出 |
| encode | 编码 | decode | 解码 | compress | 压缩 | decompress | 解压缩 |
| pack | 打包 | unpack | 解包 | parse | 解析 | emit | 生成 |
| connect | 连接 | disconnect | 断开连接 | send | 发送 | recive | 接收 |
| download | 下载 | upload | 上传 | refresh | 刷新 | synchronize | 同步 |
| lock | 锁定 | unlock | 解锁 | check out | 迁出 | check in | 迁入 |
| update | 更新 | revert | 复原 | submit | 提交 | commit | 交付 |
| push | 推 | pull | 拉 | expand | 展开 | collapse | 折叠 |
| begin | 开始 | end | 结束 | enter | 进入 | exit | 退出 |
| abort | 放弃 | quit | 离开 | collect | 收集 | aggregate | 聚集 |
| obsolete | 废弃 | depreciate | 废旧 ||||
- 版本控制之Git简介
- Git工作流程
- Git工作区、暂存区、版本库
- Git 指令汇总
- Git 忽略文件规则 .gitignore
- pull request
- HTTP简介
- HTTP - Keep-Alive
- HTTP缓存
- XMLHttpRequest
- Fetch
- 跨域
- HTTP 消息头
- TCP/IP
- TCP首部
- IP首部
- IP 协议
- TCP/IP漫画
- 前端开发规范
- 前端开发规范整理
- 前端未来规划
- HTML思维导图
- CSS思维导图
- 布局
- position，float，display的关系和优先级
- line-height、height、font-size
- 移动端适配
- JS 对象
- JS 原型模式 - 创建对象
- JS 预编译
- 探索JS引擎
- ES