前端代码规范

代码规范

DOCTYPE 声明

一个DOCTYPE必须包含以下部分，并严格按照顺序出现：

  • 一个ASCII字符串 “<!DOCTYPE” ，大小写不敏感
  • 一个或多个空白字符
  • 一个ASCII字符串”html”，大小写不敏感
  • 一个可选的历史遗留的DOCTYPE字符串 （DOCTYPE legacy string），或者一个可选的已过时但被允许的DOCTYPE字符串 （obsolete permitted DOCTYPE string） 字符串
  • 一个或多个空白字符
  • 一个编码为 U+003E 的字符 “>”

团队约定

HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

<!DOCTYPE html>

页面语言LANG

Lang属性的取值应该遵循互联网工程任务组–IETF（The Internet Engineering Task Force）制定的关于语言标签的文档 BCP 47 - Tags for Identifying Languages

团队约定

推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

<html lang="zh-CN">

CHARSET

因为 ISO-8859 中字符集大小是有限的，且在多语言环境中不兼容，所以 Unicode 联盟开发了 Unicode 标准。

Unicode 标准覆盖了（几乎）所有的字符、标点符号和符号。

Unicode 使文本的处理、存储和运输，独立于平台和语言。

HTML-5 中默认的字符编码是 UTF-8

团队约定

一般情况下统一使用 “UTF-8” 编码

<meta charset="UTF-8">

Tip: 请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。

元素及标签闭合

HTML元素共有以下5种：

  • 空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
  • 原始文本元素：script、style
  • RCDATA元素：textarea、title
  • 外来元素：来自MathML命名空间和SVG命名空间的元素。
  • 常规元素：其他HTML允许的元素都称为常规元素。

团队约定

为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：

  • 所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
  • 空元素标签都不加 “/” 字符

类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

推荐：

<link rel="stylesheet" href="" >
<script src=""></script>

不推荐：

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

元素属性

  • 元素属性值使用双引号语法
  • 元素属性值可以写上的都写上

推荐：

<input type="text">

<input type="radio" name="name" checked="checked" >

不推荐：

<input type=text>    
<input type='text'>

<input type="radio" name="name" checked >

代码缩进

统一使用二个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

<div class="jdc">
  <a href="#"></a>
</div>

代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选

推荐：

<div>
    <h1></h1>
    <p></p>
</div>    
<p><span></span><span></span></p>

不推荐：

<div>
    <h1></h1><p></p>
</div>    
<p> 
    <span></span>
    <span></span>
</p>

段落元素与标题元素只能嵌套内联元素

推荐：

<h1><span></span></h1>
<p><span></span><span></span></p>

不推荐：

<h1><div></div></h1>
<p><div></div><div></div></p>

 

文件模版

HTML模版指的是团队使用的初始化HTML文件，里面会根据不同平台而采用不一样的设置，一般主要不同的设置就是 mata 标签的设置，以下是 PC 和移动端的 HTML 模版。

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>

</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>

</head>
<body>

</body>
</html>


图片规范

图片格式

团队约定

内容图

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

  • 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
  • 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大

背景图

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

  • PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
  • 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
  • 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
  • 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
  • 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

图片大小

团队约定

中国普通家庭的宽带基本能达到8Mbps，实际速率大约为500—900KB/s，全国3G/4G用户占有比超过了50%，为了保证图片能更好地加载展示给用户看，团队约定：

PC平台单张的图片的大小不应大于 200KB。

移动平台单张的图片的大小不应大于 100KB。

 

