奇陌云店-kimoCloudShop

奇陌云店

----------
一、前言
本规范引自【阿里巴巴前端规约及配套工具】

二、HTML 编码规约
注：本篇规约无配套的 Lint 工具包
1 文档
1.1 文档类型
● 1.1.1【强制】使用 HTML5 DOCTYPE。在 HTML 文档的开头使用 <!DOCTYPE html> 来声明文档的 HTML 版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
</html>

<!DOCTYPE html>
<html>
</html>
1.2 语言
● 1.2.1【推荐】指定 html 标签上的 lang 属性。HTML5 规范中提到：推荐开发者在 html 元素上指定 lang 属性，以指出文档的语言。这有助于读屏、翻译等工具的工作。lang 属性的值由 language-subtags 组成，在 BCP47 中定义，了解更多。
<html lang="zh-CN">
  
</html>
1.3 元数据
● 1.3.1【推荐】使用 UTF-8 字符编码。声明一个明确的字符编码，可以让浏览器更快速高效地确定适合网页内容的渲染方式。由于历史原因，不同浏览器采用了不同的字符编码。但对于新业务，如无特殊要求，统一使用 UTF-8 字符编码，以便统一。在 HTML 中使用 <meta charset="utf-8" /> 声明文档的编码方式：
<head>
  <meta charset="utf-8" />
</head>
● 1.3.2【推荐】页面提供给移动设备使用时，需要设置 viewport。设置 viewport-fit 设置为“cover”来兼容 iPhone X 的刘海屏，了解更多 。<meta name="viewport" content="width=device-width, minimum-scale=1.0, viewport-fit=cover" />
1.4 资源加载
● 1.4.1【推荐】引入 CSS 和 JavaScript 时无需指定 type。根据 HTML5 规范，引入 CSS 和 JavaScript 时通常不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

<link type="text/css" rel="stylesheet" href="example.css" />
<style type="text/css">
  /* ... */
</style>
<script type="text/javascript" src="example.js"></script>

<link rel="stylesheet" href="example.css" />
<style>
  /* ... */
</style>
<script src="example.js"></script>
● 1.4.2【推荐】在 head 标签内引入 CSS，在 body 结束标签前引入 JS。在 <body></body> 中指定外部样式表和嵌入式样式块可能会导致页面的重排和重绘，对页面的渲染造成影响。因此，一般情况下，CSS 应在 <head></head> 标签里引入，了解更多。在 HTTP2（Chrome 浏览器 69 版本之后，Firefox 和 Edge）中可以在 body 中使用 link 标签引入样式文件，但不推荐在 body 中使用 <style> 标签的内联样式。<link rel="stylesheet"> 将会阻止后续内容的渲染，而不是整个页面。除了基础库等必须要在 DOM 加载之前运行的 JavaScript 脚本，其他都在靠近 body 结束标签前引入，以防止出现页面渲染的阻塞，了解更多。

  <!DOCTYPE html>
  <html>
    <head>
      <script src="mod-a.js"></script>
      <script src="jquery.js"></script>
    </head>
    <body>
      <style>
        .mod-example {
          padding-left: 15px;
        }
      </style>
    </body>
  </html>

<!DOCTYPE html>
  <html>
    <head>
      <style>
        .mod-example {
          padding-left: 15px;
        }
      </style>
    </head>
    <body>
      ...
      <script src="path/to/my/script.js"></script>
    </body>
  </html>
● 1.4.3【推荐】外部资源的引用地址跟随页面协议，省略协议部分。<link rel="stylesheet" href="//g.alicdn.com/lib/style/index-min.css" />
● 1.4.4【推荐】使用 preload 预加载关键资源，了解更多。
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
● 1.4.5【推荐】使用 dns-prefetch 和 preconnect 处理 DNS 解析延迟问题，提高网页加载性能，了解更多。
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
1.5 页面标题
● 1.5.1【强制】页面需要指定 title 标签，有且仅有 1 个。
<head>
  <meta charset="utf-8" />
  <title>淘宝网 - 淘！我喜欢</title>
</head>
2 编码
2.1 缩进
● 2.1.1【推荐】统一使用 2 个空格缩进，不要使用 4 个空格或 tab 缩进。
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>
2.2 注释
● 2.2.1【强制】在 HTML 注释代码中，不允许出现任何敏感信息。常见的敏感信息包括：
  ○ 业务相关敏感信息，例如业务规则
  ○ 员工个人隐私信息，例如邮箱、手机、身份证号码
  ○ AK（accessKey id, accesskey secret）
  ○ 证书、密码
  ○ 内网 IP、URL
  ○ 其他公司、员工相关的内部信息、敏感信息
● 2.2.2【推荐】单行注释，需在注释内容和注释符之间需留有一个空格，以增强可读性。
● 2.2.3【推荐】多行注释，注释符单独占一行，注释内容 2 个空格缩进。

2.3 标签
● 2.3.1【强制】标签名统一使用小写。

<H1>Hello, world!</H1>

<h1>Hello, world!</h1>
● 2.3.2【推荐】不要省略自闭合标签结尾处的斜线，且斜线前需留有一个空格。虽然 HTML5 规范 中指出结尾的斜线是可选的，但保留它们可以明确表达该标签已闭合的语义，更易于维护和理解。同时，在 React 被广泛使用的今天，这与 JSX 的规范 相一致，JSX 中自闭合标签必须保留结尾的斜线。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<img src="images/foo.png" alt="foo">

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<img src="images/foo.png" alt="foo" />
2.4 属性
● 2.4.1【强制】属性值使用双引号，不要使用单引号。

<link rel='stylesheet' href='example.css'>

<link rel="stylesheet" href="example.css" />
● 2.4.2【推荐】不要为 Boolean 属性添加取值。XHTML 需要每个属性声明取值，但是 HTML5 并不需要。一个元素中 Boolean 属性存在即表示取值 true，不存在则表示取值 false，了解更多。

<input type="text" disabled="disabled" />
<input type="checkbox" value="1" checked="checked" />
<select>
  <option value="1" selected="selected">1</option>
</select>

<input type="text" disabled />
<input type="checkbox" value="1" checked />
<select>
  <option value="1" selected>1</option>
</select>
● 2.4.3【推荐】自定义属性的命名：以 data- 为前缀。建议自定义属性的命名都以 data- 为前缀，以便区分。

<a modal="toggle" href="#">
  Example link
</a>

<a data-modal="toggle" href="#">
  Example link
</a>
2.5 语义化
● 2.5.1【参考】尽量根据语义使用 HTML 标签。HTML 标签（更严谨的叫法是 HTML 元素）都有其语义，例如 p 标签即“paragraphs”用于章节，a 标签即“anchors”用于锚点链接，了解更多。我们应优先选取符合当下所需语义的标签，这既有助于可访问性（Accessibility），也可以在 CSS 加载失败时获得较好的展示效果。

<div class="list">
  <div class="list-item">1</div>
  <div class="list-item">2</div>
  <div class="list-item">3</div>
</div>

<ul class="list">
  <li class="list-item">1</li>
  <li class="list-item">2</li>
  <li class="list-item">3</li>
</ul>
2.6 可访问性
● 2.6.1【参考】注意 HTML 的可访问性（Accessibility）。网页可访问性使网页内容落实“无障碍”，让不同程度或需求的用户可以顺畅的获取网站上的信息。传统上我们认为这只与残疾人士有关，但提升网站的可访问性也可以让其他用户群体受益，比如使用移动设备的人群或低速网络的人群。例如，为 img 标签设置 alt 属性：

<img src="hello.jpg" />

<img src="hello.jpg" alt="Welcome to visit!" />

<img src="logo.jpg" alt="" />

<img src="logo.jpg" role="presentation" />
了解更多 HTML 可访问性的知识，可以阅读这篇 MDN 的文章。
3. 脚手架模板
根据以上规约，建议的 HTML 脚手架模板如下：
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台" />
    <meta name="keyword" content="淘宝,掏宝,网上购物,C2C" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, viewport-fit=cover" />
    <title>淘宝网</title>
    <link rel="stylesheet" href="example.css" />
  </head>
  <body>
    <div id="container"></div>
    <script src="example.js"></script>
  </body>
</html>
参考资料
● Code Guide by @mdo
● Google HTML/CSS Style Guide

三、JavaScript 编码规约
前言
JavaScript 编码规约主要包含编码风格、语言特性、注释、命名、配套工具等几个部分。本规约面向的 ECMAScript 语言版本是 ES6+，并提供了「关于 ES5」章节供仍在使用 ES5 的开发者查阅。
1 编码风格

上图是一张符合规约要求编码风格的速览图，详细规则如下：
1.1 缩进
● 1.1.1【强制】使用 2 个空格缩进。eslint: indent统一使用 2 个空格缩进，不要使用 4 个空格或 tab 缩进：
// bad
function foo() {
∙∙∙∙let name;
}

// good
function foo() {
∙∙let name;
}
1.2 分号
● 1.2.1【强制】使用分号。eslint: semi统一以分号结束语句，可以避免 JS 引擎自动分号插入机制的怪异行为，在语义上也更加明确。自动分号插入机制（即 Automatic Semicolon Insertion，简称 ASI） 是当 JS 遇到不带分号的语句时判断是否自动添加分号的机制，它在个别情况下的行为比较怪异，可能导致意想不到的效果。此外随着 JS 新特性的增加，异常的情况可能变得更加复杂。
// bad - 导致 Uncaught ReferenceError 报错
const luke = {}
const leia = {}
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader'
})

