Front-end development specification

First, naming style

(1) The CSS naming conventions

1. All selectors should be named in lowercase letters instead of pinyin.

Color {red} Negative example: negative example:._name /.name /.name /.$name /.22Name /.yemian

2. The selectors use horizontal lines (-) as delimiters. Do not use underscores (_) as delimiters, and the number of delimiters should not exceed four.

For example :\color{green} for example:.page-wrapper /. Page-wrapper -box for example :\color{red} for example:.page_wrapper /. Page_wrapper_ / #_page

(2) JS naming specification

1. Names in code cannot begin with the dollar sign $and underscore _, and cannot end with $and _ and a number.

Example: \color{red} Example: \$name/name$/ \_name / \_\_name/name_ / 2name/name2

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

Example: \color{red} Example: Example: ceshi/ceshiUtil/let test = 123

3. Name the class using PASCAL method.

\color{green} \color{green

4. Use the hump method to name functions, methods, attributes, and variables.

Example: \color{green} Example: submitHandle/getName

5. Use capital letters for constants and separate words with underscores.

\color{green} \ GLOBAL_CONFIG

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

\color{green} \ example: IPersonProps

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

$\ color {green} are:$

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

8. Naming conventions for function names, method names, attribute names and variable names

1. Get a single object prefixed with GET.
2. Get multiple objects prefixed with list.
3. Queries are prefixed with query/search.
4. Insert prefixed with add/save.
5. Use the prefix edit/update.
6. Delete prefixed with remove.
7. Array objects are suffixed with List.

Second, the code format

(1) CSS code format

1. Each style has a single line. Use Tab or four Spaces for indentation.

\color{#CC9900} Description: Description: If Tab indent is used, one Tab must be set to four Spaces. \color{green} \color{green}

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

Color {red} color{red}.page{.margin: 10px; .padding: 10px; .background: #000; }

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

$\ color {green} are:$

.page {
    .padding: 10px;
}
Copy the code

Color {red} color:.page{.padding:10px}

3. Attribute values separated by commas, with a space after each comma.

$\ color {green} are:$

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

$\ color {red} counterexamples:$

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

4. Avoid excessive nesting of layers and try not to have more than four layers.

$\ color {green} are:$

.page .wrapper .box {
    /* ... /*
}
Copy the code

$\ color {red} counterexamples:$

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

(2) JS code format

1. Declare variables using const and let whenever possible.

Note: Var causes variables to be raised. Use const to make sure you can’t reassign constants. Use let to make sure you can’t redeclare variables.

$\ color {green} are:$

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

2. Brace usage protocol.

1. Leave no line breaks before the opening brace and a space.
2. Newline after opening brace.
3. elseLeave a space between the code and the closing brace.
4. The closing brace indicating termination must be a separate line.
5. You can omit the curly braces if there is only one expression in the arrow function.

$\ color {green} are:$

function getNumber(x) {
    /* ... */
}

if (x > 5) {
    /* ... */
}else {
    /* ... */
}

[1, 2, 3, 4, 5].map(item => item.filter > 2);
Copy the code

$\ color {red} counterexamples:$

function getNumber(x) 
{
    /* ... */    
}

if (x > 5){
    /* ... */         
}else{
    /* ... */    
}
Copy the code

3. Usage rules for quotation marks.

1. Values of class, ID, or other attributes in HTML code are quoted in double quotes.
2. String in JS code uses single quotation marks.

/ let name = “zhangsan”;

2. 4. Smart water bottle = and! == use.

Description :\color{#CC9900} Description: Description: use == and! 5 == ‘5’ = true; 5! = ‘5’ = false.

5. Use four Spaces or tabs for indentation.

\color{#CC9900} Description: Description: If Tab indent is used, one Tab must be set to four Spaces.

6. Spaces must be added between keywords such as if/for/while/switch/catch and the curly braces.

$\ color {green} are:$

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

7. Leave no space between the left curly brace and characters, and no space between the right curly brace and characters.

If (x === 100) \color{red}

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

$\ color {green} are:$

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.

$\ color {green} are:$

// let x = y + z;Copy the code

10. A ternary operator can occur at most twice in an expression.

Example: \color{red} Example: Example: x === y? x > 100 ? x === 120 ? x : z : 90 : y

11. Add a space after multiple parameters.

\color{green} \ example: foo(x, y, z) \color{green}

12. The body of the for loop contains no more than 50 lines of code.

Color {#CC9900} Description: Description: including comments, empty lines, carriage return total line number should not exceed 50 lines, if it is unavoidable to extract part of the code into an independent function.

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

$\ color {red} counterexamples:$

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

Third, object processing

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

Description: Description: Modifying the prototype of a standard JS object may overwrite the original methods or properties.

2. Do not use prototypes to add new properties or methods to objects. You can encapsulate specified functions as utility functions and reference them through export.

\color{green} \ example: export function format(date, format) {/*… * /}; Prototype: date.format = function(format) {/*… * /}

3. Create objects or arrays using object direct quantities.

Let obj = {}; let obj = {}; let list = [];

4. Use the expansion operator… Copy or merge arrays/objects.

$\ color {green} are:$

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 the property values of objects.

$\ color {green} are:$

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

$\ color {red} counterexamples:$

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

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

$\ color {green} are:$

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

7. Check the variable type and JSON format before using the json. parse method.

Color {#CC9900} Description: If the variable is undefiend or a string with a JSON structure, js will throw a syntax exception and block 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: 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 a memory overflow problem.

4. Annotated regulations

1. The custom function/method should be annotated to explain the purpose of the function/method. If it is necessary to respond to parameter annotation, the return value type should be defined if it is in TS (if no return value can be omitted).

$\ color {green} are:$

Function Max (x, y) {return x > y? x : y; } @param x * @param y */ 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. // XXX is prohibited.

$\ color {green} are:$

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

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

$\ color {green} are:$

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

4. At the same time of code modification, comments should also be modified accordingly, especially the modification of parameters and return values.

5. Notes should be concise and to the point, so that they and other programmers can understand the meaning of notes in time, and delete unnecessary notes in time.