图片质量

  • 上线的图片都应该经过压缩处理，压缩后的图片不应该出现肉眼可感知的失真区域。
  • 60质量的JPEG格式图片与质量大于60的相比，肉眼已看不出明显的区别，因此保存 JPEG 图的时候，质量一般控制在60，若保真度要求高的图片可适量提高到 80，图片大小控制在 200KB 以内。

    图片引入

    HTML 中图片引入不需添加 width、height 属性，alt 属性应该写上

    推荐：

    <img src="" alt="" >

    不推荐：

    <img src="" width="" height="" >

    CSS 中图片引入不需要引号

    .bg-course {
    background-image: url(icon.png);
}

    CSS Sprites VS Data URIs

    CSS Sprites特点

    • 减少请求数
    • 加速图片的显示
    • 维护更新成本大
    • 更多的内存消耗，特别是大体积或有过多空白的 Sprites 图
    • 图片渗漏，相邻的不需展示的图片有可能出现在展示元素中，特别是在高清设备移动设备上

    Data URIs（base64编码）

    • 减少请求数
    • 转换文件体积大，大约比原始的二进制大33%
    • IE6 / IE7 不支持
    • 图片显示相对较慢，需要更多的CPU消耗

    更多关于 CSS Sprites 和 Data URIs 可以阅读：

    《When to Base64 Encode Images (and When Not To)》

    《Data URI 最佳实践》

    《Data URI&MHTML: 用还是不用？》

    CSS Sprites vs. Data URIs: Which is Faster on Mobile?

    团队约定

    CSS Sprites 使用建议

    • 适合使用频率高更新频率低的小图标
    • 尽量不留太多的空白
    • 体积较大的图片不合并
    • 确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数

    Data URIs（base64编码）使用建议

    • 适合更新频率高的小图片，如某些具备自定义功能的标题icon等
    • 转换成 Base64 编码的图片应小于 2KB
    • 移动端不使用 Base64 编码
    • 要兼容 IE6/IE7 的不使用


css规范
代码规范

 

团队约定

 

  • 样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
  • 字符 @charset “”; 都用小写字母，不能出现转义符，编码名允许大小混写
  • 考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。（更多关于 BOM 可参考 BOM的介绍 和 「带 BOM 的 UTF-8」和「无 BOM 的 UTF-8」有什么区别？ ）

 

如：

 

@charset "UTF-8";

.lpt{}

 

代码风格

 

代码格式化

 

样式书写一般有两种：一种是紧凑格式 (Compact)

 

.lpt{ display: block;width: 50px;}

 

一种是展开格式（Expanded）

 

.lpt {
    display: block;
    width: 50px;
}

 

团队约定

 

统一使用展开格式书写样式

 

代码大小写

 

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

 

/* 推荐 */
.lpt {
    display:block;
}

/* 不推荐 */
.LPT{
    DISPLAY:BLOCK;
}

 

选择器

 

  • 尽量少用通用选择器 *
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器

 

/* 推荐 */
.lpt {}
.lpt li {}
.lpt li p{}

/* 不推荐 */
*{}
#lpt {}
.lpt div{}

 

代码缩进

 

统一使用二个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

 

.lpt {
  width: 100%;
  height: 100%;
}

 

分号

 

每个属性声明末尾都要加分号；

 

.lpt {
  width: 100%;
  height: 100%;
}

 

代码易读性

 

左括号与类名之间一个空格，冒号与属性值之间一个空格

 

/* 推荐 */
.lpt { 
  width: 100%; 
}
/* 不推荐 */
.lpt{ 
  width:100%;
}

 

逗号分隔的取值，逗号之后一个空格

 

推荐：

 