// good
const luke = {};
const leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

// bad - 导致 Uncaught ReferenceError 报错
const reaction = "No! That's impossible!"
(async function meanwhileOnTheFalcon() {
}())

// good
const reaction = "No! That's impossible!";
(async function meanwhileOnTheFalcon() {
}());

// bad - 函数将返回 `undefined` 而不是换行后的值
function foo() {
  return
    'Result want to be returned'
}

// good
function foo() {
  return 'Result want to be returned';
}
1.3 逗号
● 1.3.1【强制】对于逗号分隔的多行结构，不使用行首逗号。eslint: comma-style
// bad
const story = [
    once
  , upon
  , aTime
];

// good
const story = [
  once,
  upon,
  aTime,
];

// bad
const hero = {
    firstName: 'Ada'
  , lastName: 'Lovelace'
  , superPower: 'computers'
};

// good
const hero = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  superPower: 'computers',
};
● 1.3.2【强制】对于逗号分隔的多行结构，始终加上最后一个逗号。eslint: comma-dangle这样可以使增删行更加容易，也会使 git diffs 更清晰。Babel 等编译器会在编译后的代码里帮我们去掉最后额外的逗号，因此不必担心在旧浏览器中的问题。
// bad - 没有结尾逗号时，新增一行的 git diff 示例
const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing']
};

// good - 有结尾逗号时，新增一行的 git diff 示例
const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};
1.4 块
术语解释：块（block） 可以理解为类、函数、控制语句等由大括号 {} 分隔的代码块状结构，由一对大括号界定，用于组合若干条语句 了解更多
● 1.4.1【推荐】始终使用大括号包裹代码块。eslint: curlynonblock-statement-body-position多行代码块必须用大括号包裹：
// bad
if (foo)
  bar();
  baz(); // 这一行并不在 if 语句里

// good
if (foo) {
  bar();
  baz();
}
代码块只有一条语句时，可以省略大括号，并跟控制语句写在同一行。但出于一致性和可读性考虑，不推荐这样做：
1.4.2 大括号换行风格
● 1.4.2.1【强制】对于非空代码块，采用 Egyptian Brackets 风格。eslint: brace-style对于非空的代码块，大括号的换行方式采用 Egyptian Brackets 风格，具体规则如下：
  ○ 左大括号 { 前面不换行，后面换行
  ○ 右大括号 } 前面换行
  ○ 右大括号 } 后面是否换行有两种情况：
    ■ 如果 } 终结了整个语句，如条件语句、函数或类的主体，则需要换行
    ■ 如果 } 后面存在 else、catch、while 等语句，或存在逗号、分号、右小括号（)），则不需要换行
// bad - else 应与 if 的 } 放在同一行
if (foo) {
  thing1();
}
else
  thing2();
}

// good
if (foo) {
  thing1();
} else {
  thing2();
}
● 1.4.2.2【参考】对于空代码块，可以将大括号直接闭合。对于空的代码块，且不在类似 if..else.. 或 try..catch..finally.. 的多块结构中时，可以立即将大括号闭合：
// good
function doNothing() {}
但如果空代码块在多块结构中，仍建议按上一条非空块的 Egyptian Brackets 风格换行：
● 1.4.3【强制】不要使用空代码块。eslint: no-empty不要让代码中出现空代码块，这会使阅读者感到困惑。如果必须使用空块，需在块内写明注释。
// bad
if (condition) {
  thing1();
} else {
}

