current position:Home>Codereview - review of an emergency project

Codereview - review of an emergency project

2022-04-29 20:33:08Geek hidokawa

Form writing habits together ! This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 6 God , Click to see the event details .

Deconstruction of a project , It's more like assembling a 4WD when I was a child , And every small assembly part is a component ; An area formed between small parts, such as a chassis , The engine area is assembled by multiple parts , This is like... In the project block block , It's made up of multiple components , It also involves the processing of a request and business logic , Figure this out , It is helpful for route disassembly at the beginning of a project .

project , Is out of thin air in my heart , Build a castle .

1. Deconstruction treatment :

In some general request methods , Depending on the requested parameters , Back to the word key key Although they are the same , But the type of data may be different , Here is an example :

type Params = {
  frontuiCn:string;
  formType?:string;
  uuid?:string;
  flowId?:string;
} | {
  operateId:string;
  formType?:string;
  uuid?:string;
  flowId?:string;
}  
/** * @function dispahcer request  */
  async getDispatcher(params:Params) {
    const result = await dispatcher({ ...params });
    this.dispahcerDatas = result;

    if (params.formType === 'form') {
      this.mixDispatcher = {
        ...result,
        ...result.property || {},
        tableCn: get(result, 'table.tableCn'),
        elementList: Object.values(result.elementList || {}),
        _elementList: result.elementList,
      };
    } else {
      this.mixDispatcher = result;
    }
  }
 Copy code 
  • There is formType When ,elementList It's the object
  • In the absence of formType When ,elementList It's an array
  • Besides , There may still be what we want in the package Key value At a deeper level

Processing mode :

By way of deconstruction , All the values you want Spread out At the same level , In this way, in subsequent use , Directly through deconstruction, we can obtain cosnt {c} = data, Not through a.b.c In the form of

2. The use of mapping :

For constants obtained through the interface , May continue to be heavily used in the project , It is recommended to create a mapping file , mapping .

The advantage of this is that if the constant returned by the back end is modified , At the front end, you only need to modify the value in the mapping file , Instead of searching and modifying one by one in the global .

/** *  Template page and route mapping  */
import { INDEX, DETAIL } from '@/router/yj-yuan/yuan.const';

export const templateMap = {
  //  On duty system 
  yjtf_list: 'YjZhishouIndex', //  Watch list 
  tfsj_form_dj: 'YjZhishouForm', //  On duty registration 
  tfsj_form_ll: 'YjZhishouDetail', //  On duty browsing 
  tfsj_form_xb: 'YjZhishouReport', //  Event continuation 
  tfsj_form_fk: 'YjZhishouTickling', //  Event feedback 
  //  Research and judgment system 
  yjtf_sh_list: 'YjZhihuiShIndex', //  Research list 
  tfsj_form_bl: 'YjZhihuiDetail', //  Research and judgment review page 
  tfsj_form_ypll: 'YjZhihuiWatchDetail', //  Research and judgment details 
  tfsj_form_wxyd: 'YjSheheUnReact', //  Not responding 

  //  Command system 
  wzsb_list: 'YjZhihuiZhResource', //  Resource query 
  zydd_list: 'YjZhihuiZhDispatch', //  Resource scheduling 
  fabs_ewb_list: 'YjZhihuiZhPlan', //  Solution deployment 
  fabs_ewb_dj: 'YjZhihuiZhPlanList', //  Scheme deployment list 

  tfsj_form_pg: 'YjPingguForm', //  Event assessment 

  //  Plan system 
  yj_ya_ynk: INDEX.name, //  Plan Association 
  yjyagl_form_dj: DETAIL.name,
};
 Copy code 

3.Es6 Use

reduce To deal with :

1. adopt reduce-- Flattening arrays

function FlatArr(arr = []) {
    return arr.reduce((t, v) => t.concat(Array.isArray(v) ? FlatArr(v) : v), [])
}
 Copy code 

Use :

const arr = [0, 1, [2, 3, 3], [4, 5, [6, 7, 7]], [8, [9, 10, [11, 12]]]];
FlatArr(arr); // [0, 1, 2, 3, 3, 4, 5, 6, 7, 7, 8, 9, 10, 11, 12]
 Copy code 

2. Array rotation Map object

//arr Array ,key For wanting to be map Property of the key in the object  
function getArrMap(arr,key){
      return arr.reduce((acc,item)=>{
        acc[item[key]] = item;
        return acc;
      },{})
 }
 Copy code 

Use :

    const Arr = [
      {
        name:' Zhang San ',
        data:{
          age:18,
          dept:' staff member '
        }
      },
      {
        name:' Li Si ',
        data:{
          age:18,
          dept:' Student '
        }
      },
      {
        name:' Wang Wu ',
        data:{
          age:18,
          dept:' The assassin '
        }
      }
    ]
    
    const res = getArrMap(Arr,'name');

 Copy code 

The results are as follows :

3.reduce Instead of map perhaps filter

const arr = [0, 2, 4, 6];

//  Instead of map:[0, 4, 8, 12]
const a = arr.map(v => v * 2);
const b = arr.reduce((t, v) => [...t, v * 2], []);

//  Instead of filter:[4, 8, 12]
const c = arr.filter(v => v > 1);
const d = arr.reduce((t, v) => v > 1 ? [...t, v] : t, []);

//  Instead of map and filter:[4, 6]
const e = arr.map(v => v * 2).filter(v => v > 2);
const f = arr.reduce((t, v) => v * 2 > 2 ? [...t, v * 2] : t, []);

 Copy code 

Here's about reduce That's all for my summary , Follow up on reduce Operation , The author will continue to add here

copyright notice
author[Geek hidokawa],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204292033030863.html

Random recommended