#前端规范
HTML 规范
1.DOCTYPE 声明
HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
<!DOCTYPE html>
2.编码类型
一般情况下统一使用 “UTF-8” 编码
<meta charset="UTF-8">
3.元素及标签闭合
原始文本元素、RCDATA元素以及常规元素都有一个开始标签来表示开始，一个结束标签来表示结束。
某些元素的开始和结束标签是可以省略的，如果规定标签不能被省略，那么就绝对不能省略它。
空元素只有一个开始标签，且不能为空元素设置结束标签。
外来元素可以有一个开始标签和配对的结束标签，或者只有一个自闭合的开始标签，且后者情况下该元素不能有结束标签。
4.代码缩进
统一使用soft tab（4个空格）进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
推荐：
<div> <h1>我是h1标题</h1> <p>我是一段文字，我有始有终，浏览器能正确解析</p></div>
5.HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：
<div class="demo"></div>
6.类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
推荐：
<link rel="stylesheet" href="" ><script src=""></script>
7.元素属性
元素属性值使用双引号语法
元素属性值可以写上的都写上
推荐：
<input type="text"> <input type="radio" name="name" checked="checked" >
8.特殊字符引用
文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
推荐：
<a href="#">more>></a>
9.代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选
推荐：
<div> <h1></h1> <p></p></div> <p><span></span><span></span></p>
段落元素与标题元素只能嵌套内联元素
推荐：
<h1><span></span></h1><p><span></span><span></span></p>
10.注释方面
单行注释
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐：
<!-- Comment Text --><div>...</div>
多行注释
// searchTitle_placeholder(state, value) {// state.searchTitle_placeholder = value// },
/* searchTitle_placeholder(state, value) { state.searchTitle_placeholder = value},*/
11.标准模版
HTML5
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML5标准模版</title></head><body> </body></html>
移动端
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" ><meta name="format-detection" content="telephone=no" ><title>移动端HTML模版</title> <!-- S DNS预解析 --><link rel="dns-prefetch" href=""><!-- E DNS预解析 --> <!-- S 线上样式页面片，开发请直接取消注释引用 --><!-- #include virtual="" --><!-- E 线上样式页面片 --><!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --> <link rel="stylesheet" href="css/index.css" ><!-- /本地调试方式 --><link rel="stylesheet" href="http://srcPath/index.css" ><!-- /开发机调试方式 --><!-- E 本地调试 --></head><body></body></html>
PC端
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="keywords" content="your keywords"><meta name="description" content="your description"><meta name="author" content="author,email address"><meta name="robots" content="index,follow"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="renderer" content="ie-stand"><title>PC端HTML模版</title><!-- S DNS预解析 --> <link rel="dns-prefetch" href=""><!-- E DNS预解析 --> <!-- S 线上样式页面片，开发请直接取消注释引用 --><!-- #include virtual="" --><!-- E 线上样式页面片 --><!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --> <link rel="stylesheet" href="css/index.css" ><!-- /本地调试方式 --><link rel="stylesheet" href="http://srcPath/index.css" ><!-- /开发机调试方式 --><!-- E 本地调试 --></head><body></body></html>
12.图片格式
常见的图片格式有 GIF、PNG8、PNG24、JPEG、WEBP，根据图片格式的特性和场景需要选取适合的图片格式。
PC平台单张的图片的大小不应大于 200KB。
移动平台单张的图片的大小不应大于 100KB。
13.图片引入
HTML 中图片引入不需添加 width、height 属性，alt 属性应该写上
推荐：
<img src="" alt="" >
CSS 中图片引入不需要引号
.jdc { background-image: url(icon.png);}
CSS Sprites VS Data URIs
CSS Sprites特点
减少请求数
加速图片的显示
维护更新成本大
更多的内存消耗，特别是大体积或有过多空白的 Sprites 图
图片渗漏，相邻的不需展示的图片有可能出现在展示元素中，特别是在高清设备移动设备上
Data URIs（base64编码）
减少请求数
转换文件体积大，大约比原始的二进制大33%
IE6 / IE7 不支持
图片显示相对较慢，需要更多的CPU消耗
CSS 规范
1.代码格式化
统一使用展开格式书写样式
.jdc{ display: block; width: 50px;}
2.代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
/* 推荐 */.jdc{ display:block;} /* 不推荐 */.JDC{ DISPLAY:BLOCK;}
3.选择器
尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器
/* 推荐 */.jdc {}.jdc li {}.jdc li p{}/* 不推荐 */*{}#jdc {}.jdc div{}
4.代码缩进
统一使用soft tab（4个空格）进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
.jdc { width: 100%; height: 100%;}
5.分号
每个属性声明末尾都要加分号；
.jdc { width: 100%; height: 100%;}
6.代码易读性
左括号与类名之间一个空格，冒号与属性值之间一个空格
推荐：
.jdc { width: 100%; }
逗号分隔的取值，逗号之后一个空格
推荐：
.jdc { box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;}
颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0
推荐：
.jdc { color: rgba(255,255,255,.5);}
属性值十六进制数值能用简写的尽量用简写
推荐：
.jdc { color: #fff;}
不要为 0 指明单位
推荐：
.jdc { margin: 0 10px;}
7.代码注释
单行注释
注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行
推荐：
/* Comment Text */.jdc{}/* Comment Text */.jdc{}
不推荐：
/*Comment Text*/.jdc{ display: block;}.jdc{ display: block;/*Comment Text*/}
模块注释
注释内容第一个字符和最后一个字符都是一个空格字符，/* 与 模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行
推荐：
/* Module A---------------------------------------------------------------- */.mod_a {}/* Module B---------------------------------------------------------------- */.mod_b {}
不推荐：
/* Module A ---------------------------------------------------- */.mod_a {}/* Module B ---------------------------------------------------- */.mod_b {}
文件信息注释
在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息
@charset "UTF-8";/** * @desc File Info * @author Author Name * @date 2015-10-10 */
8.重置样式
移动端
* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }img { border: 0 none; vertical-align: top; }i, em { font-style: normal; }ol, ul { list-style: none; }input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }table { border-collapse: collapse; border-spacing: 0; }a { text-decoration: none; color: #666; }body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
PC端
html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }ul, ol { list-style: none; }img { border: 0 none; vertical-align: top; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: none; }table { border-collapse: collapse; border-spacing: 0; }strong, em, i { font-style: normal; font-weight: normal; }ins { text-decoration: underline; }del { text-decoration: line-through; }mark { background: none; }input::-ms-clear { display: none !important; }body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }a { text-decoration: none; color: #333; }a:hover { text-decoration: underline; }
9.目录命名
项目文件夹：projectname
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：img
10.HTML/CSS文件命名
确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号，如：
<!-- HTML -->jdc.htmljdc_list.htmljdc_detail.html<!-- SASS -->jdc.scssjdc_list.scssjdc_detail.scss
11.ClassName命名
ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，全部采用驼峰式命名
推荐：
<div class="userInfo"> ... </div>
JS 规范
1.类型
基本类型
字符串
数值
布尔类型
null
undefined
const foo = 1let bar = foobar = 9console.log(foo, bar) // 1, 9
复杂类型
object
array
function
const foo = [1, 2, 3]const bar = foobar[0] = 9console.log(foo[0], bar[0]) // 9, 9
2.引用
const 和 let 都是块级作用域，var 是函数级作用域
对所有引用都使用 const，不要使用 var
// badvar a = 1var b = 2// goodconst a = 1const b = 2
如果引用是可变动的，则使用 let
// badvar count = 1if (count < 10) { count += 1}// goodlet count = 1if (count < 10) { count += 1}
3.对象
请使用字面量值创建对象
// badconst a = new Object{}// goodconst a = {}
别使用保留字作为对象的键值，这样在 IE8 下不会运行
// badconst a = { default: {}, // default 是保留字 common: {}}// goodconst a = { defaults: {}, common: {}}
请使用对象方法的简写方式
// badconst item = { value: 1, addValue: function (val) { return item.value + val }}// goodconst item = { value: 1, addValue(val) { return item.value + val }}
请使用对象属性值的简写方式
const job = 'FrontEnd'// badconst item = { job: job}// goodconst item = { job}
对象属性值的简写方式要和声明式的方式分组
const job = 'FrontEnd'const department = 'JDC'// badconst item = { sex: 'male', job, age: 25, department}// goodconst item = { job, department, sex: 'male', age: 25}
4.数组
请使用字面量值创建数组
// badconst items = new Array()// goodconst items = []
向数组中添加元素时，请使用 push 方法
const items = []// baditems[items.length] = 'test'// gooditems.push('test')
使用拓展运算符 ... 复制数组
// badconst items = []const itemsCopy = []const len = items.lengthlet i// badfor (i = 0; i < len; i++) { itemsCopy[i] = items[i]}// gooditemsCopy = [...items]
使用数组的 map 等方法时，请使用 return 声明，如果是单一声明语句的情况，可省略 return
// good[1, 2, 3].map(x => { const y = x + 1 return x * y})// good[1, 2, 3].map(x => x + 1)// badconst flat = {}[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => { const flatten = memo.concat(item) flat[index] = flatten})// goodconst flat = {}[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => { const flatten = memo.concat(item) flat[index] = flatten return flatten})// badinbox.filter((msg) => { const { subject, author } = msg if (subject === 'Mockingbird') { return author === 'Harper Lee' } else { return false }})// goodinbox.filter((msg) => { const { subject, author } = msg if (subject === 'Mockingbird') { return author === 'Harper Lee' } return false})
5.解构赋值
当需要使用对象的多个属性时，请使用解构赋值
// badfunction getFullName (user) { const firstName = user.firstName const lastName = user.lastName return `${firstName} ${lastName}`}// goodfunction getFullName (user) { const { firstName, lastName } = user return `${firstName} ${lastName}`}// betterfunction getFullName ({ firstName, lastName }) { return `${firstName} ${lastName}`}
当需要使用数组的多个值时，请同样使用解构赋值
const arr = [1, 2, 3, 4]// badconst first = arr[0]const second = arr[1]// goodconst [first, second] = arr
函数需要回传多个值时，请使用对象的解构，而不是数组的解构
// badfunction doSomething () { return [top, right, bottom, left]}// 如果是数组解构，那么在调用时就需要考虑数据的顺序const [top, xx, xxx, left] = doSomething()// goodfunction doSomething () { return { top, right, bottom, left }}// 此时不需要考虑数据的顺序const { top, left } = doSomething()
6.字符串
字符串统一使用单引号的形式 ''
// badconst department = "JDC"// goodconst department = 'JDC'
字符串太长的时候，请不要使用字符串连接符换行 \，而是使用 +
const str = '凹凸实验室 凹凸实验室 凹凸实验室' + '凹凸实验室 凹凸实验室 凹凸实验室' + '凹凸实验室 凹凸实验室'
程序化生成字符串时，请使用模板字符串
const test = 'test'// badconst str = ['a', 'b', test].join()// badconst str = 'a' + 'b' + test// goodconst str = `ab${test}`
7.函数
请使用函数声明，而不是函数表达式
// badconst foo = function () { // do something}// goodfunction foo () { // do something}
不要在非函数代码块中声明函数
// badif (isUse) { function test () { // do something }}// goodlet testif (isUse) { test = () => { // do something }}
不要使用 arguments，可以选择使用 ...
arguments 只是一个类数组，而 ... 是一个真正的数组
// badfunction test () { const args = Array.prototype.slice.call(arguments) return args.join('')}// goodfunction test (...args) { return args.join('')}
不要更改函数参数的值
// badfunction test (opts) { opts = opts || {}}// goodfunction test (opts = {}) { // ...}
8.原型
使用 class，避免直接操作 prototype
// badfunction Queue (contents = []) { this._queue = [..contents]}Queue.prototype.pop = function () { const value = this._queue[0] this._queue.splice(0, 1) return value}// goodclass Queue { constructor (contents = []) { this._queue = [...contents] } pop () { const value = this._queue[0] this._queue.splice(0, 1) return value }}
9.模块
使用标准的 ES6 模块语法 import 和 export
// badconst util = require('./util')module.exports = util// goodimport Util from './util'export default Util// betterimport { Util } from './util'export default Util
不要使用 import 的通配符 *，这样可以确保你只有一个默认的 export
// badimport * as Util from './util'// goodimport Util from './util'
10.迭代器
不要使用 iterators
const numbers = [1, 2, 3, 4, 5]// badlet sum = 0for (let num of numbers) { sum += num}// goodlet sum = 0numbers.forEach(num => sum += num)// betterconst sum = numbers.reduce((total, num) => total + num, 0)
11.对象属性
使用 . 来访问对象属性
const joke = { name: 'haha', age: 28}// badconst name = joke['name']// goodconst name = joke.name
12.变量声明
声明变量时，请使用 const、let 关键字，如果没有写关键字，变量就会暴露在全局上下文中，这样很可能会和现有变量冲突，另外，也很难明确该变量的作用域是什么。这里推荐使用 const 来声明变量，我们需要避免全局命名空间的污染。
// baddemo = new Demo()// goodconst demo = new Demo()
将所有的 const 和 let 分组
// badlet aconst blet cconst dlet e// goodconst bconst dlet alet clet e
13.Hoisting
var 存在变量提升的情况，即 var 声明会被提升至该作用域的顶部，但是他们的赋值并不会。而 const 和 let 并不存在这种情况，他们被赋予了 Temporal Dead Zones, TDZ
function example () { console.log(notDefined) // => throws a ReferenceError}function example () { console.log(declareButNotAssigned) // => undefined var declaredButNotAssigned = true}function example () { let declaredButNotAssigned console.log(declaredButNotAssigned) // => undefined declaredButNotAssigned = true}function example () { console.log(declaredButNotAssigned) // => throws a ReferenceError console.log(typeof declaredButNotAssigned) // => throws a ReferenceError const declaredButNotAssigned = true}
匿名函数的变量名会提升，但函数内容不会
function example () { console.log(anonymous) // => undefined anonymous() var anonymous = function () { console.log('test') }}
命名的函数表达式的变量名会被提升，但函数名和函数函数内容并不会
function example() { console.log(named) // => undefined named() // => TypeError named is not a function superPower() // => ReferenceError superPower is not defined var named = function superPower () { console.log('Flying') }}function example() { console.log(named) // => undefined named() // => TypeError named is not a function var named = function named () { console.log('named') }}
14.分号
我们遵循 Standard 的规范，不使用分号。
关于应不应该使用分号的讨论有很多，本规范认为非必要的时候，应该不使用分号，好的 JS 程序员应该清楚场景下是一定要加分号的，相信你也是名好的开发者。
// badconst test = 'good';(function () { const str = 'hahaha';})()// goodconst test = 'good';(() => { const str = 'hahaha'})();
15.标准特性
为了代码的可移植性和兼容性，我们应该最大化的使用标准方法，例如优先使用 string.charAt(3) 而不是 string[3]
eval()
由于 eval 方法比较 evil，所以我们约定禁止使用该方法
with() {}
由于 with 方法会产生神奇的作用域，所以我们也是禁止使用该方法的
for-in 循环
推荐使用 for in 语法，但是在对对象进行操作时，容易忘了检测 hasOwnProperty(key)，所以我们启用了 ESLint 的 guard-for-in 选项
对数组进行 for in 的时候，顺序是不固定的
16.修改内置对象的原型
不要修改内置对象，如 Object 和 Array
JS代码规范
1.单行代码块
在单行代码块中使用空格
不推荐
function foo () {return true}if (foo) {bar = 0}
推荐
function foo () { return true}if (foo) { bar = 0}
2.大括号风格
在编程过程中，大括号风格与缩进风格紧密联系，用来描述大括号相对代码块位置的方法有很多。在 JavaScript 中，主要有三种风格，如下：
One True Brace Style
if (foo) { bar()} else { baz()}
Stroustrup
if (foo) { bar()}else { baz()}
Allman
if (foo){ bar()}else{ baz()}
3.变量命名
当命名变量时，主流分为驼峰式命名（variableName）和下划线命名（variable_name）两大阵营。
团队约定使用驼峰式命名
4.拖尾逗号
在 ECMAScript5 里面，对象字面量中的拖尾逗号是合法的，但在 IE8（非 IE8 文档模式）下，当出现拖尾逗号，则会抛出错误。
拖尾逗号的例子：
var foo = { name: 'foo', age: '22',}
拖尾逗号的好处是，简化了对象和数组添加或删除元素，我们只需要修改新增的行即可，并不会增加差异化的代码行数。
因为拖尾逗号有好也有不好，所以团队约定允许在最后一个元素或属性与闭括号 ] 或 } 在不同行时，可以（但不要求）使用拖尾逗号。当在同一行时，禁止使用拖尾逗号。
5.逗号空格
逗号前后的空格可以提高代码的可读性，团队约定在逗号后面使用空格，逗号前面不加空格。
不推荐
var foo = 1,bar = 2var foo = 1 , bar = 2var foo = 1 ,bar = 2
推荐
var foo = 1, bar = 2
6.逗号风格
逗号分隔列表时，在 JavaScript 中主要有两种逗号风格：
标准风格，逗号放置在当前行的末尾
逗号前置风格，逗号放置在下一行的开始位置
团队约定使用标准风格
不推荐
var foo = 1,bar = 2var foo = 1, bar = 2var foo = ['name' , 'age']
推荐
var foo = 1, bar = 2var foo = ['name', 'age']
7.计算属性的空格
团队约定在对象的计算属性内，禁止使用空格
不推荐
obj['foo' ]obj[ 'foo']obj[ 'foo' ]
推荐
obj['foo']
8.拖尾换行
在非空文件中，存在拖尾换行是一个常见的 UNIX 风格，它的好处是可以方便在串联和追加文件时不会打断 Shell 的提示。在日常的项目中，保留拖尾换行的好处是，可以减少版本控制时的代码冲突。
不推荐
function func () { // do something}
推荐
function func () { // do something} // 此处是新的一行
可以通过 .editorconfig 添加 EOL
9.函数调用
为了避免语法错误，团队约定在函数调用时，禁止使用空格
不推荐
fn ()fn()
推荐
fn()
10.缩进
js代码统一采用soft tab（4个空格）
对象字面量的键值缩进
对象字面量的键和值之间不能存在空格，且要求对象字面量的冒号和值之间存在一个空格
不推荐
var obj = { 'foo' : 'haha' }
推荐
var obj = { 'foo': 'haha' }
11.构造函数首字母大写
在 JavaScript 中 new 操作符用来创建某个特定类型的对象的一个实例，该类型的对象是由一个构造函数表示的。由于构造函数只是常规函数，唯一区别是使用 new 来调用。所以我们团队约定构造函数的首字母要大小，以此来区分构造函数和普通函数。
不推荐
var fooItem = new foo()
推荐
var fooItem = new Foo()
12.构造函数的参数
在 JavaScript 中，通过 new 调用构造函数时，如果不带参数，可以省略后面的圆括号。但这样会造成与整体的代码风格不一致，所以团队约定使用圆括号
不推荐
var person = new Person
推荐
var person = new Person()
13.链式调用
链式调用如果放在同一行，往往会造成代码的可读性差，但有些时候，短的链式调用并不会影响美观。所以本规范约定一行最多只能有四个链式调用，超过就要求换行。
14.空行
空白行对于分离代码逻辑有帮助，但过多的空行会占据屏幕的空间，影响可读性。团队约定最大连续空行数为 2
不推荐
var a = 1var b = 2
推荐
var a = 1var b = 2
15.链式赋值
链式赋值容易造成代码的可读性差，所以团队约定禁止使用链式赋值
不推荐
var a = b = c = 1
推荐
var a = 1var b = 1var c = 1
16.变量声明
JavaScript 允许在一个声明中，声明多个变量。团队约定在声明变量时，一个声明只能有一个变量
不推荐
var a, b, c
推荐
var avar bvar c
17.分号
JavaScript 在所有类 C 语言中是比较独特的，它不需要在每个语句的末尾有分号。在很多情况下，JavaScript 引擎可以确定一个分号应该在什么位置然后自动添加它。此特征被称为 自动分号插入 (ASI)，被认为是 JavaScript 中较为有争议的特征。我们按照W3C标准每行代码结尾必须用分号结束。
18.代码块空格
不推荐
if (a){ b()}function a (){}
推荐
if (a) { b()}function a () {}
19.函数声明的空格
当格式化一个函数，函数名或 function 关键字与左括号之间允许有空白。命名函数要求函数名和 function 关键字之间有空格，但是匿名函数要求不加空格。
团队约定函数括号前要加空格
不推荐
function func(x) { // ...}
推荐
function func (x) { // ...}
20.操作符的空格
团队约定操作符前后都需要添加空格
不推荐
var sum = 1+2
推荐
var sum = 1 + 2