naming cheatsheet

Penamaan Cheatsheet

• Bahasa Inggris
• Konvensi Penamaan
• Sid
• Hindari kontraksi
• Hindari duplikasi konteks
• Mencerminkan hasil yang diharapkan
• Fungsi penamaan
  • Pola A/HC/LC
    • Tindakan
    • Konteks
    • Awalan
• Singular dan Plural

---

Penamaan hal -hal itu sulit. Lembar ini berusaha membuatnya lebih mudah.

Meskipun saran -saran ini dapat diterapkan pada bahasa pemrograman apa pun, saya akan menggunakan JavaScript untuk menggambarkannya dalam praktik.

Bahasa Inggris

Gunakan bahasa Inggris saat menamai variabel dan fungsi Anda.

 /* Bad */
const primerNombre = 'Gustavo'
const amigos = [ 'Kate' , 'John' ]

/* Good */
const firstName = 'Gustavo'
const friends = [ 'Kate' , 'John' ]

Suka atau tidak, bahasa Inggris adalah bahasa yang dominan dalam pemrograman: sintaks semua bahasa pemrograman ditulis dalam bahasa Inggris, serta dokumentasi dan materi pendidikan yang tak terhitung jumlahnya. Dengan menulis kode Anda dalam bahasa Inggris, Anda secara dramatis meningkatkan kekompakannya.

Konvensi Penamaan

Pilih satu konvensi penamaan dan ikuti. Mungkin camelCase , atau snake_case , atau bagaimanapun, tidak masalah. Yang penting bagi itu untuk tetap konsisten.

 /* Bad */
const pages_count = 5
const shouldUpdate = true

/* Good */
const pageCount = 5
const shouldUpdate = true

/* Good as well */
const page_count = 5
const should_update = true 

Sid

Nama harus pendek , intuitif dan deskriptif :

• Pendek . Nama tidak perlu waktu lama untuk mengetik dan, karena itu, ingat;
• Intuitif . Nama harus dibaca secara alami, sedekat mungkin dengan pidato umum;
• Deskriptif . Nama harus mencerminkan apa yang dilakukan/dimiliki dengan cara yang paling efisien.

 /* Bad */
const a = 5 // "a" could mean anything
const isPaginatable = a > 10 // "Paginatable" sounds extremely unnatural
const shouldPaginatize = a > 10 // Made up verbs are so much fun!

/* Good */
const postCount = 5
const hasPagination = postCount > 10
const shouldDisplayPagination = postCount > 10 // alternatively 

Hindari kontraksi

Jangan gunakan kontraksi. Mereka berkontribusi apa pun selain penurunan keterbacaan kode. Menemukan nama yang pendek dan deskriptif mungkin sulit, tetapi kontraksi bukan alasan untuk tidak melakukannya.

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

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

Hindari duplikasi konteks

Nama tidak boleh menduplikasi konteks yang didefinisikannya. Selalu hapus konteks dari nama jika itu tidak mengurangi keterbacaannya.

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

  /* Reads nicely as `MenuItem.handleClick()` */
  handleClick = ( event ) => { ... }
} 

Mencerminkan hasil yang diharapkan

Nama harus mencerminkan hasil yang diharapkan.

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

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

---

Fungsi penamaan

Pola A/HC/LC

Ada pola yang berguna untuk diikuti saat penamaan fungsi:

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

Lihatlah bagaimana pola ini dapat diterapkan dalam tabel di bawah ini.

Nama	Awalan	Tindakan (a)	Konteks Tinggi (HC)	Konteks Rendah (LC)
getPost		get	Post
getPostData		get	Post	Data
handleClickOutside		handle	Click	Outside
shouldDisplayMessage	should	Display	Message

Catatan: Urutan konteks mempengaruhi makna suatu variabel. Misalnya, shouldUpdateComponent berarti Anda akan memperbarui komponen, sementara shouldComponentUpdate memberi tahu Anda bahwa komponen akan memperbarui dirinya sendiri, dan Anda hanya mengendalikan kapan harus diperbarui. Dengan kata lain, konteks tinggi menekankan makna variabel .

---

Tindakan

