How to make your code tidy– For the front end


1. Reduce duplication (style, variable, method, component)

Repetitive code not only makes your project redundant, but also makes you gradually lose the concept of encapsulation.

2. Delete redundant dead codes

Dead code is the code that does not execute, for example, in the judgment if that will not go

3. Vertical separation

Variables and functions should be defined near where they are used

4. Avoid inconsistencies

From one to loyalty, for example, if res is used to accept the return value, then res is used to represent

//Take a counter example
const data = response
const res = response

5. Get rid of obscure intentions

The code should be as expressive as possible

//Take a counter example
const func = (n) => {
  const a = Math.radom() * 10 - 20 + 4 * (n + 1)
  return a

Although this code is short and compressed, it is difficult to understand, which makes the developer more confused about what he is expressing

6. Follow standard dependency

Variable / constant naming, function naming, project structure

7. Packaging conditions

Boolean values are difficult to explain, so they can be extracted for easy reference

  if (isNum(a)) {}

8. Tool packaging

Public method set file, public style file, regular set file, etc

Recommended Today

CSS realizes two lines of text display

.content { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -moz-box; -moz-line-clamp: 2; -moz-box-orient: vertical; overflow-wrap: break-word; word-break: break-all; white-space: normal; overflow: hidden; } Several attributes to be explained text-overflow CSSProperty determines how to signal the user for an undisplayed overflow It can be cut to display an ellipsis (‘…’) or a custom string […]