// good
if (condition) {
  thing1();
} else {
  // TODO I haven’t determined what to do.
}
1.5 空格
合理并一致地使用空格有助于提升代码的可读性和可维护性。具体来说，我们采用如下的空格风格：
● 1.5.1【强制】空格风格。eslint: space-before-blockskeyword-spacingspace-in-parensarray-bracket-spacingobject-curly-spacingspace-infix-opskey-spacing块的左大括号 { 前有一个空格：
// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});
控制语句（if、while 等）的左小括号 ( 前有一个空格：声明函数时，函数名和参数列表之间无空格：小括号内部两侧无空格：方括号内部两侧无空格：大括号内部两侧有空格：运算符两侧有空格，除了一元运算符：定义对象字面量时， key, value 之间有且只有一个空格，不允许所谓的「水平对齐」：
1.6 空行
● 1.6.1【推荐】在文件末尾保留一行空行。eslint: eol-last在非空文件中保留拖尾换行是一种常见的 UNIX 风格。它的好处同输出文件到终端一样，方便在串联和追加文件时不会打断 shell 的提示。我们统一在文件末尾保留一行空行，即用一个换行符结束文件：
// bad - 文件末尾未保留换行符
import { foo } from './Foo';
// ...
export default foo;

// bad - 文件末尾保留了2个换行符
import { foo } from './Foo';
// ...
export default foo;↵
↵

// good
import { foo } from './Foo';
// ...
export default foo;↵
● 1.6.2【强制】块的开始和结束不能是空行。eslint: padded-blocks
// bad
function bar() {

console.log(foo);

}

// good
function bar() {
  console.log(foo);
}

// bad
if (baz) {

console.log(qux);
} else {
  console.log(foo);

}

// good
if (baz) {
  console.log(qux);
} else {
  console.log(foo);
}
● 1.6.3【参考】在块末和新语句间插入一个空行。
// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
const obj = {
  foo() {
  },
  bar() {
  },
};
return obj;

// good
const obj = {
  foo() {
  },

bar() {
  },
};

return obj;
1.7 最大字符数和最大行数
● 1.7.1【推荐】单行最大字符数：100。eslint: max-len过长的单行代码不易阅读和维护，需要进行合理换行。我们推荐单行代码最多不要超过 100 个字符，除了以下两种情况：
  ○ 字符串和模板字符串
  ○ 正则表达式
// bad
const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;

// good
const foo = jsonData
  && jsonData.foo
  && jsonData.foo.bar
  && jsonData.foo.bar.baz
  && jsonData.foo.bar.baz.quux
  && jsonData.foo.bar.baz.quux.xyzzy;

// bad
$.ajax({ method: 'POST', url: 'https://foo.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));

// good
$.ajax({
  method: 'POST',
  url: 'https://foo.com/',
  data: { name: 'John' },
})
  .done(() => console.log('Congratulations!'))
  .fail(() => console.log('You have failed this city.'));
● 1.7.2【参考】文件最大行数：1000。eslint: max-lines过长的文件不易阅读和维护，最好对其进行拆分。
● 1.7.3【参考】函数最大行数：80。eslint: max-lines-per-function过长的函数不易阅读和维护，最好对其进行拆分。
2 语言特性
2.1 变量声明
● 2.1.1【强制】使用 const 或 let 声明变量。eslint: no-varno-undef从 ES6 开始，可以使用 let 和 const 关键字在块级作用域下声明变量。块级作用域在很多其他编程语言中都有使用，这样声明的变量不会污染全局命名空间。不要使用 var：
// bad
var foo = 'foo';
var bar;

// good
const foo = 'foo';
let bar;
更不要什么都不用（这将产生全局变量，从而污染全局命名空间）：
● 2.1.2【强制】正确地使用 const 和 let。eslint: prefer-const声明变量时，应优先使用 const，只有当变量会被重新赋值时才使用 let：
// bad - 声明后未发生重新赋值，应使用 const
let flag = true;
if (flag) {
  console.log(flag);
}

// good - 声明后发生重新赋值，let 使用正确
let flag = true;
if (flag) {
  flag = false;
}
需注意，数组和对象是一个引用，对数组某项和对象某属性的修改并不是重新赋值，因此多数情况下应用 const 声明：
● 2.1.3【强制】一条声明语句声明一个变量。eslint: one-var这样做更易于追加新的声明语句（你不需要总去把最后的 ; 改成 , 了），也更易于进行单步调试。
// bad
const foo = 1,
      bar = 2;

// good
const foo = 1;
const bar = 2;
● 2.1.4【强制】声明的变量必须被使用。eslint: no-unused-vars声明而未使用的变量、表达式可能带来潜在的问题，也会给维护者造成困扰，应将它们删除。
// bad - 未使用变量 foo
const foo = 1;

// good
const foo = 1;
doSomethingWith(foo);

// bad - 只修改变量不认为是被使用
let bar = 1;
bar = 2;
bar += 1;

// good
let bar = 1;
bar = 2;
bar += 1;
doSomethingWith(bar);

// bad - 未使用参数 y
function getX(x, y) {
  return x;
}

// good
function getXPlusY(x, y) {
  return x + y;
}
● 2.1.5【强制】不要在声明前就使用变量。eslint: no-use-before-define在 ES5 中，由于 var 的声明提升作用，变量可以在声明前使用，但这样做可能给人带来疑惑和隐患，所以不要在声明前就使用变量：
// bad
console.log(foo); // => undefined
var foo = 'foo';

// good
var foo = 'foo';
console.log(foo); // => foo
在 ES6 中，由于 const 和 let 没有声明提升作用，如果在声明前就使用变量，会直接报错：
● 2.1.6【参考】哪里使用，哪里声明。在变量被使用前再进行声明，而不是统一在块开始处进行声明。ES6 提供的 let 和 const 是块级作用域，不存在类似 var 的声明提升的问题。因此我们可以把声明写在更合理的地方（一般是变量被使用前），而不是统一在块开始处进行声明。
// bad - 如果权限校验（checkUserPermission）失败，fetchData 是不必要的
function getData(id) {
  const data = fetchData(id);

if (!checkUserPermission()) {
    return false;
  }

if (data.foo === 'bar') {
    // ...
  }

return data;
}

// good
function getData(id) {
  if (!checkUserPermission()) {
    return false;
  }

const data = fetchData(id);

if (data.foo === 'bar') {
    // ...
  }

return data;
}
● 2.1.7【强制】变量不要与外层作用域已存在的变量同名。eslint: no-shadow如果变量与外层已存在变量同名，会降低可读性，也会导致内层作用域无法读取外层作用域的同名变量。
// bad
const foo = 1;
if (someCondition) {
  const foo = 2;
  console.log(foo); // => 2
}

// good
const foo = 1;
if (someCondition) {
  const bar = 2;
  console.log(bar); // => 2
  console.log(foo); // => 1
}
● 2.1.8【强制】不要重复声明变量和函数。eslint: no-redeclare在 ES5 中，尽管使用 var 重复声明不会报错，但这样做会令人疑惑，降低程序的可维护性。同理，函数的声明也不要与已存在的变量和函数重名：
// bad
var a = 'foo';
var a = 'bar';
function a() {}
console.log(a); // => 'bar'

// good
var a = 'foo';
var b = 'bar';
function c() {}
console.log(a); // => 'foo'

// bad - arg 已作为函数参数声明
function myFunc(arg) {
  var arg = 'foo';
  console.log(arg);
}
myFunc('bar'); // => 'foo'

// good
function myFunc(arg) {
  var otherName = 'foo';
  console.log(arg);
}
myFunc('bar'); // => 'bar'
在 ES6 中，使用 const 或 let 重复声明变量会直接报错：
● 2.1.9【强制】禁止连续赋值。eslint: no-multi-assign变量的连续赋值让人难以阅读和理解，并且可能导致意想不到的结果（如产生全局变量）。
// bad - 本例的结果是 let 仅对 a 起到了预想效果，b 和 c 都成了全局变量
(function test() {
  let a = b = c = 1; // 相当于 let a = (b = (c = 1));
})();

console.log(a); // throws ReferenceError
console.log(b); // 1
console.log(c); // 1

// good
(function test() {
  let a = 1;
  let b = a;
  let c = a;
})();

console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError
● 2.1.10【参考】将 let 和 const 分别归类。将 let 和 const 归类写在一起，可以提高代码整洁性。此外，如果你想按变量的含义排序分组也是允许的。
// bad
let a;
const b = 2;
let c;
const d = 4;
let e;

// good
const b = 2;
const d = 4;
let a;
let c;
let e;
2.2 原始类型
JS的数据类型包括 7 种原始类型（primitive type），即 Boolean, Null, Undefined, Number, String, Symbol (ES6 新定义), BigInt（ES11新定义），以及 Object 类型，了解更多。这个章节主要介绍原始类型相关的规约。
● 2.2.1【强制】不要使用 new Number/String/Boolean。eslint: no-new-wrappers使用 new Number/String//Boolean 声明不会有任何好处，还会导致变量成为 object 类型，可能引起 bug。
// bad
const num = new Number(0);
const str = new String('foo');
const bool = new Boolean(false);
console.log(typeof num, typeof str, typeof bool); // => object, object, object
if (num) { // true（对象相当于 true）
}
if (bool) { // true（对象相当于 true）
}

// good
const num = 0;
const str = 'foo';
const bool = false;
console.log(typeof num, typeof str, typeof bool); // => number, string, boolean
if (num) { // false（0 相当于 false）
}
if (bool) { // false
}
● 2.2.2【推荐】类型转换。【数字】使用 Number() 或 parseInt() ：
const str = '1';

// bad
  const num = +str;
  const num = str >> 0;
  const num = new Number(str);

// good
  const num = Number(str);

// good
  const num = parseInt(str, 10);
【字符串】使用 String()：【布尔值】使用 !!：
● 2.2.3【推荐】使用 parseInt() 方法时总是带上基数。eslint: radixparseInt 方法的第一个参数是待转换的字符串，第二个参数是转换基数。当第二个参数省略时，parseInt 会根据第一个参数自动判断基数：
  ○ 如果以 0x 开头，则使用 16 作基数
  ○ 如果以 0 开头，则使用 8 作基数。正是这条规则经常导致错误，ES5 规范中直接将这条规则移除，即 ES5 及之后的执行环境以 0 开头也会使用 10 作为基数
  ○ 其他情况则使用 10 作基数
● 虽然从 ES5 开始就移除了自动以 8 作基数的规则，但有时难以保证所有的浏览器和 JS 执行环境都支持了这一特性。了解更多因此，推荐始终给 parseInt() 方法加上基数，除非可以保证代码的执行环境不受上述特性的影响。
// bad
parseInt("071"); // => ES5 前的执行环境中得到的是 57

// good
parseInt("071", 10); // => 71
● 2.2.4【强制】避免不必要的布尔类型转换。eslint: no-extra-boolean-cast在 if 等条件语句中，将表达式的结果强制转换成布尔值是多余的：
// bad
if (!!foo) {
  // ...
}

while (!!foo) {
  // ...
}

const a = !!flag ? b : c;

// good
if (foo) {
  // ...
}

while (foo) {
  // ...
}

const a = flag ? b : c;
2.2.5 字符串
● 2.2.5.1【强制】字符串优先使用单引号。eslint: quotes
// bad
const name = "tod";
const name = `tod`; // 模板字符串中应包含变量或换行，否则需用单引号

// good
const name = 'tod';
● 2.2.5.2【推荐】使用模板字符串替代字符串拼接。eslint: prefer-template模板字符串让代码更简洁，可读性更强
// bad
function getDisplayName({ nickName, realName }) {
  return nickName + ' (' + realName + ')';
}

// good
function getDisplayName({ nickName, realName }) {
  return `${nickName} (${realName})`;
}
● 2.2.5.3【强制】禁止不必要的转义字符。no-useless-escape转义字符会大大降低代码的可读性，因此尽量不要滥用它们。
// bad
const foo = '\'this\' \i\s \"quoted\"';

// good
const foo = '\'this\' is "quoted"';
const foo = `'this' is "quoted"`;
2.3 数组
● 2.3.1【强制】使用字面量创建数组。eslint: no-array-constructor不要使用 new Array() 和 Array() 创建数组，除非为了构造某一长度的空数组。
// bad
const a = new Array(1, 2, 3);
const b = Array(1, 2, 3);

// good
const a = [1, 2, 3];
const b = new Array(500); // 构造长度为 500 的空数组
● 2.3.2【强制】某些数组方法的回调函数中必须包含 return 语句。eslint: array-callback-return以下数组方法：map, filter, from, every, find, findIndex, reduce, reduceRight, some, sort 的回调函数中必须包含 return 语句，否则可能会产生误用或错误。一个常见的误用是，本该用 forEach 的场景却用了 map：
// 欲将 ['a', 'b', 'c'] 转换成 {a: 0, b: 1, c: 2}
const myArray = ['a', 'b', 'c'];
const myObj = {};

// bad - map 应用于构建一个新数组，单纯想遍历数组应使用 forEach
myArray.map((item, index) => {
  myObj[item] = index;
});

// good
myArray.forEach((item, index) => {
  myObj[item] = index;
});
某些方法漏掉 return 还可能引起错误：
● 2.3.3【推荐】使用扩展运算符 ... 处理数组。ES6 提供了扩展运算符 ...，可以简化一些数组操作。数组复制：
// bad
const array1 = [];
for (let i = 0; i < array.length; i += 1) {
  array1[i] = array[i];
}

// bad
const array1 = array.map(item => item);

// good
const array1 = [...array];
将类数组结构（有 Iterator 接口的对象）转换为数组：数组拼接：用 ... 替代 apply：特殊的，遍历可迭代对象时，使用 Array.from 而不是 ...，以免创建一个临时数组：
● 2.3.4【推荐】使用解构获取数组元素。使用 ES6 提供的解构方法获取数组元素：
// bad
const arr = [1, 2, 3, 4];
const first = arr[0];
const second = arr[1];

// good
const arr = [1, 2, 3, 4];
const [first, second] = arr;
函数有多个返回值时，应使用对象解构而不是数组解构，因为数组解构需要考虑返回值的位置：
2.4 对象
● 2.4.1【强制】使用字面量创建对象。eslint: no-new-object
// bad
const obj = new Object();

// good
const obj = {};
● 2.4.2【强制】使用对象属性和方法的简写语法。eslint: object-shorthandES6 提供了对象属性和方法的简写语法，可以使代码更加简洁：
const value = 'foo';

// bad
const atom = {
  value: value,
  addValue: function (value) {
    return value + ' added';
  },
};

// good
const atom = {
  value,
  addValue(value) {
    return value + ' added';
  },
};
● 2.4.3【参考】将对象的简写属性写在一起。将简写的属性写在一起，置于对象的起始或末尾，可以提高代码整洁性。当然，如果你出于属性的含义或其他考虑进行排序也是允许的。
const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};
● 2.4.4【强制】对象的属性名不要用引号包裹，除非包含特殊字符。eslint: quote-props这样更加简洁，也有助于语法高亮和一些 JS 引擎的优化。
// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
  'one two': 12,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
  'one two': 12,
};
● 2.4.5【强制】优先使用 . 访问对象的属性。eslint: dot-notation这样可以提高代码可读性。[] 仅应在访问动态属性名或包含特殊字符的属性名时被使用。
const obj = {
  active: true,
  [getDynamicKey()]: 'foo',
  'data-bar': 'bar',
};

// bad
const isActive = obj['active'];

// good
const isActive = obj.active;
const foo = obj[getDynamicKey()];
const bar = obj['data-bar'];
● 2.4.6【推荐】使用扩展运算符 ... 处理对象。替代 Object.assign 方法，来进行对象的浅拷贝：
// very bad - original 会被影响
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }  original => { a: 1, b: 2, c: 3 }
delete copy.a; // copy => { b: 2, c: 3 }  original => { b: 2, c: 3 }

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
获取排除某些属性的新对象：
● 2.4.7【推荐】使用解构获取对象属性。eslint: prefer-destructuring获取对象的同名属性、多个属性时，使用解构让代码更简洁，也可以减少为了使用属性而创建的临时引用。
// 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}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}
● 2.4.8【参考】对象的动态属性名应直接写在字面量定义中。ES6 允许在新建对象字面量时使用表达式作为属性名，这样可以将所有属性定义在一个地方。
function getKey(k) {
  return `a key named ${k}`;
}

// bad
const obj = {
  id: 1,
  name: 'tod',
};
obj[getKey('foo')] = 'foo';

// good
const obj = {
  id: 1,
  name: 'tod',
  [getKey('foo')]: 'foo',
};
● 2.4.9【强制】不要直接在对象上调用 Object.prototypes 上的方法。eslint: no-prototype-builtins不要直接在对象上调用 Object.prototypes 上的方法，例如 hasOwnProperty、propertyIsEnumerable、isPrototypeOf。这些方法可能会被对象上的属性覆盖，导致错误：
const obj = {
  foo: 'foo',
  hasOwnProperty: false,
};
const objNull = Object.create(null);

// bad => Uncaught TypeError: obj.hasOwnProperty is not a function
console.log(obj.hasOwnProperty('foo'));
console.log(objNull.hasOwnProperty('foo'));

// good
console.log(Object.prototype.hasOwnProperty.call(obj, 'foo'));
console.log(Object.prototype.hasOwnProperty.call(objNull, 'foo'));
2.5 函数
● 2.5.1【强制】不要用 Function 构造函数创建函数。eslint: no-new-func使用 new Function 创建函数会像 eval() 方法一样执行字符串，带来安全隐患
// bad
const sum = new Function('a', 'b', 'return a + b');

// good
const sum = (a, b) => (a + b);
● 2.5.2【强制】不要在块中使用函数声明。eslint: no-inner-declarations在非函数块（如 if、while 等）中，不要使用函数声明：
// bad - 函数声明不是块作用域而是函数作用域，因此在块外也能使用函数，容易引起误解
if (true) {
  function test() {
    console.log('test');
  }
}
test(); // => test

// good - 函数表达式可以清晰地说明函数能否在块外使用
// 不能在块外使用
if (true) {
  const test = function () {
    console.log('test');
  };
}
test(); // => Uncaught ReferenceError: test is not defined

// 能在块外使用
let test;
if (true) {
  test = function () {
    console.log('test');
  };
}
test(); // => test
● 2.5.3【参考】使用函数表达式替代函数声明。这样可以保证函数不能在定义前被调用。函数声明会被提升到当前作用域的顶部，因此函数可以在声明语句前就被调用，这会影响代码的可读性与可维护性。
// bad
function foo() {
  // ...
}

// good
const foo = () => {
  // ...
};

const foo = function () {
  // ...
};

// 有些规范提出，应该给函数表达式起一个不同于被赋值变量名的名字，以达到易于调试、查看错误堆栈等目的
// 事实上，代码在目前浏览器中或者经过 Babel 转码后，匿名函数表达式也能够方便地查看堆栈。所以除非你出于某些目的想给函数起一个不同于被赋值变量的名字，否则直接使用匿名函数表达式
const foo = function foo_more_descriptive_name() {
  // ...
};
● 2.5.4【强制】使用箭头函数代替匿名函数。eslint: prefer-arrow-callbackES6 提供的箭头函数可以解决 this 指向的问题，而且语法更简洁。
// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});
● 2.5.5【推荐】箭头函数编码风格。eslint: arrow-parensarrow-body-style箭头函数参数的小括号、函数体的大括号在某些时候可以省略，这可能导致风格的不统一，因此需要规范其编码风格：
  ○ 函数体风格当函数体只包含一条 return 语句时，可以省略函数体大括号和 return，以使代码更简洁。我们推荐使用这个 ES6 提供的语法糖，它可以让书写和阅读更简洁。但你也可以选择始终加上大括号和 return，以方便后续在函数体内增加语句。
  ○ 函数参数风格当函数只有一个参数，且函数体为 return 简写语法时，可以省略包裹参数的小括号以使代码更简洁。我们建议仅在这种情况下省略包裹参数的小括号，其余情况都不要省略小括号。但你也可以选择始终加上小括号，以方便后续可能要增加参数。
// good - 函数体包含多条语句时，始终加上大括号
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

// good - 函数体只包含一条 `return` 语句时，可以也建议省略大括号和 `return`
[1, 2, 3].map(number => `A string containing the ${number + 1}.`);

// good - 也可以选择始终不省略大括号，不使用简写语法糖，以方便后续在函数体内增加语句
[1, 2, 3].map((number) => {
  return `A string containing the ${number + 1}.`;
});
当 return 的内容为对象或者有多行时，需要用小括号包裹：
// good - 未使用 return 简写语法时，参数始终加上小括号
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

// good - 使用 return 简写语法、且只有一个参数时，可以也建议省略参数的小括号
[1, 2, 3].map(x => x * x);

// good - 也可以选择始终不省略参数的小括号，以方便后续可能要增加参数
[1, 2, 3].map((x) => x * x);
● 2.5.6【强制】不要将函数参数命名为 arguments。这会覆盖掉函数作用域中的 arguments 对象。
// bad
function foo(name, options, arguments) {
  // ...
}

// good
function foo(name, options, args) {
  // ...
}
● 2.5.7【强制】不要使用 arguments 对象。eslint: prefer-rest-params不要使用 arguments 对象，使用剩余参数操作符 ... 代替。ES6 提供了 rest 操作符 ...，与 arguments 相比可以更清晰地聚合函数的剩余参数。此外， ... 得到的是一个真正的数组，而 arguments 得到的则是类数组结构。
// bad
function foo(a, b) {
  const args = Array.prototype.slice.call(arguments, foo.length);
  console.log(args);
}
foo(1, 2, 3, 4); // => [3, 4]

// good
function foo(a, b, ...args) {
  console.log(args);
}
foo(1, 2, 3, 4); // => [3, 4]
● 2.5.8【推荐】使用默认参数语法。ES6 中引入了默认参数语法，相比之前为参数赋默认值的方法更加简洁、可读性更好。重新对参数赋值是不推荐的行为，且当参数的布尔类型转换结果是 false 时可能会错误地被赋予默认值。因此，当函数参数需要默认值时，使用默认参数语法，而不是去修改参数：
// bad
const multiple = (a, b) => {
  a = a || 0;
  b = b || 0;
  return a * b;
}

// good
const multiple = (a = 0, b = 0) => {
  return a * b;
}
● 2.5.9【推荐】有默认值的函数参数需要放到参数列表的最后。否则你将无法享受到默认参数的便利，只能通过传 undefined 触发参数使用默认值。
// bad
function multiply(a = 1, b) {
  return a * b;
}
const x = multiply(42); // => NaN
const y = multiply(undefined, 42); // => 42

// good
function multiply(a, b = 1) {
  return a * b;
}
const x = multiply(42); // => 42
● 2.5.10【推荐】不要修改函数参数。eslint: no-param-reassign不要修改引用类型的参数，这可能导致作为入参的原变量发生变化：
// bad
const f1 = function f1(obj) {
  obj.key = 1;
}
const originalObj = { key: 0 };
f1(originalObj);
console.log(originalObj); // => { key: 1 }

// good
const f2 = function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}
更不要给参数重新赋值，这可能导致意外的行为和内核优化问题：
● 2.5.11【强制】将立即执行函数表达式（IIFE）用小括号包裹。eslint: wrap-iifeIIFE 是一个独立的执行单元，将它用小括号包裹可以更清晰的体现这点。需要提醒的是，由于 ES6 模块语法的引入，你可能不再需要使用 IIFE 了。
(function () {
  console.log('Welcome to the Internet. Please follow me.');
}());
● 2.5.12【参考】函数的复杂度不应过高。eslint: complexity过高的复杂度意味着代码难以维护和测试。我们推荐函数的复杂度不要超过以下阈值：
  ○ 圈复杂度不超过 10
  ○ 认知复杂度不超过 15
