Coding standards can help with:

• Keep code consistent
• Easy to read and understand
• Easy to maintain

The following coding standards are my helpful thoughts on the above points.

1. Use === instead of == for comparison

This is important because JavaScript is a dynamic language, so using == can give you unexpected results because it allows for different types.

Fail:

 if (val == 2)
Copy the code

Pass:

 if (val === 2)
Copy the code

2. Never use var, use let instead

Using lets will help avoid the scoping problems caused by the various var’s in JavaScript.

Fail:

 var myVar = 10;
Copy the code

Pass:

 let myVar = 10;
Copy the code

In the process of learning the web front end, it is inevitable to encounter a lot of problems, these problems may bother you for a long time, so I have a Web development learning exchange group (545667817), which are the gold digging friends, and sorted out a most comprehensive front-end learning materials, from the most basic HTML+CSS+JS to mobile HTML5 project actual combat learning materials have sorted out, want to learn can apply to join, we learn from each other, mutual exchange common progress, share different learning materials every day!

3. Use const instead of let

This prevents developers from trying to change things they shouldn’t do, and really helps with readability.

Fail:

 let VAT_PERCENT = 20;
Copy the code

Pass:

 const VAT_PERCENT = 20;
Copy the code

4. Always use semicolons (;) Although this is optional in JavaScript, semicolons are not required as statement terminators in other languages. But use; Helps keep the code consistent. Fail:

 const VAT_PERCENT = 20;
let amount = 10
return addVat(amount, vatPercent)
Copy the code

Pass:

 const vatPercent = 20;
let amount = 10;
return addVat(amount, vatPercent);
Copy the code

5. Naming conventions in JavaScript

• letYou should use a hump.
• constIf you use uppercase serpentine nomenclature at the top of the file. If not at the top of the file, use the camel name.
• classShould be PASCAL nomenclature:MyClass
• functionsThe function should be hump nomenclature:myFunction

6. Use template strings when concatenating strings

Embedding expressions is allowed in template strings. Fail:

 let fullName = firstName + " " + lastName;
Copy the code

Pass:

 let fullName = `${firstName} ${lastName}`;
Copy the code

7. Use ES6 arrow functions whenever possible

The arrow function is a more concise syntax for writing function expressions. Fail:

 var multiply = function(a, b) {
 return a* b;
};
Copy the code

Pass:

 const multiply = (a, b) => { return a * b};
Copy the code

8. Always use curly braces around control structures

All control structures must use curly braces (for example, if, else, for, do, while, etc.) so that later maintenance is less prone to errors. Fail:

 if (valid)
   doSomething();
if (amount > 100) 
    doSomething();
else if(amount > 200)
    doSomethingElse();
Copy the code

Pass:

 if (valid) {
   doSomething();
}
if (amount > 100) {
   doSomething();
} 
else if(amount > 200) {
    doSomethingElse();
}
Copy the code

9. Make sure the braces start on the same line with Spaces between them

Fail:

 if (myNumber === 0)
{
    doSomething();
}
Copy the code

Pass:

 if (myNumber === 0) {
    doSomething();
}
Copy the code

10. Try to reduce nesting

The if inside the if becomes confusing and difficult to read. Sometimes you won’t be able to solve the problem, but take a good look at the structure of the code and see if you can improve it.

Fail:

if (myNumber > 0) { if (myNumber > 100) { if (! hasDiscountAlready) { return addDiscountPercent(0); } else { return addDiscountPercent(10); } } else if (myNumber > 50) { if (hasDiscountAlready) { return addDiscountPercent(5); } } else { if (! hasDiscountAlready) { return addDiscountPercent(0); } else { return addDiscountPercent(1); } } } else { error(); }Copy the code

Pass:

if (myNumber <= 0) { return error; } if (! hasDiscountAlready) { return addDiscountPercent(0); } if (myNumber > 100) { return addDiscountPercent(10); } if (myNumber > 50) { return addDiscountPercent(5); } return addDiscountPercent(1);Copy the code

As you can see from the above example, when you reduce nesting, it becomes easier to read.

11. Use default parameters whenever possible

In JavaScript, if you call a function without passing an argument, its value is undefined Fail:

 myFunction(a, b) {
 return a + b;
}
Copy the code

Pass:

 myFunction(a = 0, b = 0) { 
 return a + b;
}
Copy the code

12. SwitchStatement should usebreakAnd have adefault

I usually try not to use the switch statement, but if you really want to use it, make sure every condition breaks and write defalut.

Fail:

 switch (myNumber)
{
 case 10: 
   addDiscountPercent(0);
 case 20: 
   addDiscountPercent(2);
 case 30:
   addDiscountPercent(3);
}
Copy the code

Pass:

 switch (myNumber)
{
 case 10: 
    addDiscountPercent(0);
 break;
 case 20: 
    addDiscountPercent(2);
 break;
 case 30:
    addDiscountPercent(3);
 break;
 default: 
    addDiscountPercent(0);
 break;
}
Copy the code

13. Do not use wildcard imports

Fail:

 import * as Foo from './Foo';
Copy the code

Pass:

 import Foo from './Foo';
Copy the code

14. Use Boolean shortcuts

Fail:

 if (isValid === true)
if (isValid === false)
Copy the code

Pass:

if (isValid) if (! isValid)Copy the code

15. Try to avoid unnecessary ternary statements

Fail:

 const boo = a ? a : b;
Copy the code

Pass:

 const boo = a || b;
Copy the code

Summarizing coding standards for any language can really help improve the readability and maintainability of your application. If you work in a team, one of the hardest things to do is enforce coding standards. Here are some tips to help you:

• Code review, line by line Pass code.
• Tidy up or use some kind of code analyzer
• When creating new content, have one of your senior developers initialize it, and other developers can use the code as a guide.

Finally:

For every front-end partners, there are want to learn web front-end, or change careers, or college students, and want to improve their ability in the work, is learning partners welcome to join the learning (545667817).