I believe that many partners, when taking over other people’s second-hand code, whether there is a feeling, no notes, two no format, code jumbled, a simple function with N methods to achieve, suddenly feel, a head two big, as the saying goes good code is pleasing to the eye, jumbled code makes people unhappy. Personally, I have taken over other colleagues’ or outsourced or multi-handed codes, so I have summarized the following code optimization methods

Index optimization code

Let’s start with a simple example:

If you want to return 1 to Monday, and 7 to Sunday, you can return a blank string. There are similar requirements for echo months

The first implementation method:switchimplementation

function previewWeek(i){
    switch(i){
        case 1:
            return 'Monday'
            break;
        case 2:
            return 'Tuesday'
            break;
        case 3:
            return 'Wednesday'
            break;  
        case 4:
            return 'Thursday'
            break;  
        case 5:
            return 'Friday'
            break;  
        case 6:
            return 'Saturday'
            break;  
        case 7:
            return 'Sunday'
            break;
        default:
            return ' '}}Copy the code

The second implementation method:if elseimplementation

function previewWeek(i){
    if(i==1) {return 'Monday'
    }else if(i==2) {return 'Tuesday'
    }else if(i==3) {return 'Wednesday'
    }else if(i==4) {return 'Thursday'
    }else if(i==5) {return 'Friday'
    }else if(i==6) {return 'Saturday'
    }else if(i==7) {return 'Sunday'
    }else{
        return ' '}}Copy the code

The third implementation method: ternary implementation

function previewWeek(i){
    return  i==1?'Monday':
            i==2?'Tuesday':
            i==3?'Wednesday':
            i==4?'Thursday':
            i==5?'Friday':
            i==6?'Saturday':
            i==7?'Sunday':' '  
}
Copy the code

It feels like the amount of code is much less. Can we still optimize it? It’s not hard to see a lot of duplicate code in the code (including Chinese)

The fourth implementation method: array + index optimization code

function previewWeek(i){
    return  i>0 && i<8 ?'week'+ ['一'.'二'.'三'.'four'.'five'.'六'.'day'][i-1] :' '
}
Copy the code

Conclusion: Sometimes, there is a lot of duplicate code, we can pull out the duplicate code, observe the remaining dynamic values, if we can establish a relationship with the index, can further simplify our code

Thanks to CherishXY Web front end supplement can use map, brainstorming, specially supplement map optimization method

The fifth implementation method: map optimization code

function previewWeek(i){
    let weeksMap = new Map([[1.'一'],
        [2.'二'],
        [3.'三'],
        [4.'four'],
        [5.'five'],
        [6.'六'],
        [7.'day']]);return weeksMap.get(i)?'week'+weeksMap.get(i):' '
}
Copy the code

Includes optimized code

Includes is a new API in ES7. Unlike indexOf, includes directly returns a Boolean value. Specific can see Array. Prototype. Includes and String. The prototype. Includes

Let’s start with a simple example: use an array includes as an example, similar to a string includes

Let’s implement an authentication method that returns the corresponding authentication result by passing in an Id

General implementation: | |

function verifyIdentity(identityId){
    if(identityId==1 || identityId==2 || identityId==3 || identityId==4) {return 'Your status is legal, please pass! '
    }else{
        return 'Your identity is unknown, warning! '}}Copy the code

The disadvantage of this writing method is that the amount of duplicate code increases when the identity Id needs to be verified changes a lot

Primary optimization implementation: includes

function verifyIdentity(identityId){
    if([1.2.3.4].includes(identityId)){
        return 'Your status is legal, please pass! '
    }else{
        return 'Your identity is unknown, warning! '}}Copy the code

In this way, if the number of Id needs to be verified increases, you only need to add more Id in the array before includes, but it still takes up 4 lines

Final optimization: includes + ternary

function verifyIdentity(identityId){
    return [1.2.3.4].includes(identityId)?'Your status is legal, please pass! ':'Your identity is unknown, warning! '
}
Copy the code

