naming cheatsheet
1.0.0
การตั้งชื่อสิ่งต่าง ๆ เป็นเรื่องยาก แผ่นนี้พยายามทำให้ง่ายขึ้น
แม้ว่าคำแนะนำเหล่านี้สามารถนำไปใช้กับภาษาการเขียนโปรแกรมใด ๆ แต่ฉันจะใช้ JavaScript เพื่อแสดงให้เห็นในทางปฏิบัติ
ใช้ภาษาอังกฤษเมื่อตั้งชื่อตัวแปรและฟังก์ชั่นของคุณ
/* Bad */
const primerNombre = 'Gustavo'
const amigos = [ 'Kate' , 'John' ]
/* Good */
const firstName = 'Gustavo'
const friends = [ 'Kate' , 'John' ]ชอบหรือไม่ภาษาอังกฤษเป็นภาษาที่โดดเด่นในการเขียนโปรแกรม: ไวยากรณ์ของภาษาการเขียนโปรแกรมทั้งหมดเขียนเป็นภาษาอังกฤษรวมถึงเอกสารมากมายและสื่อการศึกษา โดยการเขียนรหัสของคุณเป็นภาษาอังกฤษคุณจะเพิ่มความร่วมมืออย่างมาก
เลือก หนึ่ง การตั้งชื่อการประชุมและติดตามมัน มันอาจจะเป็น camelCase หรือ snake_case หรืออย่างอื่นมันไม่สำคัญ สิ่งที่สำคัญคือให้มันคงที่
/* 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 ชื่อต้อง สั้น ใช้งานง่าย และ อธิบาย :
/* 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 อย่า ใช้การหดตัว พวกเขามีส่วนช่วยอะไรนอกจากลดความสามารถในการอ่านรหัส การหาชื่อสั้น ๆ อาจเป็นเรื่องยาก แต่การหดตัวไม่ใช่ข้อแก้ตัวสำหรับการไม่ทำเช่นนั้น
/* 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 > 3
return < Button disabled = { ! isEnabled } />
/* Good */
const isDisabled = itemCount <= 3
return < Button disabled = { isDisabled } />มีรูปแบบที่มีประโยชน์ที่จะติดตามเมื่อฟังก์ชั่นการตั้งชื่อ:
prefix? + action (A) + high context (HC) + low context? (LC)
ดูว่ารูปแบบนี้อาจใช้ในตารางด้านล่างได้อย่างไร
| ชื่อ | คำนำหน้า | การดำเนินการ (a) | บริบทสูง (HC) | บริบทต่ำ (LC) |
|---|---|---|---|---|
getPost | get | Post | ||
getPostData | get | Post | Data | |
handleClickOutside | handle | Click | Outside | |
shouldDisplayMessage | should | Display | Message |
หมายเหตุ: ลำดับของบริบทมีผลต่อความหมายของตัวแปร ตัวอย่างเช่น
shouldUpdateComponentหมายความว่า คุณ กำลังจะอัปเดตส่วนประกอบในขณะที่shouldComponentUpdateบอกคุณว่า ส่วนประกอบ จะอัปเดตด้วยตัวเองและคุณกำลังควบคุมเมื่อควรอัปเดตเมื่อใด กล่าวอีกนัยหนึ่ง บริบทสูงเน้นความหมายของตัวแปร
ส่วนคำกริยาของชื่อฟังก์ชั่นของคุณ ส่วนที่สำคัญที่สุดที่รับผิดชอบในการอธิบายว่าฟังก์ชั่น ทำ อะไร
getเข้าถึงข้อมูลทันที (เช่นการจดชวเลขของข้อมูลภายใน)
function getFruitCount ( ) {
return this . fruits . length
}ดูแต่งด้วย
set ตั้งค่าตัวแปรในวิธีที่ประกาศโดยมีค่า A ถึงค่า B
let fruits = 0
function setFruits ( nextFruits ) {
fruits = nextFruits
}
setFruits ( 5 )
console . log ( fruits ) // 5resetตั้งค่าตัวแปรกลับเป็นค่าเริ่มต้นหรือสถานะ
const initialFruits = 5
let fruits = initialFruits
setFruits ( 10 )
console . log ( fruits ) // 10
function resetFruits ( ) {
fruits = initialFruits
}
resetFruits ( )
console . log ( fruits ) // 5fetchขอข้อมูลบางอย่างซึ่งใช้เวลาไม่แน่นอน (เช่นคำขอ Async)
function fetchPosts ( postCount ) {
return fetch ( 'https://api.dev/posts' , { ... } )
}removeลบบางสิ่งบางอย่างออก จาก ที่ใดที่หนึ่ง
ตัวอย่างเช่นหากคุณมีคอลเลกชันของตัวกรองที่เลือกในหน้าการค้นหาการลบหนึ่งในนั้นออกจากคอลเลกชันคือ removeFilter ไม่ใช่ deleteFilter (และนี่คือวิธีที่คุณจะพูดเป็นภาษาอังกฤษโดยธรรมชาติ):
function removeFilter ( filterName , filters ) {
return filters . filter ( ( name ) => name !== filterName )
}
const selectedFilters = [ 'price' , 'availability' , 'size' ]
removeFilter ( 'price' , selectedFilters )ดูเพิ่มเติมลบ
deleteลบบางสิ่งบางอย่างออกจากอาณาจักรแห่งการดำรงอยู่อย่างสมบูรณ์
ลองนึกภาพคุณเป็นตัวแก้ไขเนื้อหาและมีโพสต์ที่มีชื่อเสียงที่คุณต้องการกำจัด เมื่อคุณคลิกปุ่ม "ลบโพสต์" ที่เป็นประกาย CMS จะทำการกระทำที่ deletePost ไม่ใช่ removePost
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 ) โดเมนที่ฟังก์ชั่นทำงาน
ฟังก์ชั่นมักจะเป็นการกระทำใน บางสิ่ง มันเป็นสิ่งสำคัญที่จะระบุว่าโดเมนที่ใช้งานได้คืออะไรหรืออย่างน้อยชนิดข้อมูลที่คาดหวัง
/* 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 ( ) )
}สมมติฐานเฉพาะภาษาบางอย่างอาจอนุญาตให้ละเว้นบริบท ตัวอย่างเช่นใน JavaScript เป็นเรื่องปกติที่
filterทำงานในอาร์เรย์ การเพิ่มfilterArrayที่ชัดเจนจะไม่จำเป็น
-
คำนำหน้าช่วยเพิ่มความหมายของตัวแปร มันไม่ค่อยใช้ในชื่อฟังก์ชัน
is อธิบายลักษณะหรือสถานะของบริบทปัจจุบัน (โดยปกติ boolean )
const color = 'blue'
const isBlue = color === 'blue' // characteristic
const isPresent = true // state
if ( isBlue && isPresent ) {
console . log ( 'Blue is present!' )
}has อธิบายว่าบริบทปัจจุบันมีค่าหรือสถานะที่แน่นอน (โดยปกติ boolean )
/* Bad */
const isProductsExist = productsCount > 0
const areProductsPresent = productsCount > 0
/* Good */
const hasProducts = productsCount > 0should สะท้อนให้เห็นถึงคำสั่งเชิงบวก (โดยปกติ boolean ) ควบคู่ไปกับการกระทำที่แน่นอน
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' ]
