Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Refer to javascript design patterns and development practices

An overview

  • Refining function
  • Merge repeated conditional fragments
  • Distill conditional branch statements into functions
  • Fair use cycle
  • Instead of nesting conditional branches, let the function exit early
  • Pass objects instead of long argument lists
  • Minimize the number of parameters
  • Use less ternary operators
  • Use chain calls wisely
  • Exit multiple loops with return

Refining function

If a piece of code in a function can be isolated, it is best to put the code in a separate function

let getUserInfo = function(){
    ajax('http://xx.com/getUserInfo'.function(data){
        console.log(data.id)
        console.log(data.userName)
        console.log(data.name)
    })
}
// After modification:
let getUserInfo = function(){
    ajax('http://xx.com/getUserInfo'.function( data ){
        printDetail(data)
    })
}
let printDetail = function ( data ){
    console.log(data.id)
    console.log(data.userName)
    console.log(data.name)
}
Copy the code

The benefits of this:

  • Avoid super-large functions
  • Separate functions facilitate code reuse
  • Independent functions are easier to overwrite
  • A separate function with a good name acts as a comment in itself

Merge repeated conditional fragments

If you have some duplicate code distributed in some conditional branch statements, merge de-duplication is necessary

let paging = function ( currPage ){
    if( currPage <= 0){
        currPage = 0
        jump(currPage)
    }else if( currPage >= totalPage ){
        currPage = totalPage
        jump(currPage)
    }else{
        jump(currPage)
    }
}
/ / after transforming
let paging = function ( currPage ){
    if( currPage <= 0){
        currPage = 0
    }else if( currPage >= totalPage ){
        currPage = totalPage
    }
    jump(currPage) // Separate the jump function
}
Copy the code

Distill conditional branch statements into functions

Conditional branch statements can be distilled into functions that are easier to read, and the function name itself acts as a comment

// In programming, complex conditional branching is one of the main reasons that programs are difficult to understand and read, and can easily lead to a large function. The next demand is if it's summer, 20% off the price of the goods
let getPrice = function ( price ){
    let date = new Date(a)if( date.getMonth() >= 6 && date.getMonth() <= 9) {return price * 0.8
    }
    return price
}
/ / after transforming
let getPrice = function ( price ){
    if( isSummer()){ // The function name acts as a comment
        return price * 0.8
    }
    return price
}
let isSummer = function (){
    let date = new Date(a)return date.getMonth() >= 6 && date.getMonth() <= 9
}
Copy the code

Fair use cycle

Within a function, if some of the code is actually doing repetitive work, then the proper use of loops can not only accomplish the same function, but also reduce the amount of code

let createXHR = function(){
    let xhr
    try{
        xhr = new ActiveXObject('MSXML2. XMLHttp. 6.0')}catch (e){
        try {
            xhr = new ActiveXObject('MSXML2. XMLHttp. 3.0')}catch (e){
            xhr = new ActiveXObject('MSXML2.XMLHttp')}}return xhr
}
/ / after transforming
let createXHR = function (){
    let versions = ['MSXML2. XMLHttp. 6.0'.'MSXML2. XMLHttp. 3.0'.'MSXML2.XMLHttp']
    for(let i=0,version; version = versions[i++]){try{
            return new ActiveXObject(version)
        }catch (e){

        }
    }
}
Copy the code

Instead of nesting conditional branches, let the function exit early

If you are not interested in the rest of the function, you should quit immediately and lead the reader to useless else fragments that will only hinder their understanding of the program. One trick is to reverse the outer if expression when faced with nested if branches

let del = function ( obj ){
    let ret;
    if( !obj.isReadOnly){ // Not read-only can be deleted
        if(obj.isFolder){ // If it is a folder
            ret = deleteFolder(obj)
        }else if(obj.isFile){ // If it is a file
            ret = deleteFile(obj)
        }
    }
    return ret;
}
/ / after transforming
let del = function ( obj ){
    if(obj.isReadOnly){ // Invert the if expression
        return;
    }
    if(obj.isFolder){
        return deleteFolder(obj)
    }
    if(obj.isFile){
        return deleteFile(obj)
    }
}
Copy the code

Pass object arguments instead of long argument lists

The more arguments a function has, the more difficult it is to understand and use, so be careful about the number and location of arguments when using it

let setUserInfo = function ( id,name,age,sex,mobil ){}/ / after transforming
let setUserInfo = function ( userInfo ){}Copy the code

Minimize the number of parameters

// For example, if we draw the square function, the square area can be calculated by the root of width height, so we don't need the square argument
let draw = function ( width,height,square ){
    //
}
Copy the code

To be continued