holm/naming-cheatsheet
1
0
Fork 0
forked from extern/naming-cheatsheet
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Artem Zakharchenko
2018-12-10 10:14:57 +01:00
committed by GitHub
parent feed6cb3f2
commit c234734ab2
1 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
README.md
View File

@ -29,9 +29,9 @@ const should_update = true
## S-I-D ## S-I-D
A name must be *short*, *intuitive* and *descriptive*: A name must be *short*, *intuitive* and *descriptive*:
* **Short**. A name must not take long to type and, therefore, to remember, * **Short**. A name must not take long to type and, therefore, to remember;
* **Intuitive**. Name must read naturally, as close to the common speach as possible * **Intuitive**. Name must read naturally, as close to the common speach as possible;
* **Descriptive**. Name must reflect what it does/possesses in the most efficient way, * **Descriptive**. Name must reflect what it does/possesses in the most efficient way.
```js ```js
/* Bad */ /* Bad */
@ -47,7 +47,7 @@ const shouldDisplayPagination = (postsCount > 10) // alternatively
## Avoid contractions ## Avoid contractions
Do **not** use contractions. They contribute to nothing but decreased readability of your code. Finding a short, descriptive name may be hard, but contraction is not an excude to not doing so. Do **not** use contractions. They contribute to nothing but decreased readability of the code. Finding a short, descriptive name may be hard, but contraction is not an excuse for not doing so.
```js ```js
/* Bad */ /* Bad */
@ -90,22 +90,23 @@ return <Button disabled={isDisabled} />
# Naming functions # Naming functions
## A/HC/LC Pattern ## A/HC/LC Pattern
There is a useful pattern to follow when naming functions: There is a useful pattern to follow when naming functions:
``` ```
prefix? + action (A) + high context (HC) + low context? (LC) prefix? + action (A) + high context (HC) + low context? (LC)
``` ```
To illustrate, take a look at how this pattern may be applied in the table below. Take a look at how this pattern may be applied in the table below.
| Name | Prefix | Action | High context | Low context | | Name | Prefix | Action (A) | High context (HC) | Low context (LC) |
| ---- | ---- | ------ | ------------ | ----------- | | ---- | ---- | ------ | ------------ | ----------- |
| `getPost` | | `get` | `Post` | | | `getPost` | | `get` | `Post` | |
| `getPostData` | | `get` | `Post` | `Data` | | `getPostData` | | `get` | `Post` | `Data` |
| `handleClickOutside` | | `handle` | `Click` | `Outside` | | `handleClickOutside` | | `handle` | `Click` | `Outside` |
| `shouldDisplayMessage` | `should` | `Display` | `Message`| | | `shouldDisplayMessage` | `should` | `Display` | `Message`| |
> **Note:** Context order affects the meaning of a method. For example, `shouldUpdateComponent` means *you* are about to update a component, while `shouldComponentUpdate` tells you that *component* will update on itself, and you are but controlling whether it should do that right now. > **Note:** The order of context affects the meaning of a variable. For example, `shouldUpdateComponent` means *you* are about to update a component, while `shouldComponentUpdate` tells you that *component* will update on itself, and you are but controlling whether it should do that right now.
In other words, **high context emphasizes the meaning of a variable**. In other words, **high context emphasizes the meaning of a variable**.
--- ---
@ -115,6 +116,7 @@ In other words, **high context emphasizes the meaning of a variable**.
The verb part of your function name. The most important part responsible for describing what the function *does*. The verb part of your function name. The most important part responsible for describing what the function *does*.
### `get` ### `get`
Accesses data immediately (i.e. shorthand getter of internal data). Accesses data immediately (i.e. shorthand getter of internal data).
```js ```js
function getFruitsCount() { function getFruitsCount() {
@ -125,6 +127,7 @@ function getFruitsCount() {
> See also [compose](#compose). > See also [compose](#compose).
### `set` ### `set`
Declaratively sets a variable with value `A` to value `B`. Declaratively sets a variable with value `A` to value `B`.
```js ```js
@ -139,6 +142,7 @@ console.log(fruits) // 5
``` ```
### `reset` ### `reset`
Sets a variable back to its initial value or state. Sets a variable back to its initial value or state.
```js ```js
@ -156,6 +160,7 @@ console.log(fruits) // 5
``` ```
### `fetch` ### `fetch`
Requests for a data, which takes time (i.e. async request). Requests for a data, which takes time (i.e. async request).
```js ```js
function fetchPosts(postCount) { function fetchPosts(postCount) {
@ -164,6 +169,7 @@ function fetchPosts(postCount) {
``` ```
### `remove` ### `remove`
Removes something *from* somewhere. Removes something *from* somewhere.
For example, if you have a collection of selected filters on a search page, removing one of them from the collection is `removeFilter`, **not** `deleteFilter` (and this is how you would naturally say it in English as well): For example, if you have a collection of selected filters on a search page, removing one of them from the collection is `removeFilter`, **not** `deleteFilter` (and this is how you would naturally say it in English as well):
@ -180,6 +186,7 @@ removeFilter('price', selectedFilters)
> See also [delete](#delete). > See also [delete](#delete).
### `delete` ### `delete`
Completely erazes something from the realms of existence. Completely erazes something from the realms of existence.
Imagine you are a content editor, and there is that notorious post you wish to get rid of. Once you clicked a shiny "Delete post" button, the CMS performed a `deletePost` action, **not** `removePost`. Imagine you are a content editor, and there is that notorious post you wish to get rid of. Once you clicked a shiny "Delete post" button, the CMS performed a `deletePost` action, **not** `removePost`.
@ -193,6 +200,7 @@ function deletePost(id) {
> See also [remove](#remove). > See also [remove](#remove).
### `compose` ### `compose`
Creates a new data from the existing one. Mostly applicable to strings, objects, or functions. Creates a new data from the existing one. Mostly applicable to strings, objects, or functions.
```js ```js
@ -204,6 +212,7 @@ function composePageUrl(pageName, pageId) {
> See also [get](#get). > See also [get](#get).
### `handle` ### `handle`
Handles an action. Often used when naming a callback method. Handles an action. Often used when naming a callback method.
```js ```js
@ -243,6 +252,7 @@ function getRecentPosts(posts) {
Prefix enhances the meaning of a variable. It is rarely used in function names. Prefix enhances the meaning of a variable. It is rarely used in function names.
### `is` ### `is`
Describes a characteristic or state of the current context (usually `boolean`). Describes a characteristic or state of the current context (usually `boolean`).
```js ```js
@ -256,6 +266,7 @@ if (isBlue && isPresent) {
``` ```
### `has` ### `has`
Describes whether the current context possesses a certain value or state (usually `boolean`). Describes whether the current context possesses a certain value or state (usually `boolean`).
```js ```js
@ -268,6 +279,7 @@ const hasProducts = (productsCount > 0)
``` ```
### `should` ### `should`
Reflects a positive conditional statement (usually `boolean`) coupled with a certain action. Reflects a positive conditional statement (usually `boolean`) coupled with a certain action.
```js ```js
@ -290,6 +302,7 @@ function renderPosts(posts, minPosts, maxPosts) {
``` ```
### `prev`/`next` ### `prev`/`next`
Indicate the previous or the next state of a variable in the current context. Used when describing state transitions. Indicate the previous or the next state of a variable in the current context. Used when describing state transitions.
```jsx ```jsx