This writing method is personally recommended, from the maintenance and extension aspect is more friendly

Fixed point optimization code

Let’s start with an example:

Write a method to query an element

General writing

 / * * *@param {String } Selector: element selector *@param {Boolean } IsAll: whether to obtain all */
function getElement(selector,isAll = false){
    if(isAll){
        return document.querySelectorAll(selector)
    }else{
        return document.querySelector(selector)
    }
}
Copy the code

Write three yuan

function getElement(selector,isAll = false){
    return isAll?document.querySelectorAll(selector):document.querySelector(selector)
}
Copy the code

The ternary fixed-point

Dynamic location of data occurring, targeted optimization

function getElement(selector,isAll = false){
    return document[ 'querySelector'+(isAll?'All':' ') ](selector)
}
Copy the code

It is not difficult to find that dynamic data occurs in the parentheses inside [], which further reduces our code volume through fixed-point optimization, and there are many versions of this kind of derivative

For example, show hide according to isShow for container class elements

// Is this often done in jQuery?
$('.container')[ isShow?'show' : 'hide'] ()Copy the code

Switch Statement optimization

Example:

let color = "red"
function printBlackBackground(){
    console.log('black')}function printRedBackground(){
    console.log('red')}function printBlueBackground(){
    console.log('blue')}function printGreenBackground(){
    console.log('green')}function printYellowBackground(){
    console.log('yellow')}switch(color) {
    case 'black':
        printBlackBackground();
        break;
    case 'red':
        printRedBackground();
        break;
    case 'blue':
        printBlueBackground();
        break;
    case 'green':
        printGreenBackground();
        break;
    default:
        printYellowBackground();
}
Copy the code

The part to be optimized is Switch

We use object form to establish key-value mapping relationship


let  colorMap = {
    black: printBlackBackground,
    red: printRedBackground,
    blue: printBlueBackground,
    green: printGreenBackground,
    yellow: printYellowBackground
}

colorMap[color]? colorMap[color]() : printYellowBackground()

Copy the code

Note: this method is used for reference by other netizens

Default optimization

Before optimization

function request(options){
    letmethod = options.method? options.method:'GET'
    letdata = options.data? options.data:{}/ /...
}
Copy the code

The optimized

function request(options){
    let method = options.method || 'GET'
    let data = options.data || {}
    / /...
}
Copy the code

Optimized based on ES6

function request(method='GET',data={}){
    
    / /...
}
Copy the code

Sometimes we encapsulate the request by preparing our own default parameters and then merging them with those passed in to get the final request parameters

function request(options){
    let opt = Object.assign({
        method:'POST'.data:{}
    },options)
    //opt.data.fxiedProps = 1 ; // Sometimes there is a fixed key in the request
    return opt
}
Copy the code

Single IF statement optimization policy

Before optimization

function log(){
    console.log('If the flag is true, you see me.')}let flag = true

if(flag){
    log()
}
Copy the code

The optimized

function log(){
    console.log('If the flag is true, you see me.')}let flag = true

flag && log()
Copy the code

Example 2:

if(a && b){
    c()
}

//=> a && b && c()
// and so on

Copy the code

This writing method is often used in projects

Multiple if conditions perform the same logical optimization strategy

Before optimization

if(a==1) {return "The results"
}
if(b==2) {return "The results"
}
if(c==3) {return "The results"
}
Copy the code

The optimized

if(a==1 || b==2 || c==3) {return "The results"
}

// Can also be abbreviated as
if(a==1 || b==2 || c==3)return "The results"
Copy the code

This strategy is optimized by merging different conditions to achieve the same result

A single plain if else optimization strategy

Before optimization

let flag = true
if(flag){
    // Execute business logic
}else{
    return;
}
Copy the code

The optimized

let flag = true

if(! flag)return;

