前端开发技巧 summarizing

减少重复查询

在前端开发中 对于界面查询重复的数据 我们可以采用回调方法减小代码量
但是开发时 数据基本上都是异步从后端获取 为了能获取数据 可以使用自定义回调函数异步返回数据 减少代码量

例如：

聚合在一个js中

import { getUserInfo } from '@/api/user'

export let RoleId = {
  ID_SUPER_ADMIN: {
    label: '后台超级管理员',
    value: 1
  },
  ID_ADMIN: {
    label: '后台管理员',
    value: 2
  },
  ID_CUSTOMER_ADMIN: {
    label: '客户端管理员',
    value: 3
  },
  ID_NORMAL: {
    label: '普通用户',
    value: 4
  },
  QueryerRoleIds: {
    label: '普通和客户端管理员',
    value: '3,4'
  },
  AuditorRoleIds: {
    label: '客户端管理员',
    value: '3'
  }
}

export function getUserList(roleIds,callback) {
// 获取用户数据
  getUserInfo({
    roleIdList:roleIds,
    limit: 0
  }).then((res) => {
    if (res.success) {
      //回调异步数据
      callback(res.root)
    } else {
      console.log("无数据！");
      callback([])
    }
  })
}

vue中调用

created() {
  this.getTableData();
  //查询用户数据
  getUserList(RoleId.AuditorRoleIds.value,data=>this.authorList=data);
  getUserList(RoleId.QueryerRoleIds.value,data=>this.inquirerList=data);
},

当然 也可以继续聚合 例如：vue中使用extend 继承写好的数据or function