前端代码规范
随着前端技术的发展，越来越多的人员加入到了这个领域，随之而来的就是，代码写法上的差异，代码维护难度的增加，所以推出前端代码规范，势在必行。
HTML 部分
优先使用 IE 最新版本和 Chrome Frame
<!-- 优先使用 IE 最新版本和 Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
文件模板
HTML 模板指的是团队使用的初始化 HTML 文件，里面会根据不同平台而采用不一样的设置，一般主要不同的设置就是 meta 标签的设置，以下是 PC 和移动端的 HTMl 模板。
HMTL5 标准模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML5标准模版</title>
</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>
移动端
<!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>
template 模板部分
Vue 中用 template 来表示 html 代码，这里我们对 html 相关的书写风格，同样适用于 template.
代码大小写
html 标签名、类名、标签属性和大部分属性值统一用小写。
推荐：
<div class="demo"></div>
不推荐：
<div class="DEMO"></div>
<div class="DEMO"></div>
元素属性
- 元素属性值使用双引号语法
元素属性值可以写上的都写上
推荐：
<input type="text" />
<input type="radio" name="name" checked="checked" />
<input type="radio" name="name" checked />
不推荐：
<input type="text" /> <input type="text" />
特殊字符引用
在 html 中尽量不要使用"<",">"等特殊符号，可能使用 html 实体来代替它们。
推荐：
<a href="#">more>></a>
不推荐：
<a href="#">more>></a>
代码缩进
在 vue 中，统一使用两个空格进行代码缩进，使得各编辑器表现一致。
<div class="jdc">
<a href="#">more>></a>
</div>
纯数字输入框
使用type="tel"而不是type="number"
<input type="tel" />
代码嵌套
元素嵌套规范，每个块元素独立一行，内联元素可选。
推荐：
<div>
<h1>H1标题</h1>
<p>这是一段描述</p>
</div>
<p>
<span></span>
<span></span>
</p>
不推荐：
<div>
<h1>H1标题</h1>
<p>这是一段描述</p>
</div>
<p>
<span></span>
<span></span>
</p>
图片
内容图
内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
- 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
- 尽量不使用 PNG 格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
背景图
背景图多为图标等颜色比较简单，文件体积不大，起修饰作用的图片
- PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG 格式允许更多的颜色并提供更好的压缩率
- 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
- 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
- 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
- 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式
样式
样式文件必须写上@charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用"UTF-8"
推荐:
@charset "UTF-8"
.jdc {
}
不推荐：
/**
* @desc File Info
* @author Author Name
* @date 2015-10-10
*/
/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";
.jdc {
}
@charset "UTF-8";
/* @charset规则没有用小写 */
.jdc {
}
/* 无@charset规则 */
.jdc {
}
CSS 代码风格
代码格式化
样式书写一般有两种：一种是紧凑格式(Compact)不易阅读
.jdc {
display: block;
width: 50px;
}
一种是展开格式(Expanded),统一使用这种方式书写样式
.jdc {
display: block;
width: 50px;
}
代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
/* 推荐 */
.jdc {
display: block;
}
/* 不推荐 */
.JDC {
display: BLOCK;
}
选择器
- 尽量少用通用选择器
- 不使用 ID 选择器
- 不使用无具体语义定义的标签选择器
- 尽量使用类选择器
/* 推荐 */
.jdc {
}
.jdc li {
}
.jdc li p {
}
/* 不推荐 */
* {
}
#jdc {
}
.jdc div {
}
代码缩进
统一使用两个空格进行代码缩进，使得各编辑器表现一致
.jdc {
width: 100%;
height: 100%;
}
分号
每个属性声明末尾都要加分号
.jdc {
width: 100%;
height: 100%;
}
代码易读性
左括号与类名之间一个空格，冒名与属性值之间一个空格
// 推荐
.jdc {
width: 100%;
}
// 不推荐
.jdc {
width: 100%;
}
逗号分隔的取值，逗号之后一个空格
// 推荐
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
// 不推荐
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
为单个 css 选择器或新申明开户新行
推荐：
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav {
color: #fff;
}
不推荐：
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav {
color: #fff;
}
颜色值rgb() rgba() hsl() hsla() rect()中不需要有空格，且取值不要带有不必要的 0
推荐:
.jdc {
color: rgba(255, 255, 255, 0.5);
}
不推荐：
.jdc {
color: rgba(255, 255, 255, 0.5);
}
属性值十六进制数值能用简写的尽量用简写
推荐：
.jdc {
color: #fff;
}
不推荐：
.jdc {
color: #ffffff;
}
不要为 0 指明单位
推荐：
.jdc {
margin: 0 10px;
}
不推荐：
.jdc {
margin: 0px 10px;
}
属性值引号
css 属性值需要用到引号时，统一使用单引号
/* 推荐 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推荐 */
.jdc {
font-family: 'Hiragino Sans GB';
}
属性书写顺序
建议遵循以下顺序：
- 布局定位属性：display/position/float/clear/visibility/overflow
- 自身属性：width/height/margin/padding/border/background
- 文本属性： color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其他属性（CSS3）: content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
CSS3 浏览器私有前缀写法
CSS3 浏览器私有前缀在前，标准前缀在后
.jdc {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
命名规范
由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。
目录命名
项目文件夹用小写字母命名，如果用多个单词，用-连接，如
lin-cms-vue
图片命名
命名顺序
图片命名建议以以下顺序命名：
**图片业务（可选）+（mod_）图片功能类别（必选）+图片模块名称（可选）+图片精度（可选 ）
- 图片业务：
- pp_：拍拍
- wx_：微信
- sq_：手 Q
- jd_：京东商城
- …
- 图片功能类别：
- mod_：是否公共，可选
- icon：模块类固化的图标
- logo：LOGO 类
- spr：单页面各种元素合并集合
- btn：按钮
- bg：可平铺或者大背景
- …
- 图片模块名称：
- goodslist：商品列表
- goodsinfo：商品信息
- userava tar：用户头像
- …
- 图片精度：
- 普清：@1x
- Retina：@2x | @3x
- …
如下面例子：
公共模块：
wx_mod_btn_goodlist@2x.png
wx_mod_btn_goodlist.png
mod_btn_goodlist.png
非公共模块：
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png
HTML/CSS 文件命名
确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号，如：
<!-- HTML -->
jdc.html
jdc_list.html
jdc_detail.html
<!-- SASS -->
jdc.scss
jdc_list.scss
jdc_detail.scss
ClassName 命名
ClassName 的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接
命名原则
基于姓氏命名法（继承+外来），如下图：
祖先模块不能出现下划线，除了是全站公用模块，如 mod_系列的命名：
推荐：
<div class="modulename">
<div class="modulename_info">
<div class="modulename_son"></div>
<div class="modulename_son"></div>
...
</div>
</div>
<!-- 这个是全站公用模块，祖先模块允许直接出现下划线 -->
<div class="mod_info">
<div class="mod_info_son"></div>
<div class="mod_info_son"></div>
...
</div>
不推荐：
<div class="modulename_info">
<div class="modulename_info_son"></div>
<div class="modulename_info_son"></div>
...
</div>
当子孙模块超过 4 级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块
推荐：
<div class="modulename">
<div class="modulename_cover"></div>
<div class="modulename_info">
<div class="modulename_info_user">
<div class="modulename_info_user_img">
<img src="" alt="">
<!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
<div class="miui_tit"></div>
<div class="miui_txt"></div>
...
</div>
</div>
<div class="modulename_info_list"></div>
</div>
</div>
模块命名
全站公共模块：以mod_开头
<div class="mod_yours"></div>
业务公共模块:以业务名_mod_开头
<div class="paipai_mod_yours"></div>
常用命名推荐
注意：ad、banner、gg、guanggao 等有机会和广告挂勾的字眼不建议直接用来做 className,因为有些浏览器插件（（Chrome 的广告拦截插件等））会直接过滤这些类名，因此
<div class="ad"></div>
这种广告和英文或拼音类名不应该出现
另外，敏感不和谐字眼也不应该出现，如：
<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div>
<div class="ass"></div>
<div class="KMT"></div>
...
| ClassName | 含义 |
|---|---|
| about | 关于 |
| account | 账户 |
| arrow | 箭头图标 |
| article | 文章 |
| aside | 边栏 |
| audio | 音频 |
| avatar | 头像 |
| bg,background | 背景 |
| branding | 品牌化 |
| crumb, breadcrumbs | 面包屑 |
| btn,button | 按钮 |
| caption | 标题，说明 |
| category | 分类 |
| chart | 图表 |
| clearfix | 清除浮动 |
| close | 关闭 |
| col, column | 列 |
| comment | 评论 |
| community | 社区 |
| container | 容器 |
| content | 内容 |
| copyright | 版权 |
| current | 当前态，选中态 |
| default | 默认 |
| description | 描述 |
| details | 细节 |
| disabled | 不可用 |
| entry | 文章，博文 |
| error | 错误 |
| even | 偶数，常用于多行列表或表格中 |
| fail | 失败（提示） |
| feature | 专题 |
| fewer | 收起 |
| field | 用于表单的输入区域 |
| figure | 图 |
| filter | 筛选 |
| first | 第一个，常用于列表中 |
| footer | 页脚 |
| forum | 论坛 |
| gallery | 画廊 |
| group | 模块，清除浮动 |
| header | 页头 |
| help | 帮助 |
| hide | 隐藏 |
| highlight | 高亮 |
| home | 主页 |
| icon | 图标 |
| info,infomation | 信息 |
| last | 最后一个，常用于列表中 |
| links | 链接 |
| login | 登录 |
| logout | 登出 |
| logo | 标志 |
| main | 主体 |
| menu | 菜单 |
| meta | 作者，更新时间等信息栏，一般位于标题之下 |
| module | 模块 |
| more | 更多（展开） |
| msg,message | 消息 |
| nav，navigation | 导航 |
| next | 下一页 |
| nub | 小块 |
| odd | 奇数，常用于多行列表或者表格中 |
| off | 鼠标离开 |
| on | 鼠标移过 |
| output | 输出 |
| pagination | 分页 |
| pop,popup | 弹窗 |
| preview | 预览 |
| previous | 上一页 |
| primary | 主要 |
| progress | 进度条 |
| promotion | 促销 |
| rcommd, recommendations | 推荐 |
| reg,register | 注册 |
| save | 保存 |
| search | 搜索 |
| secondary | 次要 |
| section | 区块 |
| selected | 已选 |
| share | 分享 |
| show | 显示 |
| sidebar | 边栏，侧栏 |
| slide | 幻灯片，图片切换 |
| sort | 排序 |
| sub | 次级的，子级的 |
| submit | 提交 |
| subscribe | 订阅 |
| subtitle | 副标题 |
| success | 成功（提示） |
| summary | 摘要 |
| tab | 标签页 |
| table | 表格 |
| txt, text | 文本 |
| thumbnail | 缩略图 |
| time | 时间 |
| tips | 提示 |
| title | 标题 |
| video | 视频 |
| wrap | 容器，包，一般用于最外层 |
| wrapper | 容器，包，一般用于最外层 |
语言规范（JavaScript）
JavaScript是一种客户端脚本语言，这里列出了编写JavaScript时需要遵守的规则。
类型
- 基本类型
- 字符串
- 数值
- 布尔类型
- null
- undefined
const foo = 1
let bar = foo
bar = 9
console.log(foo, bar)
- 复杂类型
- object
- array
- function
const foo = [1, 2, 3]
const bar = foo
bar[1] = 9
console.log(foo[0], bar[0])
引用
const 和 let都是块级作用域，var是函数作用域
- 对所有不改变的引用都是使用const,不要使用var
// bad
var a = 1
var b = 2
// good
const a = 1
const b = 2
- 如果引用是可变动的，则使用let
// bad
var count = 1
if (count < 10) {
count++
}
// good
let count = 1
if (count < 10) {
count++
}
对象
- 请使用字面量值创建对象
// bad
const a = new Object()
// good
const a = {}
- 别使用保留字作对为对象的键值，这样在IE8下不会运行
// bad
const a = {
default: {}, // default 是保留字
common: {}
}
// good
const a = {
defaults: {},
common: {}
}
- 请使用对象方法的简写方式
// bad
const item = {
value: 1,
addValue: function(val) {
return item.value + val
}
}
// good
const item = {
value: 1,
addValue(val) {
return item.value + val
}
}
- 请使用对象属性的简写方式
const job = 'FrontEnd'
// bad
const item = {
job: job
}
// good
const item = {
job
}
- 对象属性值的简写方式要和声明式的方式分组
const job = 'FrontEnd'
const department = 'JDC'
// bad
const item = {
sex: 'male',
job,
age: 25,
department
}
// good
const item = {
job,
department,
sex: 'male',
age: 25
}
数组
- 请使用字面量来创建数组
// bad
const items = new Array()
// good
const items = []
- 向数组中添加元素时，请使用
push方法
const items = []
// bad
items[items.length] = 'test'
// good
items.push('test')
- 使用扩展运算符
...复制数组
// bad
const items = []
const itemsCopy = []
const len = items.length
len = i
// bad
for (i = 0; i < len; i++>) {
itemsCopy[i] = items[i]
}
// good
itemCopy = [...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)
//bad
const flat = {}
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
const flatten = memo.concat(item)
flat[index] = flatten
})
// good
const flat = {}
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
const flatten = memo.concat(item)
flat[index] = flatten
return flatten
})
// bad
inbox.filter((msg) => {
const { subject, author } = msg
if (subject === 'Mockingbird') {
return author === 'Harper Lee'
} else {
return false
}
})
// good
inbox.filter((msg) => {
const { subject, author } = msg
if (subject === 'Mockingbird') {
return author === 'Harper Lee'
}
return false
})
解构赋值
- 当需要使用对象的多个属性时，请使用解构赋值
// bad
function getFullName(user) {
const firstName = user.firstName
const lastName = user.lastName
return `${firstName} ${lastName}`
}
// good
function getFullName (user) {
const { firstName, lastName } = user
return `${firstName} ${lastName}`
}
// better
function getFullName ({ firstName, lastName }) {
return `${firstName} ${lastName}`
}
- 当需要使用数组的多个值时，请同样使用解构赋值
const arr = [1, 2, 3, 4]
// bad
const first = arr[0]
const second = arr[1]
// good
const [first, second] = arr
- 函数需要回传多个值时，请使用对象的解构，而不是数组的解构
// bad
function doSomething() {
return [top, right, bottom, left]
}
// 如果是数组解构，那么在调用时就需要考虑数据的顺序
const [top, right, bottom, left] = doSomething()
// good
// good
function doSomething () {
return { top, right, bottom, left }
}
// 此时不需要考虑数据的顺序
const { top, left } = doSomething()
字符串
- 字符串统一使用单引号的形式’’
// bad
const department = "JDC"
// good
const department = 'JDC'
- 字符串太长的时候，请不要使用字符串连接符换行
\,而是使用+
const str = '凹凸实验室 凹凸实验室 凹凸实验室' +
'凹凸实验室 凹凸实验室 凹凸实验室' +
'凹凸实验室 凹凸实验室'
- 程序化生成字符串时，请使用模板字符串
const test = 'test'
// bad
const str = ['a', 'b', test].join()
// bad
const str = 'a' + 'b' + test
// good
const str = `ab${test}`
函数
- 请使用函数声明，而不是函数表达式
// bad
const foo = function() {
// do something
}
// good
function foo () {
// do something
}
- 不要在非函数代码块中声明函数
// bad
if (isUse) {
function test () {
// do something
}
}
// good
let test
if (isUse) {
test = () => {
// do something
}
}
- 不要使用arguments,可以选择使用…
arguments只是一个类数组，而…是一个真正的数组
// bad
function test () {
const args = Array.prototype.slice.call(arguments)
return args.join('')
}
// good
function test (...args) {
return args.join('')
}
- 不要更改函数参数的值
// bad
function test (opts) {
opts = opts || {}
}
// good
function test (opts = {}) {
// ...
}
原型
- 使用
class，避免直接操作prototype
// bad
function Queue(contents = []) {
this._queue = [...contents]
}
Queue.prototype.pop = function() {
const value = this._queue[0]
this._queue.splice(0, 1)
return value
}
// good
class Queue {
constructor (contents = []) {
this._queue = [...contents]
}
pop() {
const value = this._queue[0]
this._queue.splice(0, 1)
return value
}
}
模块
- 使用标准的ES6模块语法import和export
// bad
const util = require('./util')
module.exports = util
// good
import Util from './util'
export default Util
// better
import { Util } from './util'
export default Util
- 不要使用
import的通配符*,这样可以确保你只有一个默认的export
// bad
import * as Util from './util'
// good
import Util from './util'
迭代器
- 不要使用
iterators
const numbers = [1, 2, 3, 4, 5]
// bad
let sum = 0
for (let num of numbers) {
sum += num
}
// good
let sum = 0
numbers.forEach(num => sum += num)
// better
const sum = numbers.reduce((total, num) => total + num, 0)
对象属性
- 使用
.来访问对象属性
const joke = {
name: 'haha',
age: 28
}
// bad
const name = joke['name']
// good
const name = joke.name
变量声明
- 声明变量时，请使用const、let关键字，如果没有写关键字，变量就会暴露在全局上下文中，这样很可能会和现有变量冲突，另外，也很难明确该变量的作用域是什么。这里推荐使用const来声明变量，我们需要避免全局命名空间的污染。
// bad
demo = new Demo()
// good
const demo = new Demo()
- 将所有的const和let分组
// bad
let a
const b
let c
const d
let e
// good
const b
const d
let a
let c
let e
分号
- 我们遵循Standard规范，不使用分号
// bad
const test = 'good';
(function () {
const str = 'hahaha';
})()
// good
const test = 'good'
;(() => {
const str = 'hahaha'
})();
eval()
由于 eval 方法比较 evil，所以我们约定禁止使用该方法
with() {}
由于 with 方法会产生神奇的作用域，所以我们也是禁止使用该方法的
代码规范
单行代码块
推荐：
function foo() {return true}
if (foo) {bar =0}
推荐：
function foo() { return true }
if (foo) { bar = 0}
大括号风格
在编程过程中，大括号风格与缩进风格紧密联系，用来描述大括号相对代码块位置的方法有很多。在JavaScript中，主要有三种风格，如下：
- One True Brace Style
if (foo) {
bar()
} else {
baz()
}
- Stroustrup
if (foo) {
bar()
}
else {
baz()
}
- Allman
if (foo)
{
bar()
}
else
{
baz()
}
我们团队约定使用 One True Brace Style 风格
变量命名
当命名变量时，主流分为驼峰式命名(variableName)和下划线命名(variable_name)两大阵营
团队约定使用驼峰式命名
拖尾逗号
不使用拖尾逗号
var foo = {
name: 'foo',
age: '22',
}
逗号空格
推荐：
var foo = 1, bar = 2
不推荐：
var foo = 1,bar = 2
var foo = 1 , bar = 2
var foo = 1 ,bar = 2
逗号风格
逗号分隔列表时，在JavaScript中主要有两种逗号风格：
- 标准风格，逗号放置在当前行的末尾
推荐：
var foo = 1,
bar = 2
不推荐：
var foo = 1
,
bar = 2
var foo = 1
,
bar = 2
var foo = ['name'
, 'age']
计算属性地空格
团队约定在对象的计算属性内，禁止使用空格
不推荐：
obj['foo']
obj[ 'foo']
obj[ 'foo' ]
推荐：
obj['foo']
拖尾
在非空文件中，存在拖尾换行是一个常见的UNIX风格，它的好处是可以方便在串联和追加文件时不会打断Shell的提示。在日常的项目中。在日常的项目中，保留拖尾换行的好处是，可以减少版本控制时的代码冲突。
不推荐：
function func () {
// do something
}
推荐：
function func () {
// do something
}
// 此处是新的一行
函数调用
为了避免语法错误，团队约定在函数调用时，禁止使用空格
不推荐：
fn()
fn
()
推荐：
fn()
缩进
代码保持一致的缩进，是作为工程师的职业素养。但缩进用两个空格，还是四个空格，是用Tab还是空格呢？这样的争论太多了，也得不出答案。
那是不是不能使用 Tab 进行缩进了？我们可以通过配置 .editorconfig ，将 Tab 自动转换为空格。
对象字面量的键值缩进
推荐：
var obj = { 'foo': 'haha' }
- 不推荐：*
var obj = { 'foo' : 'haha' }
#### 构造函数首字母大写
在JavaScript中new操作符用来创建某个特定类型的对象的一个实例，该类型的对象是由一个构造函数表示的。由于构造函数只是常规函数，唯一区别是使用new来调用。所以我们团队约定构造函数的首字母要大小，以此来区分构造函数的普通函数。
推荐：
var fooItem = new Foo()
不推荐：
var fooItem = new foo()
构造函数的参数
在JavaScript中，通过new调用构造函数时，如果不带参数，可以省略后面的圆括号。但这样会造成与整体的代码风格不一致，所以团队约定使用圆括号
推荐：
var person = new Person()
不推荐：
var person = new Person
链式调用
链式调用如果放在同一行，往往会造成代码的可读性差，但有些时候，短的链式调用并不会影响美观。所以本规范约定一行最多只能有四个链式 调用，超过就要求换行。
空行
空白行对于分离代码逻辑有帮助，但过多的空行会占据屏幕的空间，影响可读性。团队约定最大连续空行娄为2
推荐：
var a = 1
var b = 2
不推荐：
var a = 1
var b = 2
链式赋值
链式赋值容易造成代码的可读性差，所以团队约定禁止使用链式赋值
不推荐：
var a = b = c = 1
推荐：
var a = 1
var b = 1
var c = 1
变量声明
JavaScript允许在一个声明中，声明多个变量，团队约定在声明变量时，一个声明只能有一个变量
不推荐：
var a, b, c
推荐：
var a
var b
var c
分号
推荐：
不使用分号
var a = 1
var b = 2
代码块空格
一致性是任何风格指南的重要组成部分。
函数声明的空格
命名函数函数名与括号之间没有空格，括号与{}有空格
推荐：
function func(x) {
}
不推荐：
function func (x) {
}
操作符的空格
团队约定操作符前后都需要添加空格
推荐：
var sum = 1 + 2
不推荐：
var sum = 1+2
扫一扫
700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
