“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

This to put before the articles rewrite the front-end development specification, in fact, there is nothing wrong with the article content is, is the layout makes want to express the content of the article is not intuitive, not let after operating personnel, and leads to no get more show and traffic, so I decided to optimize and add to our team to implement the specification of the content in the actual development.

I found that before the output of the article, the collection is quite a lot of people, is why not like not comment? Writing is not easy, now that I click in, please continue to read ^_^

thinking

Without rules, it is difficult to coordinate

A person may go faster, but a group of people will go farther. It is true that one person can improve and get better, but one person’s ideas, cognition, vision, ability and execution are far inferior to those of a group of people. The reason we need a development specification to discipline the team is to make the team members write high-quality code, to make the team members happy together every day, and to make the team do better and go further.

Why do we need to develop specifications?

To answer that question, we have to use contradiction to say what happens if there is no norm? The first and most direct problem caused by the lack of norms is the different coding styles of teams, which increases the cost of reading codes among members, and increases the cost of team collaboration and maintenance. Second, if the team members are not stable, the project will be a mess, or even out of control; Finally, even for personal development, poor coding habits can cause problems for yourself and others to read. Therefore, it is necessary to establish a set of development specifications suitable for the team.

What does the development specification mean?

1. Improve the teamwork ability of the team, reduce the cost of integrating new members into the team, and avoid digging holes to a certain extent

2. Improve development efficiency, team collaboration efficiency and reduce communication cost;

3, to achieve a highly uniform code style, convenient review

4. Provide better support for later maintenance

specification

So let’s start with, what are the front-end specifications of our team? And what does it include?

First, naming style

(1) The CSS naming conventions

1. All selectors should be named in lowercase letters and avoid naming in pinyin

Example: #name /.name1 Example:._name /.name /.name /.$name /.22name /.yemianCopy the code

2. The selectors use horizontal line – as the separator. It is forbidden to use underscore _ as the separator, and the separator should not exceed 4 characters

Positive example:.page-wrapper /.page-wrapper-box Negative example:.page_wrapper /.page_wrapper_ / #_pageCopy the code

(2) JS naming specification

1. Names in code cannot begin with the dollar sign $and underscore _, nor can they end with $and _ and numbers

2. It is forbidden to use pinyin, Pinyin + English and Chinese in naming codes

3. Name the class using PASCAL method

Such as: UserPermissio

4. Function name, method name, attribute name and variable name are all named by the hump method

Example: submitHandle/getName

5. All constants should be capitalized, and words should be separated by underscores

Such as: GLOBAL_CONFIG

6. The TS interface name is prefixed with an uppercase letter I

Such as: IPersonProps

7, TS enumerates class names and their attributes in uppercase letters, words separated by underscores (\color{red}__)

// Sex enum SEX_TYPE {MALE, FEMALE}Copy the code

8, function name, method name, attribute name, variable name naming convention

  • Get a single object prefixed with GET.

  • Get multiple objects prefixed with list.

  • Queries are prefixed with query/search.

  • Insert prefixed with add/save.

  • Use the prefix edit/update.

  • Delete prefixed with remove.

  • Array objects are suffixed with List.

Second, the code format

(1) CSS code format

1. Use a single line, and use Tab or 4 Spaces for indentation

Note: If you use Tab indentation, you must set one Tab to four Spaces.

.page {.margin: 10px; .padding: 10px; .background: #000; } backstory:.page{margin: 10px; padding: 10px; background: #000; }Copy the code

2. A separate line for the selector, with a space between it and the left curly brace {and a separate line for the right curly brace}; Colon: A space followed by a semicolon for each style; At the end

Padding-right:.page {. Padding: 10px; } reverse example:.page{padding:10px}Copy the code

3. Comma-separated property values, with a space after each comma

Rgba: (255, 55, 55, 5); rgba: (255, 55, 55); } counterexample:.page{rgba: (255,255,255,.5); }Copy the code

4. There is too much nesting of non-hierarchy, and it should not exceed 4 layers

