コードスタイル
ファイル
【必須】 JavaScriptソースファイルはBOMなしのUTF-8でエンコードする必要があります。
インデント
【必須】 インデントはスペース4つを使用します。タブとスペース2つは使用できません。
【必須】 switch文のcaseとdefaultはインデントする必要があります。
// good
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}
// bad
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}
スペース
【必須】 二項演算子の前後にはスペースを入れます。ただし、単項演算子とそのオペランドの間にはスペースを入れません。
let a = !arr.length;
a++;
a = b + c;
【必須】 開き括弧の前にスペースを1つ入れます。
// good
if (condition) {
}
set('attr', {
some: 'xxx',
any: 'yyy'
});
function funcName() {
}
// bad
if (condition){
}
set('attr',{
some: 'xxx',
any: 'yyy'
});
function funcName(){
}
【必須】 if / else / for / while / function / switch / do / try / catch / finallyの後にはスペースを1つ入れます。
// good
if (condition) {
}
while (condition) {
}
(function () {
})();
// bad
if(condition) {
}
while(condition) {
}
(function() {
})();
【必須】 オブジェクト生成ステートメントでは、:の後にはスペースを1つ入れますが、前にはスペースを入れません。
// good
const obj = {
a: 1,
b: 2,
c: 3
};
// bad
const obj = {
a : 1,
b:2,
c :3
};
【必須】 関数宣言、名前付き関数式、関数呼び出しでは、関数名と(の間にスペースを入れません。
// good
function funcName() {
}
const funcName = function funcName() {
};
funcName();
// bad
function funcName () {
}
const funcName = function funcName () {
};
funcName ();
【必須】 ,と;の間にスペースを入れません。
// good
callFunc(a, b);
// bad
callFunc(a , b) ;
【必須】 (と[の後、および)と]の前にはスペースを入れません。
// good
callFunc(param1, param2, param3);
save(this.list[this.indexes[i]]);
needIncream && (variable += increament);
if (num > list.length) {
}
while (len--) {
}
// bad
callFunc( param1, param2, param3 );
save( this.list[ this.indexes[ i ] ] );
needIncreament && ( variable += increament );
if ( num > list.length ) {
}
while ( len-- ) {
}
// good
const arr1 = [];
const arr2 = [1, 2, 3];
const obj1 = {};
const obj2 = {name: 'obj'};
const obj3 = {
name: 'obj',
age: 20,
sex: 1
};
// bad
const arr1 = [ ];
const arr2 = [ 1, 2, 3 ];
const obj1 = { };
const obj2 = { name: 'obj' };
const obj3 = {name: 'obj', age: 20, sex: 1};
【必須】 各行の末尾にスペースを入れてはいけません。
改行
【必須】 文の終わりで改行します。
【必須】 1行あたり120文字以内とします。
【必須】 演算子が改行される場合は、行の先頭に配置します。
// good
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// Code
}
const result = number1 + number2 + number3
+ number4 + number5;
// bad
if (user.isAuthenticated() &&
user.isInRole('admin') &&
user.hasAuthority('add-admin') ||
user.hasAuthority('delete-admin')) {
// Code
}
const result = number1 + number2 + number3 +
number4 + number5;
【必須】 括弧内の内容が複数行にわたる場合は、)、]、}を新しい行で開始します。対応する(、[、{が配置されている行と同じインデントにします。
// good
if (product) {
product.load();
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
) {
sendProduct(user, product);
}
}
const arr = [
'candy', 'sugar'
];
// bad
if (product) {
product.load();
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')) {
sendProduct(user, product);
}
}
const arr = [
'candy', 'sugar'
];
【必須】 ,または;の前に改行を入れてはいけません。
// good
const obj = {
a: 1,
b: 2,
c: 3
};
foo(
aVeryVeryLongArgument,
anotherVeryLongArgument,
callback
);
// bad
const obj = {
a: 1
, b: 2
, c: 3
};
foo(
aVeryVeryLongArgument
, anotherVeryLongArgument
, callback
);
【推奨】 改行とインデントに関する推奨事項
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
) {
// Code
}
foo(
aVeryVeryLongArgument,
anotherVeryLongArgument,
callback
);
baidu.format(
dateFormatTemplate,
year, month, date, hour, minute, second
);
$('#items')
.find('.selected')
.highlight()
.end();
const result = thisIsAVeryVeryLongCondition
? resultA : resultB;
const res = condition
? thisIsAVeryVeryLongResult
: resultB;
【必須】 複数行のブロックを使用する場合は、elseとcatchを新しい行で開始します。
// good
if (condition) {
// some statements;
}
else {
// some statements;
}
try {
// some statements;
}
catch (ex) {
// some statements;
}
// bad
if (condition) {
// some statements;
} else {
// some statements;
}
try {
// some statements;
} catch (ex) {
// some statements;
}
ステートメント
【必須】 文の末尾のセミコロンを省略してはいけません。
【必須】 1行しかない場合でも、{}を省略してはいけません。
// good
if (condition) {
callFunc();
}
// bad
if (condition) callFunc();
if (condition)
callFunc();
【必須】 関数定義の末尾にセミコロンを置いてはいけません。
// good
function funcName() {
}
// bad
function funcName() {
};
// For function expression, the semicolon must not be ignored.
const funcName = function () {
};
【必須】 オブジェクトおよび配列宣言に末尾カンマを入れてはいけません。
// good
const obj = {
attr1: 'xxx',
attr2: 'yyy'
};
const arr = [
'xxx',
'yyy'
];
// bad
const obj = {
attr1: 'xxx',
attr2: 'yyy',
};
const arr = [
'xxx',
'yyy',
];
命名規則
【必須】 変数、プロパティ、関数名にはlowerCamelCaseを使用します。
const loadingModules = {};
function loadProduct() {
}
【必須】 クラス名にはUpperCamelCase（パスカルケース）を使用します。
function Element(options) {
}
【推奨】 略語のすべての文字は大文字または小文字のいずれかに統一します。
function parseSVG() {
}
const svgParser;
言語機能
互換性
言語機能は、ユーティリティによってポリフィルできますが、組み込みJSオブジェクトのプロトタイプを変更することによってポリフィルしてはいけません。
// good
import * as zrUtil from 'zrender/src/core/util';
zrUtil.each(array, function (val, index) {
sum += val;
});
const result = zrUtil.map(array, function (val) {
return parse(val);
});
const pos = zrUtil.indexOf(array, val);
const obj2 = zrUtil.extend({}, obj1);
function Element() {
// ...
}
// bad
array.forEach(function (val, index) {
sum += val;
});
let result = array.map(function (val) {
return parse(val);
});
const pos = array.indexOf(val);
const obj2 = Object.assign({}, obj1);
class Element {
// ...
}
String.prototype.trim = function () {
};
変数
【必須】 変数の宣言にはconstを使用します。1行で複数の変数を宣言することはできません。
// good
const name = 'MyName';
const hangModules = [];
const missModules = [];
const visited = {};
// bad
name = 'MyName';
const hangModules = [],
missModules = [],
visited = {};
条件
【必須】 等価演算子では、==はnullまたはundefinedの検出にのみ使用できます。それ以外の場合は===を使用する必要があります。
// good
if (age === 30) {
// ...
}
if (type == null) {
// ...
}
// bad
if (age == 30) {
// ......
}
【推奨】 nullまたはundefinedを判定するには、xxx == nullを使用します。
【推奨】 nullとundefinedの意味をできるだけ同じにします。つまり、ユーザーまたは開発者が変数がnullかundefinedかを区別する必要がないようにします。
【推奨】 関数式または関数宣言をループ本体内に配置しないでください。
// good
function clicker() {
// ......
}
for (let i = 0, len = elements.length; i < len; i++) {
const element = elements[i];
addListener(element, 'click', clicker);
}
// bad
for (let i = 0, len = elements.length; i < len; i++) {
const element = elements[i];
addListener(element, 'click', function () {});
}
型変換
【推奨】 値を文字列に変換するには、+ ''を使用します。
// good
num + '';
// bad
new String(num);
num.toString();
String(num);
【推奨】 値を数値に変換するには、+を使用します。
// good
+str;
// bad
Number(str);
【必須】 parseIntを使用する場合は、2番目のパラメータを省略してはいけません。
// good
parseInt(str, 10);
// bad
parseInt(str);
文字列、オブジェクト、配列
【必須】 文字列を定義するには、"ではなく'を使用します。
【必須】 プレーンオブジェクトを作成するには、オブジェクトリテラル{}を使用します。
// good
const obj = {};
// bad
const obj = new Object();
【必須】 オブジェクトリテラルのすべてのプロパティに引用符が必要ない場合は、引用符を省略します。引用符が必要な場合は、"ではなく'を使用します。
// good
const info = {
name: 'someone',
age: 28
};
// bad
const info = {
'name': 'someone',
'age': 28
};
const info2 = {
"age": 40
};
【必須】 組み込みオブジェクトのプロトタイプを変更してはいけません。
// Forbidden
String.prototype.trim = function () {
};
【推奨】 オブジェクトのプロパティにアクセスするには、[]ではなく.を使用するようにしてください。
【推奨】 for ... in ...を使用する場合は、一部の実行時環境で`Object`のプロトタイプに余分なプロパティが追加される場合があるため、`hasOwnProperty`を使用する必要があります。
const newInfo = {};
for (const key in info) {
if (info.hasOwnProperty(key)) {
newInfo[key] = info[key];
}
}
【必須】 配列を作成するには、特定の長さの配列を作成する場合を除き、配列リテラル[]を使用します。
// good
const arr = [];
const arr2 = new Array(1e4);
// bad
const arr = new Array();
【必須】 配列の走査に`for in`を使用してはいけません。
その他
【必須】 evalとwithを使用してはいけません。new Functionは使用できます。