// Execute business logic

Copy the code

An exclusion policy that preferentially excludes the false case and then executes the business logic in the true case

Single if else with return value optimization strategy

Before optimization

function demo(flag){
    if(flag){
        return "True"
    }else{
        return "False"}}Copy the code

The optimized

function demo(flag){
    return flag? "True" : "False"
}
Copy the code

A single if else executes different method optimization strategies

Start with an example: Demo method pass true execute success method, pass false execute error method

function success(){
    console.log("success")}function fail(){
    console.log("fail")}function demo(flag){
    if(flag){
        success()
    }else{
        fail()
    }
}
Copy the code

After looking at the above examples, you might want to optimize:

function demo(flag){ flag? success():fail() }Copy the code

This should be the most commonly used, executing success if true and fail if false

Add an uncommon one

// Use this if you can't guarantee that the parameters you pass are Booleans
function demo(flag){[false.true].includes(flag) && [fail,success][Number(flag)]()
}

// If the value of false is 0, success is executed; if the value of true is 1, fail is executed

// Use this if you can be sure that the parameters you pass are Booleans
function demo(flag){
    [fail,success][Number(flag)]()
}
Copy the code

This optimization strategy, combined with Boolean false and true, can be converted to 0 and 1 and thus used as an index

Multiple else-if optimization strategies with return values

Encapsulate a method to get a position: getPosition

Before optimization

function getPosition(direction){
    if(direction == "left") {return "Left"
    }else if(direction == "right") {return "Right"
    }else if(direction == "top") {return "On"
    }else if(direction == "bottom") {return "Under"
    }else{
        return "Unknown"}}Copy the code

The optimized

function getPosition(direction){
    return ({
        left:"Left".right:"Right".top:"On".bottom:"Under"
    })[direction] || "Unknown"
}
Copy the code

Multiple else- Ifs perform different method optimization strategies

We make a permission button, different roles log in a system, click the same button to execute different business logic

Before optimization

let role = 'admin' // Simulate the role returned by the login interface
document.querySelector('#btn').addEventListener( 'click' , function(){
    if(role == 'admin') {console.log('Business logic executed by administrator clicking on this button')}else if(role == 'subAdmin') {console.log('Business logic executed by child administrator clicking this button')}else if(role == 'mall') {console.log('Business logic executed by mall character clicking on this button')}else if(role == 'parkingLot') {console.log('Parking lot role clicks this button to execute business logic')}})Copy the code

The above code does not seem to have any problems, from the point of view of easy maintenance and management, need to be optimized

The optimized

let role = 'admin' // Simulate the role returned by the login interface

let btnPermissionsControl = {
    admin:function(){
        console.log('Business logic executed by administrator clicking on this button')},subAdmin:function(){
        console.log('Business logic executed by child administrator clicking this button')},mall:function(){
        console.log('Business logic executed by mall character clicking on this button')},parkingLot:function(){
        console.log('Parking lot role clicks this button to execute business logic')}}document.querySelector('#btn').addEventListener( 'click' , btnPermissionsControl[role] )
Copy the code

After optimization, you only need to maintain one object

Multiple if nested optimization policies

Sometimes, there is a dynamic value in the data returned by the back end, which means that sometimes there is this data, sometimes there is no, and then throw you a word, “there is a display, there is no display”, as the front end of our nature is very rigorous

If userInfo has a value and a hobby has a value, display the content of the userInfo field. If userInfo has a value and a hobby has a value, display the content of the userInfo field. If userInfo has a value, display the content of the hobby field

Simulate the data returned by the back end


let result = {
    status:200.codeMsg:'success'.data: {userInfo: {age:18.hobby: ['Knock code'.'Play basketball']}}}Copy the code

Rigorous writing of the front end

