[Introduction]: naming-cheatsheet is a naming memo that records some common norms and conventions of naming.
Introduction
In programming work, naming is a headache for many developers. There was once a poll on the most difficult task for programmers abroad, and the result was 49%.
A good variable or function naming should be able to play a self-explanatory role, and even reduce our code comments.
The naming-cheatsheet is a naming memorandum that records some common conventions and provides simple examples. If we can strictly abide by these specifications, we believe that the readability of our code will be greatly improved. Here are some suggestions provided by naming-cheatsheet.
project address:
https://github.com/kettanaito/naming-cheatsheet
use English
This is the most basic rule. English is the main language in programming. The grammar of all programming languages is written in English. Writing codes in English can greatly improve its versatility. For our domestic developers, we must avoid pinyin or even direct Chinese naming.
/* Bad */
const primerNombre = 'Gustavo'
const amigos = ['Kate', 'John']
/* Good */
const firstName = 'Gustavo'
const friends = ['Kate', 'John'] Naming style
Choose a naming style and strictly follow it. It can be camelCase, snake_case, or any other style. The most important thing is to be consistent. Whether it is an individual developer or a team, it is important to maintain a consistent naming style. Don’t Mixed use.
/* Bad */
const page_count = 5
const shouldUpdate = true
/* Good */
const pageCount = 5
const shouldUpdate = true
/* Good as well */
const page_count = 5
const should_update = true Compliance with SID principles
The naming should be short, intuitive and descriptive, following the SID principle.
- Short. Keep it short and avoid typing too long, but you should also be careful not to abbreviate it so that it loses its original meaning.
- Intuitive. Intuitive and as close as possible to natural language.
- Descriptive. Reflect its role or purpose in the most effective way.
/* 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 shouldPaginate = postCount > 10 // alternatively Avoid excessive shorthand
The naming should be short, but you should avoid digging into the corners. The most important thing in naming is to make it understandable. If excessive abbreviations lose their original meaning and reduce the readability of the code, then you should not do this, but rather write more. A few letters.
/* Bad */
const onItmClk = () => {}
/* Good */
const onItemClick = () => {} Avoid context duplication
Sometimes variable definitions with similar meanings may appear in a piece of code. At this time, avoid duplication of naming.
class MenuItem {
/* Method name duplicates the context (which is "MenuItem") */
handleMenuItemClick = (event) => { ... }
/* Reads nicely as `MenuItem.handleClick()` */
handleClick = (event) => { ... }
} Reflect expected results
The name of the variable or function should reflect the expected result.
/* Bad */
const isEnabled = itemCount > 3
return <Button disabled={!isEnabled} />
/* Good */
const isDisabled = itemCount <= 3
return <Button disabled={isDisabled} /> Named pattern
You can refer to the following similar patterns for naming.
A/HC/LC mode
Can follow A/HC/LC, that is
prefix? + action (A) + high context (HC) + low context? (LC) | name | prefix | A | HC | LC |
|---|---|---|---|---|
| getUser | ||||
| get | User | |||
| getUserMessages | ||||
| get | User | Messages | ||
| handleClickOutside | ||||
| handle | Click | Outside | ||
| shouldDisplayMessage | should | Display | Message | |
The order of the context may affect the meaning of the variables. For example, shouldUpdateComponent means that a component will be updated. Changing the order to shouldComponentUpdate means that the component will update itself.
action
The verb part of a function name is the final part that describes the function of the function, such as:
- getXXX, which means to get data
- setXXX, which means set value
- resetXXX, reset data
- fetchXXX, request data
- removeXXX, remove data, means to delete something from somewhere
- deleteXXX, delete data, which means that something is completely clear
- composeXXX, create new data from existing data
- handleXXX, handle an action
Context
A function or method is usually an action of something. Combined with the context, the object of its operation can be clarified, or it should reflect the expected data type of the function. In some specific cases, it is allowed to omit the context. For example, in JavaScript, it is common for filter to operate on Array, so there is no need to name it filterArray.
/* 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())
} Prefix
Prefixes are used to enhance the meaning of variables, such as:
- is, describes the feature or state, usually a boolean type
- has, describes whether it has a certain state or value, usually a boolean type
- should, reflecting affirmative conditions, plus specific execution actions
- min/max, used when describing boundaries or limits
- prev/next, indicating the previous or next state
Singular and plural
Whether the variable name is singular or plural depends on whether the value is singular or plural.
/* Bad */
const friends = 'Bob'
const friend = ['Bob', 'Tony', 'Tanya']
/* Good */
const friend = 'Bob'
const friends = ['Bob', 'Tony', 'Tanya'] - EOF -
开源前哨Daily sharing of popular, interesting and useful open source projects. Participate in maintaining a 100,000+ Star open source technology resource library, including: Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET, etc.