使用英文

使用英文命名變數和函式(方法).

/* Bad */const 名字 = 'Gustavo'const 朋友 = ['Kate', 'John']/* Good */const firstName = 'Gustavo'const friends = ['Kate', 'John']

命名約定

遵循一種命名約定, 它可以是camelCase，也可以是snake_case，或者其他的，都沒有關係。重要的是它要保持一致。

/* Bad */const page_count = 5const shouldUpdate = true/* Good */const pageCount = 5const shouldUpdate = true/* Good as well */const page_count = 5const should_update = true

S-I-D

名稱必須簡短、直觀和描述性:

簡短: 一個名字一定不要花很長的時間來鍵入直觀: 一個名字必須讀起來自然，儘可能接近日常用語描述性: 一個名字必須以最有效的方式反映它所做/擁有的東西

/* Bad */const a = 5 // "a" could mean anythingconst isPaginatable = a > 10 // "Paginatable" sounds extremely unnaturalconst shouldPaginatize = a > 10 // Made up verbs are so much fun!/* Good */const postCount = 5const hasPagination = postCount > 10const shouldDisplayPagination = postCount > 10 // alternatively

避免縮寫

不要使用縮寫, 它們只會降低程式碼的可讀性

/* Bad */const onItmClk = () => {}/* Good */const onItemClick = () => {}

避免上下文重複

名稱不應與定義它的上下文重複

class MenuItem {  /* Method name duplicates the context (which is "MenuItem") */  handleMenuItemClick = (event) => { ... }  /* Reads nicely as `MenuItem.handleClick()` */  handleClick = (event) => { ... }}

反映預期結果

名稱應該反映預期的結果

/* Bad */const isEnabled = itemCount > 3return <Button disabled={!isEnabled} />/* Good */const isDisabled = itemCount <= 3return <Button disabled={isDisabled} />

命名函式(方法)

A/HC/LC 模式

prefix? + action (A) + high context (HC) + low context? (LC)

注意: 上下文的順序將會影響變數的含義.

Actions

函式名的動詞部分需要描述該函式功能的最重要的部分.

get: 訪問資料

function getFruitCount() {  return this.fruits.length}

set: 以宣告的方式設定一個變數的值

let fruits = 0function setFruits(nextFruits) {  fruits = nextFruits}setFruits(5)console.log(fruits) // 5

reset: 將變數設定為初始值或者初始狀態

const initialFruits = 5let fruits = initialFruitssetFruits(10)console.log(fruits) // 10function resetFruits() {  fruits = initialFruits}resetFruits()console.log(fruits) // 5

fetch: 請求一些可能需要花費不確定時間的資料,比如非同步請求.

function fetchPosts(postCount) {  return fetch('https://api.dev/posts', {...})}

remove: 從某個地方移除某物。

function removeFilter(filterName, filters) {  return filters.filter((name) => name !== filterName)}const selectedFilters = ['price', 'availability', 'size']removeFilter('price', selectedFilters)

delete: 完全刪除某物

function deletePost(id) {  return database.find({ id }).delete()}

compose: 從現有資料建立新資料。主要適用於字串、物件或函式。

function composePageUrl(pageName, pageId) {  return `${pageName.toLowerCase()}-${pageId}`}

handle: 處理一個動作, 經常在命名回撥方法時使用

function handleLinkClick() {  console.log('Clicked a link!')}link.addEventListener('click', handleLinkClick)

Context

函式作用域, 函式通常是對某物的動作, 重要的是要說明它的可操作域是什麼，或者至少說明預期的資料型別

/* A pure function operating with primitives */function filter(predicate, list) {  return list.filter(predicate)}/* Function operating exactly on posts */function getRecentPosts(posts) {  return filter(posts, (post) => post.date === Date.now())}

Prefixes

字首增強了變數的含義, 很少用於函式名中。

is: 描述當前上下文的特徵或狀態(通常為布林值)

const color = 'blue'const isBlue = color === 'blue' // characteristicconst isPresent = true // stateif (isBlue && isPresent) {  console.log('Blue is present!')}

has: 描述當前上下文是否具有某個值或狀態(通常為布林值)

/* Bad */const isProductsExist = productsCount > 0const areProductsPresent = productsCount > 0/* Good */const hasProducts = productsCount > 0

should: 反映了一個條件語句(通常為布林值)以及相對應的特定操作

function shouldUpdateUrl(url, expectedUrl) {  return url !== expectedUrl}

min / max: 表示最小值或最大值,用於描述界限或限制

/** * Renders a random amount of posts within * the given min/max boundaries. */function renderPosts(posts, minPosts, maxPosts) {  return posts.slice(0, randomBetween(minPosts, maxPosts))}

prev / next: 指示當前上下文中變數的前一個或下一個狀態, 在描述狀態轉換時使用

function fetchPosts() {  const prevPosts = this.state.posts  const fetchedPosts = fetch('...')  const nextPosts = concat(prevPosts, fetchedPosts)  this.setState({ posts: nextPosts })}

單數和複數

和字首一樣，變數名也可以是單數或複數，這取決於它們是包含單個值還是多個值

/* Bad */const friends = 'Bob'const friend = ['Bob', 'Tony', 'Tanya']/* Good */const friend = 'Bob'const friends = ['Bob', 'Tony', 'Tanya']