前端代码规范

前端代码规范

随着前端技术的发展,越来越多的人员加入到了这个领域,随之而来的就是,代码写法上的差异,代码维护难度的增加,所以推出前端代码规范,势在必行。

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&gt;&gt;</a>

不推荐:

<a href="#">more>></a>

代码缩进

在 vue 中,统一使用两个空格进行代码缩进,使得各编辑器表现一致。

<div class="jdc">
  <a href="#">more&gt;&gt;</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';
}
属性书写顺序

建议遵循以下顺序:

  1. 布局定位属性:display/position/float/clear/visibility/overflow
  2. 自身属性:width/height/margin/padding/border/background
  3. 文本属性: color/font/text-decoration/text-align/vertical-align/white-space/break-word
  4. 其他属性(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])

引用

constlet都是块级作用域,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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值