if(result.data){
    if(result.data.userInfo){
        if(result.data.userInfo.hobby){
            if(Array.isArray(result.data.userInfo.hobby)){
                if(result.data.userInfo.hobby.length){
                    . / / traverse the result data. The userInfo. Hobby for rendering
                }
            }
        }
    }
}
Copy the code

Optimize with &&

The first way to write it optimally

// Get data result successfully
if ( result.data && result.data.userInfo && 
    result.data.userInfo.hobby && 
    Array.isArray(result.data.userInfo.hobby) && 
    result.data.userInfo.hobby.length ) 
{
    . / / traverse the result data. The userInfo. Hobby for rendering
}

Copy the code

The second optimal way to write it

// Get data result successfully
result.data && 
result.data.userInfo && 
result.data.userInfo.hobby && 
Array.isArray(result.data.userInfo.hobby) && 
result.data.userInfo.hobby.length) &&
(() = >{
    . / / traverse the result data. The userInfo. Hobby for rendering}) ()Copy the code

The third way to write it optimally

This suits a rigorous but lazy front end

// Get data result successfully
try {
   if(result.data.userInfo.hobby.length){
       . / / traverse the result data. The userInfo. Hobby for rendering}}catch (error) {
   
}
Copy the code

This uses a try catch strategy

The fourth way to write it optimally

Thanks to liubiantaolV-1 Philharmonic partner’s suggestion, we hereby add this example, interested partners can go to see this feature

The optional chaining optimization is now available in the latest version of Google Chrome, and should be added to the ECMAScript standard in the future

if(result? .data? .userInfo? .hobby? .length){. / / traverse the result data. The userInfo. Hobby for rendering
}

Copy the code

other


let flag = a==1? true:false // Optimize => let flag = a==1
// If the flag variable is used in more places, it can be saved with the flag variable.
If (a==1){} if (a==1){}

let FLAG = b==1? false:true // Optimize => let FLAG =! (b==1)
// This strategy is used in reverse

Copy the code
// Declare multiple variables
var firstName = 'the king'
var secondName = ' ' '
var thirdName = 'ma'
var lastName = 'child'

/ / = >

// var firstName = '王',secondName = '王', thirdName = '王', lastName = '王'

// String concatenation is done using the array join method when the + sign is used frequently

//let result = firstName+sencondtName+threeName+lastName

/ / = >

//join
let result = [firstName,secondName,thirdName,lastName].join(' ')
Copy the code
  • Use arrow functions whenever possible
  • Use template strings whenever possible
  • Use deconstructed assignments whenever possible
  • Try to use ES6 syntax, and you’ll find much less code

supplement

Dom binding event optimization. Click on the DOM to pop up the corresponding number (type).

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>To optimize the</title>
</head>
<body>
    <div>
        <div class="wrap"><button class="btn" onclick="fn(1)">type=1</button></div>
        <div class="wrap"><button class="btn" onclick="fn(2)">type=2</button></div>
        <div class="wrap"><button class="btn" onclick="fn(3)">type=3</button></div>
    </div>
</body>
<script>
    let btns = document.querySelectorAll('.btn');
    let fn = function(type){
        alert(type)
    }
</script>
</html>
Copy the code

What if we don’t want to bind events directly to the DOM

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>To optimize the</title>
</head>
<body>
    <div>
        <div class="wrap"><button class="btn">type=1</button></div>
        <div class="wrap"><button class="btn">type=2</button></div>
        <div class="wrap"><button class="btn">type=3</button></div>
    </div>
</body>
<script>
    let btns = document.querySelectorAll('.btn');
    let fn = function(type){
        alert(type)
    }
    btns[0].onclick = fn.bind(null.1)
    btns[1].onclick = fn.bind(null.2)
    btns[2].onclick = fn.bind(null.3)
</script>
</html>
Copy the code

Use bind to change this (null for the first argument) and not immediately

conclusion

If you have a better idea, feel free to leave a comment

Please point out any inaccuracies or errors in the article

Previous article: Useful tools and approaches for front-end development