前端代码规范

最新推荐文章于 2024-05-13 09:46:26 发布

wangliang_001

最新推荐文章于 2024-05-13 09:46:26 发布

阅读量1.1k

点赞数 1

分类专栏：杂谈

本文链接：https://blog.csdn.net/qq_29055201/article/details/105795500

版权

杂谈专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前端代码规范

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

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';
}

属性书写顺序

建议遵循以下顺序：

布局定位属性：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

wangliang_001

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端代码规范

前端代码规范随着前端技术的发展，越来越多的人员加入到了这个领域，随之而来的就是，代码写法上的差异，代码维护难度的增加，所以推出前端代码规范，势在必行。HTML 部分优先使用 IE 最新版本和 Chrome Frame<meta http-equiv="X-UA-Compatible" content=...
复制链接

扫一扫