● 2.5.13【参考】函数的参数不应过多。eslint: max-params如果函数的参数过多，将不利于函数的维护和调用。这时你需要考虑是否函数做了太多的事情，是否有必要对其进行拆分。如果必须使用过多的参数，可以考虑用对象代替参数列表：
// bad
function doSomething(param1, param2, param3, param4, param5, param6, param7, param8) {
  // ...
}
doSomething(1, 2, 3, 4, 5, 6, 7, 8);

// good
function doSomething({ param1, param2, param3, param4, param5, param6, param7, param8 }) {
  // ...
}
doSomething({ param1: 1, param2: 2, param3: 3, param4: 4, param5: 5, param6: 6, param7: 7, param8: 8 });
● 2.5.14【强制】generator 函数内必须有 yield 语句。eslint: require-yield如果一个 generator 中没有 yield 语句，那么这个 generator 就不是必须的。
// bad
function* foo() {
  return 10;
}

// good
function* foo() {
  yield 5;
  return 10;
}
● 2.5.15【参考】优先使用 JS 提供的高阶函数进行迭代运算。需要迭代运算时，应优先使用 JS 提供的高阶函数，减少直接使用 for 循环（包括 for-in 和 for-of）。如使用 map() / every() / filter() / find() / findIndex() / reduce() / some() / ... 来迭代数组，使用 Object.keys() / Object.values() / Object.entries() 方法来迭代对象
const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}
console.log(sum); // => 15;