.lpt {
  box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

 

不推荐：

 

.lpt {
  box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

 

为单个css选择器或新申明开启新行

 

推荐：

 

.lpt, 
.lpt-logo, 
.lpt-hd {
  color: #ff0;
}
.nav {
  color: #fff;
}

 

不推荐：

 

.lpt,lpt_logo,.lpt_hd {
  color: #ff0;
}.nav{
  color: #fff;
}

 

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

 

推荐：

 

.lpt {
  color: rgba(255,255,255,.5);
}

 

不推荐：

 

.lpt {
  color: rgba( 255, 255, 255, 0.5 );
}

 

属性值十六进制数值能用简写的尽量用简写

 

推荐：

 

.lpt {
  color: #fff;
}

 

不推荐：

 

.lpt {
  color: #ffffff;
}

 

不要为 0 指明单位

 

推荐：

 

.lpt {
  margin: 0 10px;
}

 

不推荐：

 

.lpt {
  margin: 0px 10px;
}

 

属性值引号

 

css属性值需要用到引号时，统一使用单引号

 

/* 推荐 */
.lpt { 
    font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.lpt { 
    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 …

 

.lpt {
  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,.5);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

 

mozilla官方属性顺序推荐

 

CSS3浏览器私有前缀写法

 

CSS3 浏览器私有前缀在前，标准前缀在后

 

.lpt {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

 

更多关于浏览器私有前辍写法：#Vendor-specific extensions

 

公共样式

 

移动端

 

* { -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; }

 

js规范

代码规范

编码规范

统一团队的编码规范，有助于代码的维护。

单行代码块

在单行代码块中使用空格

不推荐

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）两大阵营。

团队约定使用驼峰式命名

拖尾逗号

在 ECMAScript5 里面，对象字面量中的拖尾逗号是合法的，但在 IE8（非 IE8 文档模式）下，当出现拖尾逗号，则会抛出错误。

拖尾逗号的例子：

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 = ['name'
          , 'age']

推荐

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
}
  // 此处是新的一行

可以通过 .editorconfig 添加 EOL

函数调用

为了避免语法错误，团队约定在函数调用时，禁止使用空格

不推荐

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

分号

JavaScript 在所有类 C 语言中是比较独特的，它不需要在每个语句的末尾有分号。在很多情况下，JavaScript 引擎可以确定一个分号应该在什么位置然后自动添加它。此特征被称为 自动分号插入 (ASI)，被认为是 JavaScript 中较为有争议的特征。

团队中对于是否应该使用分号，也有许多争论，本规范推荐不使用分号，因为我们认为好的工程师应该知道什么时候该加，什么时候不该加。

相关参考 ：semi

代码块空格

一致性是任何风格指南的重要组成部分。虽然在哪里放置块的开括号纯属个人偏好，但在整个项目中应该保持一致。不一致的风格将会分散读者阅读代码的注意力。

团队约定代码块前要添加空格

不推荐

if (a){
  b()
}

function a (){}

推荐

if (a) {
  b()
}

function a () {}

函数声明的空格

当格式化一个函数，函数名或 function 关键字与左括号之间允许有空白。命名函数要求函数名和 function 关键字之间有空格，但是匿名函数要求不加空格。

团队约定函数括号前要加空格

不推荐

function func(x) {
  // ...
}

推荐

function func (x) {
  // ...
}

操作符的空格

团队约定操作符前后都需要添加空格

不推荐

var sum = 1+2

推荐

var sum = 1 + 2



js语言规范

语言规范

JavaScript 是一种客户端脚本语言，这里列出了编写 JavaScript 时需要遵守的规则。

类型

  • 基本类型

    • 字符串
    • 数值
    • 布尔类型
    • null
    • undefined
    const foo = 1
let bar = foo

bar = 9

console.log(foo, bar) // 1, 9

  • 复杂类型

    • object
    • array
    • function
    const foo = [1, 2, 3]
const bar = foo

bar[0] = 9

console.log(foo[0], bar[0]) // 9, 9

引用

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 += 1
}

// good
let count = 1
if (count < 10) {
  count += 1
}

对象

  • 请使用字面量值创建对象

    // 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
let i

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i]
}

// good
itemsCopy = [...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, xx, xxx, left] = doSomething()

// 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

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

分号

  • 我们遵循 Standard 的规范，不使用分号。

    关于应不应该使用分号的讨论有很多，本规范认为非必要的时候，应该不使用分号，好的 JS 程序员应该清楚场景下是一定要加分号的，相信你也是名好的开发者。

    // bad
const test = 'good';
(function () {
  const str = 'hahaha';
})()

// good
const test = 'good'
;(() => {
  const str = 'hahaha'
})();

标准特性

为了代码的可移植性和兼容性，我们应该最大化的使用标准方法，例如优先使用 string.charAt(3) 而不是 string[3]

eval()

由于 eval 方法比较 evil，所以我们约定禁止使用该方法

with() {}

由于 with 方法会产生神奇的作用域，所以我们也是禁止使用该方法的

for-in 循环

推荐使用 for in 语法，但是在对对象进行操作时，容易忘了检测 hasOwnProperty(key)，所以我们启用了 ESLint 的 guard-for-in 选项

对数组进行 for in 的时候，顺序是不固定的

修改内置对象的原型

不要修改内置对象，如 Object 和 Array

posted @ 2021-06-11 14:37  枫心一语  阅读(220)  评论(0)  编辑  收藏  举报