JavaScript語法規範

採用小寫駝峯式命名

// good
studentInfo

// bad
studentinfo
STUDENTINFO
複製代碼

常量命名方式

// good
const COL_NUM = 10;

// bad
const col_num = 10;
複製代碼

使用字面量

// good
const obj = {   
    name:'faker'
}

// bad
let obj = {};
obj.name = 'faker';
複製代碼

函數參數使用解構

// good
function createPerson({ name, age }) {
  // ...
}
createPerson({
  name: 'Faker',
  age: 18,
});

// bad
function createPerson(name, age) {
  // ...
}
複製代碼

使用參數默認值

// good
function createMicrobrewery(name = 'faker') {
  // ...
}

// bad
function createMicrobrewery(name) {
  const breweryName = name || 'faker';
  // ...
}
複製代碼

函數式編程

// good
const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];
let totalOutput = programmerOutput
  .map(output => output.linesOfCode)
  .reduce((totalLines, lines) => totalLines + lines, 0)

// bad
const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
    totalOutput += programmerOutput[i].linesOfCode;
}
複製代碼

縮進

統一使用一個tab做爲縮進

空格

二元運算符兩側必須有一個空格，一元運算符與操做對象之間不容許有空格。 用做代碼塊起始的左花括號 { 前必須有一個空格。

// good
var a = !arr.length;
a++;
a = b + c;

// good
if (condition) {
}

while (condition) {
}

function funcName() {
}

// bad
if (condition){
}

while (condition){
}

function funcName(){
}
複製代碼

禁止使用var，使用let、const代替

// good
let a = 123;

// bad
var a = 123;
複製代碼

js中使用單引號'，在dom中使用雙引號"

// good
const str = '我是一個字符串';
<div className="div" />

// bad
const str = "我是一個字符串";
<div className='div' />
複製代碼

使用模板字符拼接字符串``

// good
const name = 'faker';
const str = `我叫${a}`;

// bad
const name = 'faker';
const str = '我叫' + a;
複製代碼

變量命名語義化

// good
const student = 'faker';

// bad
const a = 'faker';
複製代碼

註釋

• 單行註釋：必須獨佔一行。// 後跟一個空格，縮進與下一行被註釋說明的代碼一致
• 多行註釋：避免使用 /.../ 這樣的多行註釋。有多行註釋內容時，使用多個單行註釋
• 文檔化註釋：爲了便於代碼閱讀和自文檔化，如下內容必須包含以 /**...*/ 形式的塊註釋中。

每一個js文件在頭部須要給出該頁面的信息

// good
/*
 * 充值記錄頁面
 * @Author: Jiang
 * @Date: 2019-06-12 15:21:19
 * @Last Modified by: Jiang
 * @Last Modified time: 2019-07-23 10:55:51
*/

// bad
無任何註釋
複製代碼

不要省略分號

// good
const student = 'faker';

// bad
const student = 'faker'
複製代碼