// good
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
console.log(sum); // => 15;

// best
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // => 15;

// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
}

// good
const increasedByOne = [];
numbers.forEach((num) => {
  increasedByOne.push(num + 1);
});

// best
const increasedByOne = numbers.map(num => num + 1);
2.6 类
● 2.6.1【推荐】使用 class 语句声明类，而不是使用 prototype。class 语句是 ES6 中引入的用于声明类的语法糖，更加简洁易维护。
// bad
function Person() {
  this.age = 1;
}
Person.prototype.growOld = function () {
  this.age += 1;
}

// good
class Person {
  constructor() {
    this.age = 1;
  }
  growOld() {
    this.age += 1;
  }
}
● 2.6.2【推荐】使用 extends 语句进行类的继承。extends 是用于原型继承的内建方法，不会破坏 instanceof。
// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
  return this.queue[0];
};

// good
class PeekableQueue extends Queue {
  peek() {
    return this.queue[0];
  }
}
● 2.6.3【强制】避免不必要的 constructor。ES6 class 会提供一个默认的 constructor，空 constructor 或者只调用父类的 constructor 是不必要的。eslint: no-useless-constructor
// bad - 以下两种 constructor 可以省略
class Parent {
  constructor() {
  }

method() {
    // ...
  }
}

class Child extends Parent {
  constructor (value) {
    super(value);
  }

method() {
    // ...
  }
}

// good
class Parent {
  method() {
    // ...
  }
}

class Child extends Parent {
  method() {
    // ...
  }
}
● 2.6.4【强制】正确地使用 super 方法。eslint: constructor-superno-this-before-super
  ○ 子类的 constructor 中必须使用 super()，且必须在 this 和 super 关键词前调用
  ○ 非子类的 constructor 中不能使用 super()
// bad - 非子类不能使用 super
class Parent {
  constructor() {
    super();
    this.name = 'parent';
  }
}

// good
class Parent {
  constructor() {
    this.name = 'parent';
  }
}

// bad - 子类必须使用 super
class Child extends Parent {
  constructor() {
    this.name = 'child';
  }
}

// bad - this 必须在调用 super 后使用
class Child extends Parent {
  constructor() {
    this.name = 'foo';
    super();
  }
}

// good
class Child extends Parent {
  constructor (value) {
    super(value);
    this.name = 'foo';
  }
}
● 2.6.5【强制】避免重复的类成员命名。eslint: no-dupe-class-members重复的类成员声明最终生效的将是最后一个：
// bad
class Foo {
  bar() { console.log('bar'); }
  bar() { console.log('baz'); }
}
const foo = new Foo();
foo.bar(); // => baz

// good
class Foo {
  bar() { console.log('bar'); }
}
2.7 模块
● 2.7.1【推荐】使用 ES6 modules 而非其他非标准的模块系统。eslint: import/module-systems使用 ES6 modules (import/export)，而不是其他非标准的模块系统，如 CommonJS、AMD、CMD。ES6 modules 作为标准代表着未来，让我们拥抱未来吧。
// bad
const React = require('react');
module.exports = React.Component;

// good
import React, { Component } from 'react';
export default Component;
● 2.7.2【强制】不要用多个 import 引入同一模块。eslint: import/no-duplicates多条 import 语句引入了同一模块会降低可维护性，你需要将它们合成一条语句。
// bad
import React from 'react';
import { Component }  from 'react';

// good
import React, { Component } from 'react';
● 2.7.3【强制】import 语句需要放到模块的最上方。eslint: import/first由于 import 语句会被声明提升，将它们放到模块的最上方以防止异常行为。
// bad
import foo from 'foo';
foo.init();

import bar from 'bar';
bar.init();

// good
import foo from 'foo';
import bar from 'bar';

foo.init();
bar.init();
● 2.7.4【强制】禁止 default import 的名字跟文件内的其他 export 命名相同。eslint: import/no-named-as-default
// foo.js
export default 'foo';
export const bar = 'bar';

// bad
import bar from './foo.js';

// good
import foo from './foo.js';
● 2.7.5【强制】禁止引用自身。eslint: import/no-self-import
● 2.7.6【强制】禁止循环引用。eslint: import/no-cycle
● 2.7.7【推荐】不要在 default export 上使用一个已导出的名称作为属性。eslint: import/no-named-as-default-member
// foo.js
export default 'foo';
export const bar = 'bar';

// bad
import foo from './foo.js';
const bar = foo.bar; // or
const { bar } = foo;

// good
import foo, { bar } from './foo.js';
● 2.7.8【推荐】在模块导入之后保留一个空行。eslint: import/newline-after-import
// bad
import foo from './foo.js';
const FOO = 'FOO'

// good
import foo from './foo.js';

const FOO = 'FOO'
● 2.7.9【参考】import 语句的排序。eslint: import/orderimport 语句建议按以下规则排序：
  ○ 先 import 第三方模块，再 import 自己工程里的模块
  ○ 先 import 绝对路径，再 import 相对路径
// bad
import foo from 'components/foo';
import './index.scss';
import React from 'react';

// good
import React from 'react';
import foo from 'components/foo';
import './index.scss';
● 2.7.10【参考】当模块内只有一个 export 时，使用 default export。eslint: import/prefer-default-export我们也建议文件内只包含一个 export，这有利于代码的可维护性。
// bad
export function foo() {}

// good
export default function foo() {}
● 2.7.11【参考】不要在 import 时直接 export。虽然一行代码更简洁，但这不利于代码的可读性和一致性。
// bad
export { Com as Component } from 'react';

// good
import { Component } from 'react';

export default Component;
● 2.7.12【参考】模块开发者选择EMS和CJS时，需要判断运行时环境：如果你的模块是只面向浏览器的则选择ESM；如果你的模块是只面向Node.js的则选择CJS，并且确定遵循CJS命名空间规则；如果你的模块是2者都要兼容的，则ESM和CJS都要支持。Node.js的模块，历史上Node.js遵循的是CommonJS，因此ES6 Module会有比较严重的兼容性问题。暂时没有特别好的解法，只能在Node.js中跟进运行时环境，判断使用模块标准。讨论issue
2.8 操作符
● 2.8.1【推荐】使用严格相等运算符。eslint: eqeqeq非严格相等运算符（== 和 !=）会在比较前将被比较值转换为相同类型，对于不熟悉 JS 语言特性的人来说，这可能造成不小的隐患。了解更多因此，一般情况下我们应该使用严格比较运算符（ === 和 !==）进行比较。如果要比较的两个值类型不同，应该显性地将其转换成相同类型再进行严格比较，而不是依赖于 == 和 != 的隐式类型转换。
const id = '83949';

// bad - 为了兼容 id 可能是字符串的情况，而有意使用 == 与数字比较
if (id == 83949) {
  // do something
}

// good - 如果 id 可能是字符串，应该先将其进行类型转换，再使用 === 进行比较
if (Number(id) === 83949) {
  // do something
}
● 2.8.2【强制】不要使用一元自增自减运算符。eslint: no-plusplus不要使用一元自增自减运算符（++ 和 --），除非在 for 循环条件中。++ 和 -- 会带来值是否会提前变化带来的理解成本，也可能因为自动添加分号机制导致一些错误，因此我们推荐使用 num += 1 来代替 num++。但出于习惯，在 for 循环的条件中依然可以使用自增自减运算符。
let num = 1;

// bad
num++;
--num;

// good
num += 1;
num -= 1;
● 2.8.3【强制】不要使用 void 运算符。eslint: no-void在很老版本的 JS 中，undefined 值是可变的，因此使用 void 语句一般是用来得到一个 undefined 值。而在新版本的 JS 中，上面的问题已不复存在。因此出于程序可读性的考虑，禁止使用 void 运算符。
// bad
const foo = void 0;

// good
const foo = undefined;
● 2.8.4【强制】避免嵌套的三元表达式。eslint: no-nested-ternary嵌套的三元表达式会降低代码可读性。
// bad
const foo = bar ? baz : qux === quxx ? bing : bam;

