preface

As the business iterates, the project code grows.

If we do not pay attention to the development specification and code hierarchy planning in the early stage, there will be a lot of redundant code in the later project, which is difficult to maintain.

In the end, it often ends up refactoring and rewriting new projects.

It could have been better.

This week, we’re going to talk about how to reduce redundant code in your projects.

Why redundant code

Based on my experience, the occurrence of redundant code includes but is not limited to the following aspects:

  • No extraction is made for common request/business logic
  • Functions that converge to aggregate functions are provided directly to external calls
  • Functions that can be merged are not merged
  • Copy and paste similar structures

How to solve

The core idea is that can merge merge, can extract extract.

In fact, it’s all advice, this kind of thing, can stick to.

Can lead, can’t lead to return can leave zha?

Extract common request/business logic

For example, subscribing and unsubscribing to an item of data are only actions, and the parameters are the same.

  • Don’t write a subscribe and unsubscribe logic under each module, extract it into the global public logic

  • Don’t write two handlers, just use actions (mobx example)

// Subscribes subscribes to a collection of data ids for users

// bad case
if(subscribes.includes(row.id)){
    store.cancel()
}else{
    store.add()
}


// good case

store.subscribe(row.id,subscribes.includes(row.id))

async function subscribe(id,flag){
    let url=' '
    if(flag){
        // Unsubscribe
        url='/api/subscribe/cancel'
    }else{
        // Add a subscription
        url='/api/subscribe/add'
    }
    await axios.post(url,{id})
}

Copy the code

There is also a more typical scenario. After logging in to the platform to obtain user information, for the convenience of other modules, this information should be placed globally, rather than sending a request every time it is used.

Convergence of aggregate functions

Given such a scenario, when a new project is created and a director is assigned, the resource (the project) is synchronized to the permissions system and the people corresponding to the resource are empowered.

// bad case 
// Create or update resource information
export function addOrUpdate(){}
/ / empowerment
export function addPermission(){}
Copy the code

One drawback to this approach is that if provided externally, both methods are called.

In fact, these two activities are one, with the creation or updating of resources followed by empowerment. AddPermission is a subfunction of addOrUpdate, which is called internally. The external only needs to call the aggregated function addOrUpdate.

// good case 
// Create or update resource information
export function addOrUpdate(){
	addPermission();
}
/ / empowerment
function addPermission(){}
Copy the code

Functions that can be merged

This is easier to understand, just like subscribe and unsubscribe mentioned above, but the action difference can be combined into one.

In addition, there is similar to insert data and update data, where the criterion of action is whether there is an ID, some is update, no is insert.

if(params.id){
	service.update(params)
}else{
	service.add(params)
}
Copy the code

Think in a configuration table

Copy and paste is chosen because there are many similar structures, in which case the configuration table + loop is the preferred solution.

farewell

Love is fickle,

Is a move that hurt.

Thank you so much for reading my article,

I’m Cold Moon Heart. See you next time.