Personal summary of some basic specifications for writing JS code

Although there are tools like ESLint in our work to help us standardize the basic code, we still need to pay more attention to the code quality. The following are my personal experience summary notes, there should be a lot of deficiencies and optimization, I hope you can give me more advice and more discussion

1. Use const let instead of var

2. Avoid implicit conversion and use congruence (===) for judgment

3. Don’t write redundant judgments, such as

Flag: a === B?true : falseFlag: a === b RecommendedCopy the code

4. If determines that more than 3 branches need to be optimized, consider using the strategic mode

if(a === 'a'){
    title = 'heading 1'
} else if(a === 'b'){
    title = 'title 2'
} else if(a === 'c'){
    title = 'title'
} else {
    title = 'title 4'} adviceconst objMap = {
    a:'heading 1'B:'title 2', c:'title',} the title = objMap [a] | |'title 4'
Copy the code

5. Do not leave empty code blocks, or empty methods, such as:

if(a){
   
}else{
  // Business logic
}
Copy the code

6. Arr. Lenth > 0, arr

7.Array types try to use these methods such as forEach map, look more concise, in the case of not much data, and for loop performance, can be ignored

8. From the perspective of execution efficiency, objects should not be used if they can be solved with Array

9. Use object. keys to traverse objects

10. When fetching multiple fields from an object, it is best to select one method for assigning more than three attributes, otherwise it looks redundant

const param = {
    name : options.name,
    phone : options.phone,
    address : options.address,
    city: options.city} Suggestionconst feildArr = ['name'.'phone'.'city'.'address']
const param = {}
feildArr.forEach(feild= > {
   param[feild] = options[feild] 
})

Copy the code

11. If it’s just a normal method or callback, use the arrow function when it’s available. Do not explicitly bind or store this in your project unless a special scenario requires it

Do not write a lot of judgment expressions in template, which will make others feel confused. Declare variables in data, handle and comment in business methods, for example:

<div v-if="obj && obj.name && obj.phone && obj.addess"></div>

Copy the code

13. Do not increase the number of times when judging the deep attributes of the object for multiple times. If the object is deeply nested, it is better to cache the object first

const openId = res && res.data && res.data.openId || ' '
const codeId = res && res.data && res.data.codeId ||' 'adviceif(res && res.data){
   const _data = res.data
   const openId = _data.openId || ' '
   const codeId = _data.codeId || ' '} orlet openId = ' ',codeId = ' ';
try{
    const _data = res.data
    openId = _data.openId
    codeId = _data.codeId
} catch(e){
    
}

Copy the code

14. The fields that need to be sent to the back end must be the same as the interface fields, otherwise, all params fields need to be reassigned before the request is sent, resulting in a lot of redundant code

15. When writing complex business code, it’s best to follow a single principle, one method that does one thing for reuse

16. You are welcome to add