// good
const qu = qux === quxx ? bing : bam;
const foo = bar ? baz : qu;
● 2.8.5【强制】避免不必要的三元表达式。eslint: no-unneeded-ternary
// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

// good
const foo = a || b;
const bar = !!c;
const baz = !c;
● 2.8.6【强制】混合使用多种操作符时，用小括号包裹分组。eslint: no-mixed-operators这可以更清晰地表达代码意图，提高可读性。四则运算符（+, -, *, /）可以不包裹，因为大多数人熟知它们的优先级。
// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;

// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

// bad
const bar = a ** b - 5 % d;

// good
const bar = (a ** b) - (5 % d);

// bad - 有人可能会误以为执行顺序是 (a || b) && c
if (a || b && c) {
  return d;
}

// good
if (a || (b && c)) {
  return d;
}

// good - 四则运算可以不用小括号包裹
const bar = a + b / c * d;
2.9 控制语句
● 2.9.1【强制】switch 语句中的 case 需要以 break 结尾。eslint: no-fallthrough
// bad
switch(foo) {
  case 1:
    doSomething();
  case 2:
    doSomethingElse();
  default:
    doSomething();
}

// good
switch(foo) {
  case 1:
    doSomething();
    break;
  case 2:
    doSomethingElse();
    break;
  default:
    doSomething();
}
● 2.9.2【推荐】switch 语句需要始终包含 default 分支。eslint: default-case在使用 switch 语句时，有时会出现因开发者忘记设置 default 而导致错误，因此建议总是给出 default。如果有意省略 default，请在 switch 语句末尾用 // no default 注释指明：
// bad
let foo;
switch (bar) {
  case 1:
    foo = 2;
    break;
}

// good
let foo;
switch (bar) {
  case 1:
    foo = 2;
    break;
  default:
    foo = 0;
}

// good - 如果有意省略 default，请在 switch 语句末尾用 `// no default` 注释指明
let foo = 0;
switch (bar) {
  case 1:
    foo = 2;
    break;
  // no default
}
● 2.9.3【参考】switch 语句应包含至少 3 个条件分支。switch 语句在有许多条件分支的情况下可以使代码结构更清晰。但对于只有一个或两个条件分支的情况，更适合使用 if 语句，if 语句更易于书写和阅读。
// bad
let foo;
switch (bar) {
  case 1:
    foo = 2;
    break;
  default:
    foo = 0;
}

// good
let foo;
if (bar === 1) {
  foo = 2;
} else {
  foo = 0;
}
● 2.9.4【参考】控制语句的嵌套层级不要过深。eslint: max-depth控制语句的嵌套层级不要超过 4 级，否则将难以阅读和维护：
// bad
if (condition1) {
  // depth = 1
  if (condition2) {
    // depth = 2
    for (let i = 0; i < 10; i++) {
      // depth = 3
      if (condition4) {
        // depth = 4
        if (condition5) {
          // bad - depth = 5
        }
        return;
      }
    }
  }
}
● 2.9.5【强制】for 循环中的计数器应朝着正确方向移动。eslint: for-direction当 for 循环中更新子句的计数器朝着错误的方向移动时，循环的终止条件将永远无法达到，这会导致死循环的出现。这时要么是程序出现了错误，要么应将 for 循环改为 while 循环。
// bad
for (let i = 0; i < length; i--) {
  // do something
}

// good
for (let i = 0; i < length; i++) {
  // do something
}
● 2.9.6【推荐】for-in 循环中需要对 key 进行验证。eslint: guard-for-in使用 for-in 循环时需要避免对象从原型链上继承来的属性也被遍历出来，因此保险的做法是对 key 是否是对象自身的属性进行验证：
// bad
for (const key in foo) {
  doSomething(key);
}

// good
for (const key in foo) {
  if (Object.prototype.hasOwnProperty.call(foo, key)) {
    doSomething(key);
  }
}
● 2.9.7【参考】如果一个 if 语句的结果总是返回一个 return 语句，那么最后的 else 是不必要的。eslint: no-else-return
// bad
function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}

// good
function foo() {
  if (x) {
    return x;
  }

return y;
}
● 2.9.8【参考】条件表达式的计算结果。条件表达式（例如 if 语句的条件）的值为通过抽象方法 ToBoolean 进行强制转换所得，计算结果遵守下面的规则：
  ○ 对象、数组 被计算为 true
  ○ Undefined 被计算为 false
  ○ Null 被计算为 false
  ○ 布尔值 被计算为 布尔的值
  ○ 数字 如果是 +0、-0 或 NaN 被计算为 false，否则为 true
  ○ 字符串 如果是空字符串 '' 被计算为 false，否则为 true
if ({}) { // => true
}

if ([]) { // => true
}

if (0) { // => false
}

if ('0') { // => true
}

if ('') { // => false
}
2.10 其他
● 2.10.1【强制】禁止使用 eval。eslint: no-evaleval 语句存在安全风险，可能导致注入攻击。
// bad
const obj = { x: 'foo' };
const key = 'x';
const value = eval('obj.' + key);

// good
const obj = { x: 'foo' };
const key = 'x';
const value = obj[key];
● 2.10.2【强制】禁止使用 debugger。eslint: no-debuggerdebugger 语句会让程序暂停，并在当前位置开启调试器。它通常在程序调试阶段使用，不应发布到线上。
// bad
function isTruthy(x) {
  debugger;
  return Boolean(x);
}
● 2.10.3【推荐】禁止使用 alert。eslint: no-alertalert 语句会使浏览器弹出原生警告框，这可能让人感觉你的程序出错了。如果需要对用户弹出警告信息，好的做法是使用第三方的弹窗组件或自己定义警告框样式。同理，confirm 和 prompt 语句也不应被使用。
// bad
alert('Oops!');

// good - 使用自定义的 Alert 组件
Alert('Oops!');
● 2.10.4【推荐】生产环境禁止使用 console。eslint: no-consoleconsole 语句通常在调试阶段使用，发布上线前，应该去掉代码里所有的 console 语句。
// bad
console.log('Some debug messages..');

// good - 如果你非要使用 console 语句，可以考虑自己进行封装以确保不要在生产环境暴露调试信息
const utils = {
  log: (msg) => {
    if (window.env !== 'product') {
      console.log(msg);
    }
  },
};

utils.log('Some debug messages..');
● 2.10.5【强制】禁止对原生对象或只读的全局对象进行赋值。eslint: no-global-assignJS 执行环境中会包含一些全局变量和原生对象，如浏览器环境中的 window，node 环境中的 global 、process，Object，undefined 等。除了像 window 这样的众所周知的对象，JS 还提供了数百个内置全局对象，你可能在定义全局变量时无意对它们进行了重新赋值，因此最好的做法是不要定义全局变量。
// bad
window = {};
Object = null;
undefined = 1;
3 注释
注释的目的：提高代码的可读性，从而提高代码的可维护性注释的原则：如无必要，勿增注释；如有必要，尽量详尽
● 3.1【推荐】单行注释使用 //。注释应单独一行写在被注释对象的上方，不要追加在某条语句的后面：
// bad
const active = true;  // is current tab

// good
// is current tab
const active = true;
注释行上方需要有一个空行（除非注释行上方是一个块的顶部），以增加可读性：
● 3.2【推荐】多行注释使用 /** ... */，而不是多行的 //。
// bad
// make() returns a new element
// based on the passed in tag name
function make(tag) {
  // ...

return element;
}

// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {
  // ...

return element;
}
● 3.3【强制】注释内容和注释符之间需要有一个空格。eslint: spaced-comment注释内容和注释符之间需要有一个空格，以增加可读性：
// bad
//is current tab
const active = true;

// good
// is current tab
const active = true;

// bad
/**
 *make() returns a new element
 *based on the passed-in tag name
 */
function make(tag) {
  // ...

return element;
}

// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {
  // ...

return element;
}
● 3.4【参考】合理使用特殊注释标记。eslint: no-warning-comments有时我们发现某个可能的 bug，但因为一些原因还没法修复；或者某个地方还有一些待完成的功能，这时我们需要使用相应的特殊标记注释来告知未来的自己或合作者。最常用的特殊标记有两种：
  ○ // FIXME: 说明问题是什么
  ○ // TODO: 说明还要做什么或者问题的解决方案
● 一个我们不愿看到却很普遍的情况是，我们给代码标记 FIXME 或 TODO 后却一直没找到时间处理。所以当你做了特殊标记，你应该为它负责，在某个时间把它解决。
class Calculator extends Abacus {
  constructor() {
    super();

// FIXME: shouldn’t use a global here
    total = 0;

// TODO: total should be configurable by an options param
    this.total = 0;
  }
}
● 3.5【参考】文档类注释使用 jsdoc 规范。文档类注释，如函数、类、文件、事件等，推荐使用 jsdoc 规范或类 jsdoc 的规范。例如：
/**
 * Book类，代表一个书本.
 * @constructor
 * @param {string} title - 书本的标题.
 * @param {string} author - 书本的作者.
 */
function Book(title, author) {
  this.title = title;
  this.author = author;
}

