この記事では、JavaScript のコーディング標準の概要 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。
命名規則
1 2 3 4 5 6 7 8 9 10 11 12 13 | let thisIsMyName;
let goodID;
let reportURL;
let AndroidVersion;
let iOSVersion;
let MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
let body = $( 'body' );
let $body = $( 'body' );
|
ログイン後にコピー
ローカル変数の命名規則
s: 文字列を表します。例: sName, sHtml;
n: 数値を表します。例: nPage、nTotal;
b: ロジックを示します。例: bChecked、bHasLogin;
a: 配列を表します。例: aList、aGroup;
r: は正規表現を表します。例: rDomain、rEmail;
f: 関数を表します。例: fGetHtml、fInit;
o: 上記以外のオブジェクト (oButton、oDate;
など) を示します。関数の命名
ザトウクジラの命名方法。一般的な動詞規則を使用できます。
アクションを実行できるかどうかを決定でき、関数はブール値を返します。価値。 true: 実行可能、false: 実行不可
は、特定の値が含まれているかどうかを判断し、関数はブール値を返します。 true: この値が含まれる; false: この値が含まれない
は特定の値であるかどうかを判断し、関数はブール値を返します。 true: 特定の値の場合; false: 特定の値ではない
get が特定の値を取得すると、関数は非ブール値を返します
set 特定の値を設定する、値を返さない、設定が成功したかどうかを返す、または連鎖オブジェクトを返すload 特定のデータをロードする、戻り値を返さない、またはロードが完了したかどうかの結果を返す
1 2 3 4 5 6 7 8 | function canRead() {
return true;
}
function getName() {
return this.name;
}
|
ログイン後にコピー
References
すべての参照には var を使用せずに const を使用します。
eslint:prefer-const, no-const-assign
これにより、参照を再割り当てできなくなります。これにより、バグや理解しにくいコードが発生する可能性があります。
1 2 3 4 5 6 | var a = 1;
var b = 2;
const a = 1;
const b = 2;
|
ログイン後にコピー
どうしても変更可能な参照が必要な場合は、var の代わりに let を使用してください。
eslint: no-var jscs: disallowVar
1 2 3 4 5 6 7 8 9 10 | var count = 1;
if (true) {
count += 1;
}
let count = 1;
if (true) {
count += 1;
}
|
ログイン後にコピー
Objects
リテラル構文を使用してオブジェクトを作成します。
eslint: no-new-object
1 2 3 4 | const item = new Object();
const item = {};
|
ログイン後にコピー
動的プロパティ名を持つオブジェクトを作成する場合は、計算されたプロパティ名を使用します。
オブジェクトのすべてのプロパティを 1 か所で定義できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function getKey(k) {
return `a key named k`;
}
const obj = {
id: 5,
name: 'San Francisco' ,
};
obj[getKey( 'enabled' )] = true;
const obj = {
id: 5,
name: 'San Francisco' ,
[getKey( 'enabled' )]: true,
};
|
ログイン後にコピー
オブジェクト メソッドの短縮構文を使用します。
eslint: object-shorthand jscs: requireEnhancedObjectLiterals
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
};
|
ログイン後にコピー
オブジェクト プロパティの短縮構文を使用します。
eslint: object-shorthand jscs: requireEnhancedObjectLiterals
1 2 3 4 5 6 7 8 9 | const lukeSkywalker = 'Luke Skywalker' ;
const obj = {
lukeSkywalker: lukeSkywalker,
};
const obj = {
lukeSkywalker,
};
|
ログイン後にコピー
オブジェクト宣言の先頭に短縮属性グループを記述します
どのプロパティが短縮構文を使用しているかを確認する方が簡単です
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | const anakinSkywalker = 'Anakin Skywalker' ;
const lukeSkywalker = 'Luke Skywalker' ;
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
};
|
ログイン後にコピー
無効な識別子の属性のみを引用します。
eslint: quote-props jscs: disallowQuotedKeysInObjects
一般的には、この方が読みやすいと思います。構文の強調表示が改善され、多くの JS エンジンによる最適化が容易になります。
1 2 3 4 5 6 7 8 9 10 11 12 | const bad = {
'foo' : 3,
'bar' : 4,
'data-blah' : 5,
};
const good = {
foo: 3,
bar: 4,
'data-blah' : 5,
};
|
ログイン後にコピー
オブジェクト スプレッド演算子を使用してオブジェクトを浅くコピーし、Object.assign よりも優先します。オブジェクト剰余演算子を使用して、特定のプロパティが省略された新しいオブジェクトを取得します。
1 2 3 4 5 6 7 8 9 10 11 | const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 });
delete copy .a;
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 });
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 };
const { a, ...noA } = copy ;
|
ログイン後にコピー
配列 配列
リテラルを使用して配列を作成します。
eslint: no-array-constructor
1 2 3 4 | const items = new Array();
const items = [];
|
ログイン後にコピー
配列スプレッド演算子を使用して配列をコピーします。
1 2 3 4 5 6 7 8 9 | const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i += 1) {
itemsCopy[i] = items[i];
}
const itemsCopy = [...items];
|
ログイン後にコピー
配列のようなオブジェクトを配列に変換するには、Array.from の代わりにスプレッド演算子 ... を使用します。
1 2 3 4 5 | const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);
const nodes = [...foo];
|
ログイン後にコピー
スプレッド演算子の代わりに Array.from を使用して反復をマップします。これにより、中間配列の作成が回避されます。
1 2 3 4 | const baz = [...foo].map(bar);
const baz = Array.from(foo, bar);
|
ログイン後にコピー
分割 分割
オブジェクトの複数のプロパティにアクセスして使用する場合は、オブジェクトの分割を使用します。
eslint: jscs の分割を優先: requireObjectDestructuring
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `firstName lastName`;
}
function getFullName(user) {
const { firstName, lastName } = user;
return `firstName lastName`;
}
function getFullName({ firstName, lastName }) {
return `firstName lastName`;
}
|
ログイン後にコピー
配列の分割を使用します。
eslint:prefer-destructuring jscs:requireArrayDestructuring
1 2 3 4 5 6 | const arr = [1, 2, 3, 4];
const first = arr[0];
const second = arr[1];
const [first, second] = arr;
|
ログイン後にコピー
配列の分割ではなくオブジェクトの分割を使用して、複数の戻り値を取得します。 jscs: disallowArrayDestructuringReturn
呼び出し時の位置を変更せずに、新しいプロパティを追加したり、時間の経過とともに順序を変更したりできます。
1 2 3 4 5 6 7 8 9 10 11 12 | function processInput(input) {
return [left, right, top, bottom];
}
const [left, __, top] = processInput(input);
function processInput(input) {
return { left, right, top, bottom };
}
const { left, top } = processInput(input);
|
ログイン後にコピー
文字列文字列
文字列には一重引用符 '' を使用します。
eslint: quotes jscs: validateQuoteMarks
1 2 3 4 5 6 | const name = "Capt. Janeway" ;
const name = `Capt. Janeway`;
const name = 'Capt. Janeway';
|
ログイン後にコピー
プログラムで文字列を構築する場合は、文字列連結の代わりにテンプレート文字列を使用します。
eslint:prefer-template template-curly-spacing jscs:requireTemplateStrings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | / bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
function sayHi(name) {
return ['How are you, ', name, '?'].join();
}
function sayHi(name) {
return `How are you, ${ name }?`;
}
function sayHi(name) {
return `How are you, name?`;
}
|
ログイン後にコピー
文字列に対して eval() を使用しないでください。脆弱性が多すぎます。
eslint: no-eval
関数
関数宣言の代わりに名前付き関数式を使用します。
eslint: func スタイルの jsc: disallowFunctionDeclarations
函数声明很容易被提升(Hoisting),这对可读性和可维护性来说都是不利的;
1 2 3 4 5 6 7 8 9 10 11 12 13 | / bad
function foo() {
}
const foo = function () {
};
const short = function longUniqueMoreDescriptiveLexicalFoo() {
};
|
ログイン後にコピー
用圆括号包裹立即调用函数表达式 (IIFE)。
eslint: wrap-iife jscs: requireParenthesesAroundIIFE
一个立即调用函数表达式是一个单独的单元 – 将函数表达式包裹在括号中,后面再跟一个调用括号,这看上去很紧凑。
1 2 3 4 | ( function () {
console.log('Welcome to the Internet. Please follow me.');
}());
|
ログイン後にコピー
不要使用 arguments。可以选择 rest 语法 … 替代。
使用 … 能明确你要传入的参数。另外 rest(剩余)参数是一个真正的数组,而 arguments 是一个类数组(Array-like)。
1 2 3 4 5 6 7 8 9 | function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
function concatenateAll(...args) {
return args.join('');
}
|
ログイン後にコピー
使用默认参数语法,而不要使用一个变化的函数参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function handleThings(opts) {
opts = opts || {};
}
function handleThings(opts) {
if (opts === void 0) {
opts = {};
}
}
function handleThings(opts = {}) {
}
|
ログイン後にコピー
始终将默认参数放在最后。
1 2 3 4 5 6 7 8 | function handleThings(opts = {}, name) {
}
function handleThings(name, opts = {}) {
}
|
ログイン後にコピー
隔开函数签名,括号两边用空格隔开。
1 2 3 4 5 6 7 | const f = function (){};
const g = function (){};
const h = function () {};
const x = function () {};
const y = function a() {};
|
ログイン後にコピー
不要改变参数。
eslint: no-param-reassign
操作作为参数传入的对象,可能会在调用原始对象时造成不必要的变量副作用。(对象是引用类型)
1 2 3 4 5 6 7 8 | function f1(obj) {
obj.key = 1;
}
function f2(obj) {
const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}
|
ログイン後にコピー
箭头函数 Arrow Functions
当您必须使用匿名函数(如在传递一个内联回调时),请使用箭头函数表示法。
eslint: prefer-arrow-callback, arrow-spacing jscs: requireArrowFunctions
它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | [1, 2, 3].map( function (x) {
const y = x + 1;
return x * y;
});
[1, 2, 3].map( _ => {
return 0;
});
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
[1, 2, 3].map(() => {
return 0;
});
|
ログイン後にコピー
如果函数体由一个返回无副作用(side effect)的expression(表达式)的单行语句组成,那么可以省略大括号并使用隐式返回。否则,保留大括号并使用 return 语句。
1 2 3 4 5 6 7 | [1, 2, 3].map(number => {
const nextNumber = number + 1;
return `A string containing the nextNumber.`;
});
[1, 2, 3].map(number => `A string containing the number.`);
|
ログイン後にコピー
如果表达式跨多行,将其包裹在括号中,可以提高可读性。
1 2 3 4 5 6 7 8 9 10 11 12 13 | [ 'get' , 'post' , 'put' ].map(httpMethod => Object.prototype.hasOwnProperty.call(
httpMagicObjectWithAVeryLongName,
httpMethod,
)
);
[ 'get' , 'post' , 'put' ].map(httpMethod => (
Object.prototype.hasOwnProperty.call(
httpMagicObjectWithAVeryLongName,
httpMethod,
)
));
|
ログイン後にコピー
如果你的函数只有一个参数并且不使用大括号,则可以省略参数括号。否则,为了清晰和一致性,总是给参数加上括号。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | [1, 2, 3].map((x) => x * x);
[1, 2, 3].map(x => x * x);
[1, 2, 3].map(number => (
`A long string with the number. It’s so long that we don’t want it to take up space on the .map line!`
));
[1, 2, 3].map(x => {
const y = x + 1;
return x * y;
});
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
|
ログイン後にコピー
避免使用比较运算符(< =, >=)时,混淆箭头函数语法(=>)。
1 2 3 4 5 6 7 8 9 10 11 | const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
const itemHeight = (item) => {
const { height, largeSize, smallSize } = item;
return height > 256 ? largeSize : smallSize;
};
|
ログイン後にコピー
类 Classes & 构造函数 Constructors
总是使用 *class。避免直接操作 prototype 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function Queue(contents = []) {
this.queue = [...contents];
}
Queue.prototype.pop = function () {
const value = this.queue[0];
this.queue.splice(0, 1);
return value;
};
class Queue {
constructor(contents = []) {
this.queue = [...contents];
}
pop() {
const value = this.queue[0];
this.queue.splice(0, 1);
return value;
}
}
|
ログイン後にコピー
使用 extends 继承。
因为 extends 是一个内置的原型继承方法并且不会破坏 instanceof。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const inherits = require ( 'inherits' );
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
return this.queue[0];
};
class PeekableQueue extends Queue {
peek() {
return this.queue[0];
}
}
|
ログイン後にコピー
如果没有指定,类有一个默认的构造函数。一个空的构造函数或者只是委托给父类则不是必须的。
eslint: no-useless-constructor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | class Jedi {
constructor() {}
getName() {
return this.name;
}
}
class Rey extends Jedi {
constructor(...args) {
super(...args);
}
}
class Rey extends Jedi {
constructor(...args) {
super(...args);
this.name = 'Rey' ;
}
}
|
ログイン後にコピー
避免重复类成员。
eslint: no-dupe-class-members
1 2 3 4 5 6 7 8 9 10 11 12 13 | class Foo {
bar() { return 1; }
bar() { return 2; }
}
class Foo {
bar() { return 1; }
}
class Foo {
bar() { return 2; }
}
|
ログイン後にコピー
模块 Modules
总是使用模块 (import/export) 而不是其他非标准模块系统。
1 2 3 4 5 6 7 8 9 | const AirbnbStyleGuide = require ( './AirbnbStyleGuide' );
module.exports = AirbnbStyleGuide.es6;
import AirbnbStyleGuide from './AirbnbStyleGuide' ;
export default AirbnbStyleGuide.es6;
import { es6 } from './AirbnbStyleGuide' ;
export default es6;
|
ログイン後にコピー
不要使用通配符 import(导入)。
这样能确保你只有一个默认 export(导出)。
1 2 3 4 | import * as AirbnbStyleGuide from './AirbnbStyleGuide' ;
import AirbnbStyleGuide from './AirbnbStyleGuide' ;
|
ログイン後にコピー
不要从 import(导入) 中直接 export(导出)。
虽然一行代码简洁明了,但有一个明确的 import(导入) 方法和一个明确的 export(导出) 方法,使事情能保持一致。
1 2 3 4 5 6 7 | export { es6 as default } from './AirbnbStyleGuide' ;
import { es6 } from './AirbnbStyleGuide' ;
export default es6;
|
ログイン後にコピー
一个地方只在一个路径中 import(导入) 。
1 2 3 4 5 6 7 8 9 10 11 | import foo from 'foo' ;
import { named1, named2 } from 'foo' ;
import foo, { named1, named2 } from 'foo' ;
import foo, {
named1,
named2,
} from 'foo' ;
|
ログイン後にコピー
不要 export(导出) 可变绑定。
eslint: import/no-mutable-exports
一般应该避免可变性,特别是在导出可变绑定时。虽然一些特殊情况下,可能需要这种技术,但是一般而言,只应该导出常量引用。
1 2 3 4 5 6 | let foo = 3;
export { foo };
const foo = 3;
export { foo };
|
ログイン後にコピー
在只有单个导出的模块中,默认 export(导出) 优于命名 export(导出)。
eslint: import/prefer-default-export
为了鼓励更多的文件只有一个 export(导出),这有利于模块的可读性和可维护性。
1 2 3 4 | export function foo() {}
export default function foo() {}
|
ログイン後にコピー
将所有 import 导入放在非导入语句的上面。
eslint: import/first
由于 import 被提升,保持他们在顶部,防止意外的行为。
1 2 3 4 5 6 7 8 | import foo from 'foo' ;
foo.init();
import bar from 'bar' ;
import foo from 'foo' ;
import bar from 'bar' ;
foo.init();
|
ログイン後にコピー
多行导入应该像多行数组和对象字面量一样进行缩进。
1 2 3 4 5 6 7 8 9 10 | import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path' ;
import {
longNameA,
longNameB,
longNameC,
longNameD,
longNameE,
} from 'path' ;
|
ログイン後にコピー
属性 Properties
使用 点语法(.) 来访问对象的属性。
eslint: dot-notation jscs: requireDotNotation
1 2 3 4 5 6 7 8 | const luke = {
jedi: true,
age: 28,
};
const isJedi = luke[ 'jedi' ];
const isJedi = luke.jedi;
|
ログイン後にコピー
当通过变量访问属性时使用中括号 []。
1 2 3 4 5 6 7 8 | const luke = {
jedi: true,
age: 28,
};
function getProp(prop) {
return luke[prop];
}
const isJedi = getProp( 'jedi' );
|
ログイン後にコピー
求幂时使用求幂运算符 ** 。
eslint: no-restricted-properties.
1 2 3 4 | const binary = Math.pow(2, 10);
const binary = 2 ** 10;
|
ログイン後にコピー
变量 Variables
总是使用 const 或 let 来声明变量。 不这样做会导致产生全局变量。 我们希望避免污染全局命名空间。
eslint: no-undef prefer-const
1 2 3 4 | superPower = new SuperPower();
const superPower = new SuperPower();
|
ログイン後にコピー
将所有的 const 和 let 分组 。
当你需要把已分配的变量分配给一个变量时非常有用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | let i, len, dragonball,
items = getItems(),
goSportsTeam = true;
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;
|
ログイン後にコピー
变量不要链式赋值。
eslint: no-multi-assign
链接变量赋值会创建隐式全局变量。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | ( function example() {
let a = b = c = 1;
}());
console.log(a);
console.log(b);
console.log(c);
( function example() {
let a = 1;
let b = a;
let c = a;
}());
console.log(a);
console.log(b);
console.log(c);
|
ログイン後にコピー
避免使用一元递增和递减运算符(++, –)。
根据 eslint 文档,一元递增和递减语句会受到自动插入分号的影响,并可能导致应用程序中的值递增或递减,从而导致无提示错误。使用像 num += 1 而不是 num++ 或 num ++ 这样的语句来改变你的值也更具有表现力。不允许一元递增和递减语句也会阻止您无意中预先递增/递减值,这也会导致程序中的意外行为。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const array = [1, 2, 3];
let num = 1;
num++;
--num;
let sum = 0;
let truthyCount = 0;
for (let i = 0; i < array .length; i++) {
let value = array [i];
sum += value;
if (value) {
truthyCount++;
}
}
const array = [1, 2, 3];
let num = 1; num += 1; num -= 1;
const sum = array .reduce((a, b) => a + b, 0);
const truthyCount = array .filter(Boolean).length;
|
ログイン後にコピー
比较运算符 Comparison Operators 和 等号 Equality
使用 === 和 !== 优先于 == 和 !=。
eslint: eqeqeq
对于布尔值使用简写,但对于字符串和数字使用显式比较。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | if (isValid === true) {
}
if (isValid) {
}
if (name) {
}
if (name !== '' ) {
}
if (collection.length) {
}
if (collection.length > 0) {
}
|
ログイン後にコピー
在 case 和 default 子句中,使用大括号来创建包含词法声明的语句块(例如 let, const, function, 和 class).
eslint: no-case-declarations
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | switch (foo) {
case 1:
let x = 1;
break ;
case 2:
const y = 2;
break ;
case 3:
function f() {
}
break ;
default :
class C {}
}
switch (foo) {
case 1: {
let x = 1;
break ;
}
case 2: {
const y = 2;
break ;
}
case 3: {
function f() {
}
break ;
}
case 4:
bar();
break ;
default : {
class C {}
}
}
|
ログイン後にコピー
三元表达式不应该嵌套,通常写成单行表达式。
eslint: no-nested-ternary
1 2 3 4 5 6 7 8 9 10 11 12 | const foo = maybe1 > maybe2
? "bar"
: value1 > value2 ? "baz" : null;
const maybeNull = value1 > value2 ? 'baz' : null;
const foo = maybe1 > maybe2
? 'bar'
: maybeNull;
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
|
ログイン後にコピー
避免不必要的三元表达式语句。
eslint: no-unneeded-ternary
1 2 3 4 5 6 7 8 | / bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
const foo = a || b;
const bar = !!c;
const baz = !c;
|
ログイン後にコピー
当运算符混合在一个语句中时,请将其放在括号内。混合算术运算符时,不要将 * 和 % 与 + , -,,/ 混合在一起。
eslint: no-mixed-operators
这可以提高可读性,并清晰展现开发者的意图。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | / bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;
const bar = a ** b - 5 % d;
if (a || b && c) {
return d;
}
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
const bar = (a ** b) - (5 % d);
if ((a || b) && c) {
return d;
}
const bar = a + b / c * d;
|
ログイン後にコピー
代码块 Blocks
使用大括号包裹所有的多行代码块。
eslint: nonblock-statement-body-position
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | if (test)
return false;
if (test) return false;
if (test) {
return false;
}
function foo() { return false; }
function bar() {
return false;
}
|
ログイン後にコピー
如果通过 if 和 else 使用多行代码块,把 else 放在 if 代码块闭合括号的同一行。
eslint: brace-style
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | if (test) {
thing1();
thing2();
}
else {
thing3();
}
if (test) {
thing1();
thing2();
} else {
thing3();
}
|
ログイン後にコピー
如果一个 if 块总是执行一个 return 语句,后面的 else 块是不必要的。在 else if 块中的 return,可以分成多个 if 块来 return 。
eslint: no-else-return
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | function foo() {
if (x) {
return x;
} else {
return y;
}
}
function cats() {
if (x) {
return x;
} else if (y) {
return y;
}
}
function dogs() {
if (x) {
return x;
} else {
if (y) {
return y;
}
}
}
function foo() {
if (x) {
return x;
}
return y;
}
function cats() {
if (x) {
return x;
}
if (y) {
return y;
}
}
function dogs(x) {
if (x) {
if (z) {
return y;
}
} else {
return z;
}
}
|
ログイン後にコピー
控制语句 Control Statements
如果您的控制语句(if, while 的)太长或超过最大行长度,那么每个(分组)条件可以放单独一行。逻辑运算符应该放在每行起始处。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | if ((foo === 123 || bar === 'abc' ) && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
thing1();
}
if (foo === 123 &&
bar === 'abc' ) {
thing1();
}
if (foo === 123
&& bar === 'abc' ) {
thing1();
}
if (
foo === 123 &&
bar === 'abc'
) {
thing1();
}
if (
foo === 123
&& bar === 'abc'
) {
thing1();
}
if (
(foo === 123 || bar === "abc" )
&& doesItLookGoodWhenItBecomesThatLong()
&& isThisReallyHappening()
) {
thing1();
}
if (foo === 123 && bar === 'abc' ) {
thing1();
}
|
ログイン後にコピー
注释 Comments
多行注释使用 /* … /。
1 2 3 4 5 6 7 8 9 10 | function mergeCells(grid, cols, isAllSome) {
}
|
ログイン後にコピー
单行注释使用 // 。将单行注释放在续注释的语句上方。在注释之前放置一个空行,除非它位于代码块的第一行。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | const active = true;
const active = true;
function getType () {
console.log( 'fetching type...' );
const type = this.type || 'no type' ;
return type;
}
function getType () {
console.log( 'fetching type...' );
const type = this.type || 'no type' ;
return type;
}
function getType () {
const type = this.type || 'no type' ;
return type;
}
|
ログイン後にコピー
所有注释符和注释内容用一个空格隔开,让它更容易阅读。
eslint: spaced-comment
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | const active = true;
const active = true;
function make(tag) {
return element;
}
function make(tag) {
return element;
}
|
ログイン後にコピー
给注释增加 FIXME 或 TODO 的前缀,可以帮助其他开发者快速了解这个是否是一个需要重新复查的问题,或是你正在为需要解决的问题提出解决方案。这将有别于常规注释,因为它们是可操作的。使用 FIXME – need to figure this out 或者 TODO – need to implement。
使用 // FIXME: 来标识需要修正的问题。注:如果代码中有该标识,说明标识处代码需要修正,甚至代码是错误的,不能工作,需要修复,如何修正会在说明中简略说明。
1 2 3 4 5 6 7 | lass Calculator extends Abacus {
constructor() {
super();
total = 0;
}
}
|
ログイン後にコピー
使用 // TODO: 来标识需要实现的问题。注:如果代码中有该标识,说明在标识处有功能代码待编写,待实现的功能在说明中会简略说明。
1 2 3 4 5 6 7 | class Calculator extends Abacus {
constructor() {
super();
this.total = 0;
}
}
|
ログイン後にコピー
空格 Whitespace
使用 2 个空格作为缩进
1 2 3 4 5 6 7 8 9 10 11 12 | function foo() {
∙∙∙∙let name;
}
function bar() {
∙let name;
}
function baz() {
∙∙let name;
}
|
ログイン後にコピー
在大括号前放置 1 个空格。
eslint: space-before-blocks jscs: requireSpaceBeforeBlockStatements
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function test(){
console.log( 'test' );
}
function test() {
console.log( 'test' );
}
dog.set( 'attr' ,{
age: '1 year' ,
breed: 'Bernese Mountain Dog' ,
});
dog.set( 'attr' , {
age: '1 year' ,
breed: 'Bernese Mountain Dog' ,
});
|
ログイン後にコピー
在控制语句(if、while 等)的小括号前放一个空格。在函数调用及声明中,不在函数的参数列表前加空格。
eslint: keyword-spacing jscs: requireSpaceAfterKeywords
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | if (isJedi) {
fight ();
}
if (isJedi) {
fight();
}
function fight () {
console.log ( 'Swooosh!' );
}
function fight() {
console.log( 'Swooosh!' );
}
|
ログイン後にコピー
使用空格把运算符隔开。
eslint: space-infix-ops jscs: requireSpaceBeforeBinaryOperators, requireSpaceAfterBinaryOperators
1 2 3 4 | const x=y+5;
const x = y + 5;
|
ログイン後にコピー
在文件末尾插入一个空行。
eslint: eol-last
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { es6 } from './AirbnbStyleGuide' ;
export default es6;
import { es6 } from './AirbnbStyleGuide' ;
export default es6;
import { es6 } from './AirbnbStyleGuide' ;
export default es6;
|
ログイン後にコピー
长方法链式调用时使用缩进(2个以上的方法链式调用)。使用一个点 . 开头,强调该行是一个方法调用,不是一个新的声明。
eslint: newline-per-chained-call no-whitespace-before-property
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | $( '#items' ).find( '.selected' ).highlight(). end ().find( '.open' ).updateCount();
$( '#items' ).
find( '.selected' ).
highlight().
end ().
find( '.open' ).
updateCount();
$( '#items' )
.find( '.selected' )
.highlight()
. end ()
.find( '.open' )
.updateCount();
const leds = stage.selectAll( '.led' ).data(data).enter().append( 'svg:svg' ).classed( 'led' , true)
.attr( 'width' , (radius + margin) * 2).append( 'svg:g' )
.attr( 'transform' , `translate(${radius + margin},${radius + margin})`)
.call(tron.led);
const leds = stage.selectAll( '.led' )
.data(data)
.enter().append( 'svg:svg' )
.classed( 'led' , true)
.attr( 'width' , (radius + margin) * 2)
.append( 'svg:g' )
.attr( 'transform' , `translate(${radius + margin},${radius + margin})`)
.call(tron.led);
const leds = stage.selectAll( '.led' ).data(data);
|
ログイン後にコピー
不要在圆括号内加空格。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function bar( foo ) {
return foo;
}
function bar(foo) {
return foo;
}
if ( foo ) {
console.log(foo);
}
if (foo) {
console.log(foo);
}
|
ログイン後にコピー
不要在中括号内添加空格。
eslint: array-bracket-spacing jscs: disallowSpacesInsideArrayBrackets
1 2 3 4 5 6 | const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);
const foo = [1, 2, 3];
console.log(foo[0]);
|
ログイン後にコピー
在大括号内添加空格
1 2 3 4 | const foo = {clark: 'kent' };
const foo = { clark: 'kent' };
|
ログイン後にコピー
类型转换 Type Casting & Coercion
在声明语句的开始处就执行强制类型转换.
字符串:
eslint: no-new-wrappers
1 2 3 4 5 6 7 8 9 | const totalScore = new String(this.reviewScore);
const totalScore = this.reviewScore + '' ;
const totalScore = this.reviewScore.toString();
const totalScore = String(this.reviewScore);
|
ログイン後にコピー
使数字: 使用 Number 进行转换,而 parseInt 则始终以基数解析字串。
eslint: radix no-new-wrappers
1 2 3 4 5 6 7 8 9 10 11 12 13 | const inputValue = '4' ;
const val = new Number(inputValue);
const val = +inputValue;
const val = inputValue >> 0;
const val = parseInt(inputValue);
const val = Number(inputValue);
const val = parseInt(inputValue, 10);
|
ログイン後にコピー
布尔值:
eslint: no-new-wrappers
1 2 3 4 5 6 7 | const age = 0;
const hasAge = new Boolean(age);
const hasAge = Boolean(age);
const hasAge = !!age;
|
ログイン後にコピー
命名规则 Naming Conventions
避免使用单字母名称。使你的命名具有描述性。
eslint: id-length
1 2 3 4 5 6 7 8 | function q() {
}
function query() {
}
|
ログイン後にコピー
当命名对象,函数和实例时使用驼峰式命名。
eslint: camelcase jscs: requireCamelCaseOrUpperCaseIdentifiers
1 2 3 4 5 6 7 | const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
const thisIsMyObject = {};
function thisIsMyFunction() {}
|
ログイン後にコピー
当命名构造函数或类的时候使用 PascalCase 式命名,(注:即单词首字母大写)。
eslint: new-cap
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function user(options) {
this.name = options.name;
}
const bad = new user({
name: 'nope' ,
});
class User {
constructor(options) {
this.name = options.name;
}
}
const good = new User({
name: 'yup' ,
});
|
ログイン後にコピー
当 导出(export) 一个默认函数时使用驼峰式命名。你的文件名应该和你的函数的名字一致。
1 2 3 4 | function makeStyleGuide() {
}
export default makeStyleGuide;
|
ログイン後にコピー
当导出一个 构造函数 / 类 / 单例 / 函数库 / 纯对象时使用 PascalCase 式命名,(愚人码头注:即单词首字母大写)。
1 2 3 4 5 | const AirbnbStyleGuide = {
es6: {
},
};
export default AirbnbStyleGuide;
|
ログイン後にコピー
存取器 Accessors
属性的存取器函数不是必须的。
別使用 JavaScript 的 getters/setters,因为它们会导致意想不到的副作用,而且很难测试,维护和理解。相反,如果要使用存取器函数,使用 getVal() 及 setVal(‘hello’)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | class Dragon {
get age() {
}
set age(value) {
}
}
class Dragon {
getAge() {
}
setAge(value) {
}
}
|
ログイン後にコピー
如果属性/方法是一个 boolean, 使用 isVal() 或 hasVal() 方法。
1 2 3 4 5 6 7 8 9 | if (!dragon.age()) {
return false;
}
if (!dragon.hasAge()) {
return false;
}
)
|
ログイン後にコピー
以上がJavaScript のコーディング標準の概要 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。