Skip to content

案例一:switch转为map映射

转换前

javascript
let orderType = ''
switch(item.OrderType) {
  case '盘点单(方法一)': {
    orderType = 'CKCheck'
    break
  }
  case '采购退货出库单': {
    orderType = 'CKJHCheck'
    break
  }
  case '销售发货出库单': {
    orderType = 'CKXSCheck'
    break
  }
  case '采购收货入库单': {
    orderType = 'CKJHCheck'
    break
  }
  case '销售收款单': {
    orderType = 'XSPay'
    break
  }
  case '进货订单': {
    orderType = 'JHOrder'
    break
  }
  case '调拨单': {
    orderType = 'CKMove'
    break
  }
  case '采购付款单': {
    orderType = 'JHPay'
    break
  }
  default: {
    orderType = ''
  }
}

转换后

javascript
const orderTypeMapping = {
  '盘点单(方法一)': 'CKCheck',
  '采购退货出库单': 'CKJHCheck',
  '销售发货出库单': 'CKXSCheck',
  '采购收货入库单': 'CKJHCheck',
  '销售收款单': 'XSPay',
  '进货订单': 'JHOrder',
  '调拨单': 'CKMove',
  '采购付款单': 'JHPay',
};

orderType = orderTypeMapping[item.OrderType] || '';

案例二:if分支通过map以及for循环简化代码

转换前:

javascript
const { 
  SupplierName, SupplierNo,
  ClientCode, ClientName, EmployeeName, 
  EmployeeNo, store,
  BrandName, BrandNo,GoodsTypeName,
  GoodsTypeNo
} = data
if ( SupplierName && SupplierNo) {
  this.formFields.supplierName = SupplierName
  this.formFields.supplierNo = SupplierNo
} else if (ClientCode && ClientName) {
  this.formFields.clientCode = ClientCode
  this.formFields.clientName = ClientName
} else if (EmployeeName && EmployeeNo) {
  this.formFields.employeeName = EmployeeName
  this.formFields.employeeNo = EmployeeNo
} else if (store.StoreName && store.StoreNo) {
  this.formFields.storeName = store.StoreName
  this.formFields.storeNo = store.StoreNo
} else if (BrandName && BrandNo) {
  this.formFields.brandName = BrandName
  this.formFields.brandNo = BrandNo
} else if (GoodsTypeName && GoodsTypeNo) {
  this.formFields.goodsTypeName = GoodsTypeName
  this.formFields.goodsTypeNo = GoodsTypeNo
}

转换后:

javascript
const fieldMapping = [
  { source: ['SupplierName', 'SupplierNo'], target: ['supplierName', 'supplierNo'] },
  { source: ['ClientCode', 'ClientName'], target: ['clientCode', 'clientName'] },
  { source: ['EmployeeName', 'EmployeeNo'], target: ['employeeName', 'employeeNo'] },
  { source: ['StoreName', 'StoreNo'], target: ['storeName', 'storeNo'], parent: 'store' },
  { source: ['BrandName', 'BrandNo'], target: ['brandName', 'brandNo'] },
  { source: ['GoodsTypeName', 'GoodsTypeNo'], target: ['goodsTypeName', 'goodsTypeNo'] }
];

for (let mapping of fieldMapping) {
 let sourceData = mapping.parent ? (data[mapping.parent] || {}) : data;
 mapping.source.forEach((prop, index) => {
  if (sourceData[prop]) {
   this.formFields[mapping.target[index]] = sourceData[prop];
  }
 })
}

从代码简洁度看的话,第二种写法是要优于第一种的,而从性能来看,第一种明显要优于第二种,第二种使用了双重for循环,虽然扩展性提高了,一定程度上也浪费了性能