Book.prototype = {
  /**
   * 获取书本的标题
   * @returns {string|*}
   */
  getTitle() {
    return this.title;
  },

/**
   * 设置书本的页数
   * @param pageNum {number} 页数
   */
  setPageNum(pageNum) {
    this.pageNum = pageNum;
  },
};
● 3.6【参考】无用的代码注释应被即时删除。无用的注释代码会使程序变得臃肿并降低可读性，应被即时删除。你可以通过版本控制系统找回被删除的代码。
4 命名
● 4.1【参考】文件名：使用小写字母命名。考虑到部分操作系统（如 Windows, MacOS）下文件系统大小写不敏感，推荐使用 - 连接。例如：hello-world.js。
● 4.2【参考】使用小驼峰（camelCase）命名原始类型、对象、函数、实例。camelcase
// bad
const this_is_my_string = 'foo';
const this_is_my_object = {};
function this_is_my_function() {}

// good
const thisIsMyString = 'foo';
const thisIsMyObject = {};
function thisIsMyFunction() {}
● 4.3【强制】使用大驼峰（PascalCase）命名类和构造函数。eslint: new-cap
// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});
● 4.4【参考】全部大写字母&单词间用下划线分割的命名模式（UPPERCASE_VARIABLES）。全大写字母、单词间使用下划线分割的命名模式（UPPERCASE_VARIABLES），仅用于命名常量，且该常量需同时满足如下条件：
  ○ 使用 const 关键字声明
  ○ 用于 export，而不是本文件内
● ES6 后 const 关键字用于声明常量，被广泛使用，如果所有用 const 声明的值都用 UPPERCASE_VARIABLES 模式命名会使可读性变差，是没有必要的。因此我们约定 UPPERCASE_VARIABLES 命名模式只用于 export 给其他文件用的常量，如果只在同文件内使用，依然使用正常的命名风格。
// bad - 在本文件中使用的常量，不需使用 UPPERCASE_VARIABLES 风格
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

// good
export const THIS_IS_CONSTANT = '一个常量';
此外，如果 export 一个对象，只有对象本身需要使用 UPPERCASE_VARIABLES ，对象属性的 key 仍然使用正常命名风格：
● 4.5【参考】模块相关的命名规范。使用小驼峰（camelCase）命名 export 的函数：
function makeStyleGuide() {
  // ...
}

export default makeStyleGuide;
使用大驼峰（PascalCase）命名 export 的 class、函数库、字面量对象：
● 4.6【参考】命名不要以下划线开头或结尾。eslint: no-underscore-dangleJS 没有私有属性或私有方法的概念，这样的命名可能会让人误解。
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';
5 关于 ES5
这个章节是为还在使用 ES5 及之前版本 JS 的同学准备。因为本规约以 ES6 编写，你可以通过阅读本章节来了解 ES5 中有哪些需要额外注意的地方。
● 5.1【推荐】ES5 中的变量声明。使用 var 进行声明：
// good
var foo = 'foo';
需注意，var 声明的变量不是块作用域而是函数作用域：另外，var 声明的变量会被提升到其作用域顶部：即便如此，我们还是推荐在变量使用前再进行声明，而不是统一在作用域开始处声明，以增强可读性。当然，如果你担心声明提升问题会带来隐患，也可以选择统一在作用域开始处进行声明。不要在声明前就使用变量，这样做可能给人带来疑惑和隐患。eslint: no-use-before-define
● 5.2【强制】对于逗号分隔的多行结构，不要加上最后一个行末逗号。eslint: comma-dangle这样做会在 IE6/7 和 IE9 怪异模式下引起问题。另外，多余的逗号在某些 ES3 的实现里会增加数组的长度。
// bad
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn',
};

// good
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn'
};
● 5.3【参考】使用 Array 的 slice 方法进行数组复制和类数组对象转换。数组复制：
var items = [1, 2, 3];

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

// good
var itemsCopy = items.slice();
将类数组对象转换成数组：
● 5.4【推荐】不要使用保留字作为对象的属性名。不要使用保留字作为对象的属性名，它们在 IE8 中不工作
// bad
var superman = {
  class: 'alien',
  default: { clark: 'kent' },
  private: true
};

// good
var superman = {
  type: 'alien',
  defaults: { clark: 'kent' },
  hidden: true
};
配套工具
● eslint-config-ali：本规约配套的 ESLint 规则包
参考资料
● Airbnb JavaScript Style Guide
● Google JavaScript Style Guide
● ESLint rules

四、CSS 编码规约
本规约涉及 CSS 及其预编译语言（Sass、Less）的编码风格和最佳实践，部分规则可通过 stylelint 工具落地。
1 CSS
1.1 编码风格

上图是一张符合规约要求编码风格的速览图，详细规则如下：
● 1.1.1【强制】所有声明都应该以分号结尾，不能省略。stylelint: declaration-block-trailing-semicolon虽然 CSS 语法中最后一条声明的分号是可选的，但是使用分号可以增加代码的一致性和易用性。
/* bad */
.selector {
  margin-top: 10px;
  padding-left: 15px
}

/* good */
.selector {
  margin-top: 10px;
  padding-left: 15px;
}
● 1.1.2【推荐】使用 2 个空格缩进，不要使用 4 个空格或 tab 缩进。stylelint: indentation
/* bad */
.selector {
    padding-left: 15px;
}

/* good */
.selector {
  padding-left: 15px;
}
● 1.1.3【推荐】选择器和 { 之间保留一个空格。stylelint: block-opening-brace-space-before
/* bad */
.selector{
  padding-left: 15px;
}

/* good */
.selector {
  padding-left: 15px;
}
● 1.1.4【推荐】属性名和 : 之前无空格，: 和属性值之间保留一个空格。stylelint: declaration-colon-space-afterdeclaration-colon-space-before
/* bad */
.selector {
  margin-top : 10px;
  padding-left:15px;
}

/* good */
.selector {
  margin-top: 10px;
  padding-left: 15px;
}
● 1.1.5【推荐】>、+、~ 、|| 等组合器前后各保留一个空格。stylelint: selector-combinator-space-beforeselector-combinator-space-after
/* bad */
.selector>.children {
  padding-left: 15px;
}
.selector+.brother {
  padding-left: 15px;
}

/* good */
.selector > .children {
  padding-left: 15px;
}
.selector + .brother {
  padding-left: 15px;
}
● 1.1.6【推荐】在使用 , 分隔的属性值中，, 之后保留一个空格。stylelint: value-list-comma-space-after
/* bad */
.selector {
  background-color: rgba(0,0,0,0.5);
  box-shadow: 0px 1px 2px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.5);
}

/* good */
.selector {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
● 1.1.7【推荐】注释内容和注释符之间留有一个空格。stylelint: comment-whitespace-inside
/* bad */
.selector {
  /*comment*/
  /*  comment  */
  /**
   *comment
   */
  padding-left: 15px;
}

/* good */
.selector {
  /* comment */
  /**
   * comment
   */
  padding-left: 15px;
}
● 1.1.8【推荐】声明块的右大括号 } 应单独成行。
/* bad */
.selector {
  padding-left: 15px;}

/* good */
.selector {
  padding-left: 15px;
}
● 1.1.9【推荐】属性声明应单独成行。stylelint: declaration-block-single-line-max-declarations
/* bad */
.selector {
  padding-left: 15px;  margin-left: 10px;
}

/* good */
.selector {
  padding-left: 15px;
  margin-left: 10px;
}
● 1.1.10【推荐】单行代码最多不要超过 100 个字符。 stylelint: max-line-length 除了以下两种情况：
  ○ 使用 url() 函数时
  ○ CSS 属性值本身无法换行时，即属性值内无空格或逗号时
/* bad */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.04, rgb(88, 94, 124)), color-stop(0.52, rgb(115, 123, 162)));

/* good */
background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.04, rgb(88, 94, 124)),
  color-stop(0.52, rgb(115, 123, 162))
);
● 1.1.11【参考】使用多个选择器时，每个选择器应该单独成行。stylelint: selector-list-comma-newline-after
/* bad */
.selector, .selector-secondary, .selector-third {
  padding: 15px;
  margin-bottom: 15px;
}

/* good */
.selector,
.selector-secondary,
.selector-third {
  padding: 15px;
  margin-bottom: 15px;
}
● 1.1.12【参考】声明块内只有一条语句时，也应该写成多行。
/* bad */
.selector { padding-left: 15px; }

/* good */
.selector {
  padding-left: 15px;
}
● 1.1.13【参考】注释行上方需留有一行空行，除非上一行是注释或块的顶部。stylelint: comment-empty-line-before
/* bad */
.selector {

/* comment */
  padding-left: 15px;
  /* comment */
  padding-right: 15px;
}

/* good */
.selector {
  /* comment */
  padding-left: 15px;

/* comment */
  padding-right: 15px;
}
1.2 选择器
● 1.2.1【参考】不要使用 id 选择器。stylelint: selector-max-idid 会带来过高的选择器优先级，使得后续很难进行样式覆盖（继而引发使用 !important 覆盖样式的恶性循环）。
/* bad */
.normal {
  padding: 10px;
}
#special {
  padding: 15px;
}

/* good */
.normal {
  padding: 10px;
}
.normal.special {
  padding: 15px;
}
● 1.2.2【参考】属性选择器的值始终用双引号包裹。stylelint: selector-attribute-quotes属性选择器的值的引号只有在某些情况下可以省略。
/* bad */
input[type=text] {
  height: 20px;
}