Bagian kata kerja dari nama fungsi Anda. Bagian terpenting yang bertanggung jawab untuk menggambarkan apa yang dilakukan fungsi tersebut.

get

Mengakses data segera (yaitu pengambil data internal).

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

Lihat juga Tulis.

set

Menetapkan variabel dengan cara deklaratif, dengan nilai A ke nilai B .

 let fruits = 0

function setFruits ( nextFruits ) {
  fruits = nextFruits
}

setFruits ( 5 )
console . log ( fruits ) // 5

reset

Menetapkan variabel kembali ke nilai atau status awalnya.

 const initialFruits = 5
let fruits = initialFruits
setFruits ( 10 )
console . log ( fruits ) // 10

function resetFruits ( ) {
  fruits = initialFruits
}

resetFruits ( )
console . log ( fruits ) // 5

fetch

Minta beberapa data, yang membutuhkan waktu yang tidak ditentukan (yaitu permintaan async).

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

remove

Menghapus sesuatu dari suatu tempat.

Misalnya, jika Anda memiliki koleksi filter yang dipilih pada halaman pencarian, menghapus salah satunya dari koleksi adalah removeFilter , bukan deleteFilter (dan ini adalah bagaimana Anda secara alami mengatakannya dalam bahasa Inggris juga):

 function removeFilter ( filterName , filters ) {
  return filters . filter ( ( name ) => name !== filterName )
}

const selectedFilters = [ 'price' , 'availability' , 'size' ]
removeFilter ( 'price' , selectedFilters )

Lihat juga Hapus.

delete

Benar -benar menghapus sesuatu dari ranah keberadaan.

Bayangkan Anda adalah editor konten, dan ada posting terkenal yang ingin Anda singkirkan. Setelah Anda mengklik tombol "hapus postingan" mengkilap, CMS melakukan tindakan deletePost , bukan removePost .

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

Lihat juga hapus.

compose

Membuat data baru dari yang sudah ada. Sebagian besar berlaku untuk string, objek, atau fungsi.

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

Lihat juga dapatkan.

handle

Menangani suatu tindakan. Sering digunakan saat menamai metode panggilan balik.

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

link . addEventListener ( 'click' , handleLinkClick ) 

---

Konteks

Domain yang dioperasikan oleh fungsi.

Suatu fungsi seringkali merupakan tindakan pada sesuatu . Penting untuk menyatakan domain apa yang dapat dioperasikan, atau setidaknya tipe data yang diharapkan.

 /* 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 ( ) )
}

Beberapa asumsi khusus bahasa memungkinkan menghilangkan konteks. Misalnya, dalam JavaScript, adalah umum bahwa filter beroperasi pada array. Menambahkan filterArray eksplisit tidak perlu.

-

Awalan

Awalan meningkatkan arti suatu variabel. Jarang digunakan dalam nama fungsi.

is

Menggambarkan karakteristik atau keadaan konteks saat ini (biasanya boolean ).

 const color = 'blue'
const isBlue = color === 'blue' // characteristic
const isPresent = true // state

if ( isBlue && isPresent ) {
  console . log ( 'Blue is present!' )
}

has

Menggambarkan apakah konteks saat ini memiliki nilai atau keadaan tertentu (biasanya boolean ).

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

/* Good */
const hasProducts = productsCount > 0

should

Mencerminkan pernyataan bersyarat positif (biasanya boolean ) ditambah dengan tindakan tertentu.

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

min / max

Mewakili nilai minimum atau maksimum. Digunakan saat menggambarkan batas atau batasan.

 /**
 * 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

Tunjukkan keadaan sebelumnya atau berikutnya dari suatu variabel dalam konteks saat ini. Digunakan saat menggambarkan transisi negara.

 function fetchPosts ( ) {
  const prevPosts = this . state . posts

  const fetchedPosts = fetch ( '...' )
  const nextPosts = concat ( prevPosts , fetchedPosts )

  this . setState ( { posts : nextPosts } )
} 

Singular dan Plural

Seperti awalan, nama variabel dapat dibuat tunggal atau jamak tergantung pada apakah mereka memiliki nilai tunggal atau beberapa nilai.

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

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