變數的命名 (for Variables)

  1. 使用 camelCase 為變數命名
// bad
var dogname = 'Droopy'; 
// bad
var dog_name = 'Droopy'; 
// bad
var DOGNAME = 'Droopy'; 
// bad
var DOG_NAME = 'Droopy'; 

// good
var dogName = 'Droopy';
  1. 明確表明意義的命名 (self-explanatory and describe the stored value)
// bad
var d = 'Scooby-Doo';
// bad
var name = 'Scooby-Doo';

// good
var dogName = 'Scooby-Doo';

布林值的命名 (for Booleans)

使用開頭為 is/has 的命名 (Use is or has as prefixes)

// bad
var bark = false;
// good
var isBark = false;

// bad
var ideal = true;
// good
var areIdeal = true;

// bad
var owner = true;
// good
var hasOwner = true;

函式的命名(for Functions)

  1. 使用 camelCase 為函式命名
  2. 使用動詞作為前綴
  3. 如果有特定意義或範圍，使用描述性的名詞作為前綴

Use descriptive nouns and verbs as prefixes.

// bad
function dogName(dogName, ownerName) { 
  return `${dogName} ${ownerName}`;
}

// good
function getDogName(dogName, ownerName) { 
  return `${dogName} ${ownerName}`;
}

常數的命名(for Constants)

  1. 使用 UPPERCASE 為常數命名(表示它們是不變的變數)
var SPEED = 1;
  1. 如果常數宣告名稱包含多個單字，則應使用 UPPER_SNAKE_CASE。
var DAYS_UNTIL_TOMORROW = 1;

類別的命名(for Classes)

使用 PascalCase 為類別命名

class Dog {
  constructor() {}
}

方法的命名(for Methods)

使用 camelCase 為元件命名

class Dog {
  constructor() {}
  pickUpBall() {}
}

私有函式/私有變數的命名(for Private Functions/Variables in Classes)

Use a hash # prefix.

class ClassWithPrivate {
  #privateField;
  #privateFieldWithInitializer = 42;

  #privateMethod() {
    // …
  }

  static #privateStaticField;
  static #privateStaticFieldWithInitializer = 42;

  static #privateStaticMethod() {
    // …
  }
}

元件的命名(for Components)

使用 PascalCase 為元件命名

function Dog(){
  return <div></div>
}

全域變數的命名 (for Global Variables)

如果變數在所有地方都可以存取它，則它被定義為全域變數 全域 JavaScript 變數沒有特殊的命名約定，但仍可以嘗試遵守下列原則：

  1. 全域 JavaScript 變數在專案/文件的頂部聲明
  2. 如果全域 JavaScript 變數是可變的，則以 camelCase 命名
  3. 如果全域 JavaScript 變數是不可變的，則用 UPPERCASE 命名

錯誤情境需要有效管理

  1. add unhandledrejection event to capture unhandled promise
  2. fill all reject message for useful tracing
function createScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = src
    script.onload = () => {
      resolve()
    }
    script.onerror = () => {
      reject(new Error('load script error'))
    }
  })
}

使用 promise 時，一定要記得 catch，否則 sentry 上會收到 unhandled promise rejection

// ❌
function loadScript() {
  return createScript('https://xxx/axios.min.js')
    .then(() => {
      console.log('axios loaded')
    })
}

// ❌
async function loadScript() {
  await createScript('https://xxx/axios.min.js')
  console.log('axios loaded')
}

// ✅
function loadScript() {
  return createScript('https://xxx/axios.min.js')
    .then(() => {
      console.log('axios loaded')
    })
    .catch((error) => {
      console.error(error)
    })
}

// ✅
async function loadScript() {
  try {
    await createScript('https://xxx/axios.min.js')
    console.log('axios loaded')
  } catch (error) {
    console.error(error)
  }
}

reject 一定要帶值，否則 sentry 上會收到 undefined promise rejection

// ❌
reject()
// ✅
reject(new Error('error message'))
// ✅
reject('error message')