/* good */
input[type="text"] {
  height: 20px;
}
● 1.2.3【参考】使用 CSS 选择器时，应注意以下性能问题：
  ○ 使用 class 而不是原生元素标签
  ○ 减少在经常出现的组件中使用个别属性选择器（如 [class^="..."]）
  ○ 控制选择器的长度，每个组合选择器内的条目尽量不超过 3 个
● 只从效率的角度来看，CSS 选择器从高（高效率）到低（低效率）的顺序是：
  ○ ID 选择器， 比如 #header
  ○ 类选择器，比如 .header
  ○ 标签（元素）选择器，比如 div
  ○ 相邻兄弟选择器，比如 h2 + p
  ○ 子选择器，比如 ul > li
  ○ 后代选择器，比如 ul a
  ○ 通配符选择器，比如 *
  ○ 属性选择器，比如 [class^="grid-"]
  ○ 伪类（伪元素）选择器，比如 a:hover、a::before
1.3 属性和属性值
● 1.3.1【推荐】使用尽可能短的十六进制值。stylelint: color-hex-length
/* bad */
.selector {
  color: #ffffff;
}

/* good */
.selector {
  color: #fff;
}
● 1.3.2【推荐】不要使用 !important 重写样式。
● 1.3.3【推荐】十六进制值统一使用小写字母（小写字母更容易分辨）。stylelint: color-hex-case
/* bad */
.selector {
  color: #FEFEFE;
}

/* good */
.selector {
  color: #fefefe;
}
● 1.3.4【推荐】长度值为 0 时，省略掉长度单位。stylelint: length-zero-no-unit在 CSS 中，长度值为 0 时，它的单位是可选的（长度单位包括：em, ex, ch, vw, vh, cm, mm, in, pt, pc, px, rem, vmin, and vmax）。省略长度单位可以使代码更简洁：
/* bad */
.selector {
  margin-top: 0px;
  font-size: 0em;
}

/* good */
.selector {
  margin-top: 0;
  font-size: 0;
}
● 1.3.5【参考】保留小数点前的 0。stylelint: number-leading-zero在 CSS 中，大于 -1 小于 1 的小数，小数点前的 0 可以省略：
/* bad */
.selector {
  opacity: .5;
  left: -.5px;
}

/* good */
.selector {
  opacity: 0.5;
  left: -0.5px;
}
对于是否省略小数点前的 0，业界存在争议：
  ○ 省略 0 的好处是：代码更简洁，可以减少一个字符
  ○ 不省略的好处是：代码可读性更好、一致性更强
你可选择自己倾向的风格，在代码中风格统一即可，要么都省略，要么都保留。我们推荐保留 0，因为当今很多 CSS 压缩工具会在压缩时帮我们去掉 0，不存在多占用一个字符的问题。保留 0 能增强代码的可读性和一致性。
● 1.3.6【参考】属性声明的顺序。相关联的属性声明最好写成一组，并按如下顺序排序：
  a. 定位：如 position、left、right、top、bottom、z-index
  b. 盒模型：如 display、float、width、height、margin、padding、border
  c. 文字排版：如 font、color、line-height、text-align
  d. 外观：如 background
  e. 其他属性
● 「定位」和「盒模型」放在最前面，是因为它们决定了元素的布局、位置和尺寸。「定位」排在「盒模型」之前，是由于「定位」属性可以让元素脱离正常文本流，从而使「盒模型」属性失效。除了「定位」和「盒模型」，其他属性都只在元素内部起作用，不会对前两类属性的结果产生影响，因此放在后面。
.declaration-order {
  /* 定位 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

/* 盒模型 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;

/* 排版 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

/* 外观 */
  background-color: #f5f5f5;

/* 其他 */
  opacity: 1;
}
更多 CSS 属性顺序参考如下列表：
第一组	第二组	第三组	第四组	第五组	第六组	第七组
content	box-sizing	background*	font*	opacity	unicode-bidi	transition*
position	*width	color	src	visibility	direction	transform*
top	*height	box-decoration-break	line-height	filter	columns	animation*
right	margin*	box-shadow	letter-spacing	resize	column-*
bottom	padding*	outline*	quotes	cursor	break-*
left	border*	table-layout	counter-*	pointer-events	page-break-*
z-index		caption-side	-ms-writing-mode	user-select	orphans
display		empty-cells	text-*		widows
vertical-align		list-style*	white-space		*zoom
flex*			word-*		orientation
grid*			overflow-wrap		fill
*gap			tab-size		stroke
align-*			hyphens
justify-*			interpolation-mode
order
float
clear
object-fit
overflow*
clip
● 1.3.7【参考】适时使用简写属性。stylelint: declaration-block-no-shorthand-property-overridesdeclaration-block-no-redundant-longhand-properties
常见的简写属性包括：
● font
● background
● padding
● margin
● border
● border-radius
使用简写属性时，需要显式地设置所有值。我们应该在真正需要设置所有值或大多数值时才使用简写属性。
如果只是想设置某一个属性，则不应该使用简写属性：
/* bad */
  .selector {
    margin: 0 0 10px;
  }

/* good */
  .selector {
    margin-bottom: 10px;
  }
1.4 其他
● 1.4.1【推荐】不要使用 CSS 的 @import。与 <link> 相比，@import 会在关键渲染路径上增加更多的往返（即关键路径的深度变长），这样会导致浏览器处理 CSS 文件速度变慢，因此我们应该避免使用 @import。

<style>
  @import url("more.css");
</style>

<link rel="stylesheet" href="more.css">
2 Sass 和 Less
对于 CSS 而言，可以在新项目中尝试放弃使用 Sass、Less 这样的处理器语言，因为：
● 这些处理器语言是在一定历史条件下的产物，虽然这些产物在一定程度上提高开发者的开发效率，但不同的处理器语言也同时增加了项目的维护成本（特别是多人协作，多团队协作的时候）。
● 更建议使用 PostCSS 处理器，它类似于 CSS 中的 Babel，不但具备 Sass 和 Less 的功能，而且社区繁荣，同时还可以根据自己的需求扩展相关的插件。
● 随着 CSS 的一些新特性出现，Sass 和 Less 以往的优势也会慢慢消失。
● 2.1【推荐】四则运算符两侧各保留一个空格：
/* bad */
.selector {
  width: $default-width/2;
}

/* good */
.selector {
  width: $default-width / 2;
}
● 2.2【推荐】Mixin 名称和括号 () 间无空格，在拥有多个参数的表达式中， , 之前无空格，, 之后保留一个空格：
/* bad */
.selector {
  .size(30px,20px);
  .clearfix ();
}

/* good */
.selector {
  .size(30px, 20px);
  .clearfix();
}
● 2.3【推荐】按如下顺序组织 Sass / Less 代码：
  ○ @import 语句
  ○ 全局变量声明
  ○ 样式声明
@import 'common/theme.scss';

$color-red: #f0f0f0;

.selector {
  color: $color-red;
}
● 2.4【推荐】对于 Sass 和 Less，块内的属性声明按如下顺序排序：
  ○ 标准属性声明：除了 mixin 调用、extend 子级选择器的声明，其他属性声明的顺序与「属性声明的顺序」章节的规则一致
  ○ mixin 调用：Sass 的 @include 声明、Less 的 mixin 调用
  ○ 嵌套的子级选择器：将嵌套的选择器放到块的末尾，并且在其上方保留一行空行
.btn {
  background: #ccc;
  font-weight: bold;
  @include transition(background 0.5s ease);

.icon {
    margin-right: 10px;
  }
}
● 2.5【推荐】嵌套选择器的深度不要超过 3 层，否则可能带来一些副作用：
  ○ 与 HTML 结构强耦合，难以复用
  ○ 过高的选择器优先级
.container {
  .header {
    .user-name {
      // STOP！不要再嵌套更深选择器
    }
  }
}
● 2.6【推荐】可以使用双斜杠注释。但需要注意的是，编译为 CSS 后，代码中的双斜杠注释会被删除，而 /* */ 会被保留。
// 单行注释
.selector-a {
  padding-left: 15px;
}

/*
 * 多行注释
 * 多行注释
 */
.selector-b {
  margin-left: 15px;
}
编译为 CSS 后，双斜杠注释会被删除：
● 2.7【推荐】使用 Mixin (@mixin 和 @include 指令) 来让代码遵循 DRY 原则（Don't Repeat Yourself）、增加抽象性和降低复杂度。应避免使用 @extend 指令，它不够直观且具有潜在风险，尤其是在嵌套选择器中。即使继承的是顶层选择器，如果选择器的顺序发生变化，也可能引起问题（比如，如果它们存在于其他文件，而加载顺序发生了变化）。Extend 相比 Mixin 的好处是，如果无参数的 mixin 被多处使用，编译后会输出多段重复的代码。这时如果使用 @extend，可以避免这个问题。但是 gzip 等压缩工具就可以解决重复代码的问题，因此大多数情况下，你只需要使用 mixin 来让代码符合 DRY 原则。
配套工具
● stylelint-config-ali：本规约配套的 stylelint 规则包
参考资料
● Code Guide by @mdo
● Airbnb CSS / Sass Styleguide
● Google HTML/CSS Style Guide
● spec css-style-guide

前端开发规范

前端

奇陌云店

链接

联系

Newsletter