.page.wrapper. box {/*... /*} For example:.page.wrapper. box div p {/*... / *}Copy the code

(2) JS code format

Declare variables as const and let as possible

Note: var causes variables to be raised. Use const to ensure that you cannot reassign constants. Use let to ensure that you cannot redeclare variables.

const a = 1;
let b = 2;
Copy the code

2. Use conventions for braces

  • Leave no line breaks before the opening brace and a space
  • Newline after opening brace
  • elseLeave a space between the code and the closing brace
  • The closing brace indicating termination must be a separate line
  • You can omit the curly braces if there is only one expression in the arrow function
Function getNumber(x) {/*... */ } if (x > 5) { /* ... */ } else { /* ... */ } [1, 2, 3, 4, 5].map(item => item.filter > 2); Function getNumber(x) {/*... */ } if (x > 5){ /* ... */ }else{ /* ... * /}Copy the code

3. Use of quotation marks

  • Values of class, ID, or other attributes in HTML code are quoted in double quotes
  • String in JS code uses single quotation marks
<input type= "file" /> let name = 'zhangsan'; Example: <input type= 'file' /> let name = "zhangsan";Copy the code

4, note that === and ==! = and! The use of = =

Instructions: Use= = 和 ! =It is easy to cause implicit conversion, such as5 == '5' = true; 5 != '5' = false.

5. Use 4 Spaces or tabs for indentation

Note: If you use Tab indentation, you must set one Tab to four Spaces.

6. Keywords such as if/for/while/switch/catch must have Spaces between the parentheses

if (x === 100) {}
for (let i = 0; i < 10; i++) {}
Copy the code

7. Leave no Spaces between the left parentheses and characters, and leave no Spaces between the right parentheses and characters

If (x == 100) {} if (x == 100) {}Copy the code

8, any binary, ternary operator (such as: + – * / % = + = * = && | |) of the left and right sides to add Spaces

a + b = 2;
x * y = z; 
x == y ? x : y;
Copy the code

9. Leave a space between the double slash of the comment and the content of the comment

A ternary operator may occur at most twice in an expression

Let num = x = y? x : x > 100 ? z : y; Example: let num = x === 100? x : x === 120 ? y : x === 150 ? z : 200;Copy the code

11. Add a space after multiple parameters

foo(x, y, z)

12. No more than 50 lines of code in the body of the for loop

Note: the total number of lines, including comments, empty lines and carriage returns, should not exceed 50 lines. If it is unavoidable, part of the code should be extracted and become an independent function.

Insert two blank lines between functions/methods to improve code readability

Example: getMax() {/*... */ } listUser() { /* ... */} Counterexample: getMax() {/*... */ } listUser() { /* ... * /}Copy the code

Third, object processing

1. Do not modify the prototype of a standard JS object

Note: Modifying the prototype of a standard JS object may overwrite existing methods or properties.

2. Instead of using stereotypes to add new properties or methods to objects, encapsulate specified functions as utility functions that can be exported and referenced

Export function format(date, format) {/*... * /}; Date.prototype. Format = function(format) {/*... * /}Copy the code

3. Create objects or arrays using object direct quantities

let obj = {}; 
let list = [];
Copy the code

4, using the expansion operator… Copy or merge arrays/objects

let a = {name: 'zhangsan'}; let b = {age: 22}; let c = {... a, ... b}; // {name: 'zhangsan', age: 22} let x = [1, 2]; let y = [3, 4]; let z = [...x, ...y]; // [1, 2, 3, 4]Copy the code

5. Use deconstruction to get object property values

Function getUser(user) {const {name, age} = user; } function getUser(user) {let name = user.name; let age = user.age; }Copy the code

6. If you cannot determine the type of the variable before using the array object method, you need to do a type check on the variable

if (Array.isArray(obj)) { 
    /* ... */ 
}
Copy the code

7. Check the type and JSON format of variables before using json. parse

If the variable is undefiend or a string that is not a JSON structure, js will throw a syntax exception and block the JS execution.

8. When calling setTimeout or setInterval during the component lifecycle, be sure to use clearTimeout or clearInterval to clear the timer object when destroying the component

Note: If the timer object is not cleared after the component is destroyed, the component may not exist at the time the callback is executed, which may cause an out-of-memory problem.

4. Annotated regulations

1, custom functions/methods should be annotated to explain the purpose of the function/method, if there is a need to respond to the description of parameter annotation, if it is in TS should define the return value type (no return value can be omitted)

Function Max (x, y) {return x > y? x : y; } @param x * @param y */ const Max = (x: number, y: number): number => {return x > y? x : y; } @param list array @param index subscript */ remove(list: string[], index: number) {/*... * /}Copy the code

2. Use /** XXX */ to comment components, classes, and class methods

/ * * * * / user list component class UserList {/ * * * refresh list * / refresh () = = > {/ *... * /}}Copy the code

All dictionary and enumeration fields must have a master comment indicating the purpose of the field

// User role const roleOptions = [{value: 1, name: 'administrator '}, {value: 2, name:' common user '},]; // Sex enum SEX_TYPE {MALE, FEMALE}Copy the code

4, code modification at the same time, comments should also be modified accordingly, especially parameters, return value modification

5, notes strive to be concise, to be able to make themselves and other programmers can timely understand the meaning of notes, notes not deleted in time

Git version management

1. Never merge the Test branch into your own branch.

2, the new branch must be based on the Master branch;

3. Swipe your branch with the Master branch before merging it with the Uat or Master branch.

4, Some IDE (Webstorm) project manager may not be synchronized with the actual directory update, resulting in Git management exceptions (solution: use small tortoise or other Git management tools directly in the actual project directory operation).

At this point, the development of the front-end specification of the content is also over. See the article so far, do not only collect not praise not comment ah, conveniently click a praise 👍 to go ah, 3Q^_^

Past wonderful articles

  • A summary of common browser compatibility problems and solutions in front-end development
  • How do I zoom in and out of page elements in a front-end project?
  • How to use Antd Table to create Echarts maps in React projects?
  • How to introduce and use external fonts in Vue or React projects?
  • How to use the Amap plugin and wrap popover components in React projects?
  • Data Visualization – How do I use the Echarts plug-in and encapsulate diagram components in React projects?
  • How can I change the default DatePicker week selector in Antd?
  • How to encapsulate the Vue watermark component and how to use it in React?
  • The most powerful rich text editor? TinyMCE Series [3]
  • The most powerful rich text editor? TinyMCE Series [2]
  • The most powerful rich text editor? TinyMCE Series of articles [1]
  • React project to implement a Checkbox style effect component
  • 2022 First update: 3 Progress bar effects in front end projects
  • Front-end Tech Trends 2022: You don’t come in and see how to earn it a small target?
  • If ancient have programmers writing summaries, probably is such | 2021 year-end summary

After the language

Guys, if you find this article helpful, click 👍 or ➕. In addition, if there are questions or do not understand the part of this article, you are welcome to comment on the comment section, we discuss together.