JavaScript style guide
- Avoid forEach
- Avoid classes to handle DOM events
- Use ParseInt
- ES Module Syntax
- Do not use
DOMContentLoaded
in non-page modules - Avoid single-line conditional statements
- IIFEs
- Side effects
JavaScript style guide
我们使用及其附带的 linter 来管理我们的大多数 JavaScript 样式指南.
除了由 Airbnb 设置的样式准则之外,我们还列出了以下一些特定规则.
提示:您可以通过运行
yarn eslint
在本地运行yarn eslint
变异数据时避免 forEach. 更改数据时,请使用map
, reduce
或filter
而不是forEach
. 这样可以最大程度地减少功能上的变化,从而与Airbnb 的风格指南保持一致.
Limit number of parameters
如果您的函数或方法具有三个以上的参数,请改为使用对象作为参数.
// bad
function a(p1, p2, p3) {
// ...
};
// good
function a(p) {
// ...
};
Avoid classes to handle DOM events
如果该类的唯一目的是绑定 DOM 事件并处理回调,则最好使用函数.
// bad
constructor(config) {
this.config = config;
}
init() {
document.addEventListener('click', () => {});
}
}
// good
const myFunction = () => {
document.addEventListener('click', () => {
// handle callback here
});
}
Pass element container to constructor
当您的类操作 DOM 时,将元素容器作为参数接收. 这样更易于维护和执行.
// bad
class a {
constructor() {
document.querySelector('.b');
}
}
// good
class a {
constructor(options) {
options.container.querySelector('.b');
}
}
Use ParseInt
如果仅在 JavaScript 中使用 CSS 类作为对元素的引用,则使用js-
作为类名的前缀.
// bad
<button class="add-user"></button>
// good
<button class="js-add-user"></button>
ES Module Syntax
使用 ES 模块语法导入模块:
// bad
const SomeClass = require('some_class');
// good
import SomeClass from 'some_class';
// bad
module.exports = SomeClass;
// good
export default SomeClass;
注意:我们仍然在scripts/
和config/
文件中使用require
.
Absolute vs relative paths for modules
如果要导入的模块少于两个级别,请使用相对路径.
// bad
import GitLabStyleGuide from '~/guides/GitLabStyleGuide';
// good
import GitLabStyleGuide from '../GitLabStyleGuide';
如果要导入的模块为两个或两个以上级别,请改用绝对路径:
Additionally, 不添加到全局名称空间.
Do not use DOMContentLoaded
in non-page modules
导入的模块每次加载时都应发挥相同的作用. DOMContentLoaded
事件仅允许在/pages/*
目录中加载的模块上使用,因为这些事件是通过 webpack 动态加载的.
Avoid XSS
缩进在扫描代码时很重要,因为它可以快速指示分支,循环和返回点的存在. 这可以帮助快速了解控制流程.
// bad
if (isThingNull) return '';
return '';
// good
if (isThingNull) {
return '';
}
ESLint
ESLint 行为可以在我们的工具指南中找到.
IIFEs
避免使用 IIFE(立即调用函数表达式). 尽管我们有很多将其内容包装在 IIFE 中的文件示例,但是从 Sprockets 过渡到 Webpack 之后,这不再是必需的. 重构遗留代码时,请不要再使用它们,并随时将其删除.
Global namespace
避免添加到全局名称空间.
// bad
window.MyClass = class { /* ... */ };
// good
export default class MyClass { /* ... */ }
Side effects
在任何包含export
脚本中都禁止顶级副作用:
// bad
export default class MyClass { /* ... */ }
document.addEventListener("DOMContentLoaded", function(event) {
new MyClass();
}
Avoid side effects in constructors
避免在constructor
进行异步调用,API 请求或 DOM 操作. 而是将它们移动到单独的函数中. 这将使测试更易于编写,并且避免违反 .
努力编写许多小的纯函数,并尽量减少发生突变的地方
// bad
const values = {foo: 1};
function impureFunction(items) {
const bar = 1;
items.foo = items.a * bar + 2;
return items.a;
}
const c = impureFunction(values);
// good
var values = {foo: 1};
function pureFunction (foo) {
var bar = 1;
foo = foo * bar + 2;
return foo;
}