结合 2 个复杂的 Javascript 函数

Question

您好，我有 2 个复杂函数，它们为 Graph 组件提供值，但具有 2 个不同的数据源。

这是第一个处理 1 个图形的 Function

const timeLine = (data: any, day: string) => {
// subtract 1 hour from the dates here since the chart day columns begin at the 23hr mark
const chartStartDate = moment(activeDate, 'YYYY/MM/DD').subtract(1, 'hour');
const dayStart: any = moment(day, 'MMM D').subtract(1, 'hour');
let nextDay = moment(dayStart);
nextDay = nextDay.add(1, 'day');
const finalDayData: any[] = [];
(data || []).forEach((activity: any, index: number) => {
  const offSetY = index;
  const format = 'YYYY-MM-DD h:mm:ss';
  const startMoment: any = moment(activity['START_DATE'], format);
  const endMoment = moment(activity['END_DATE'], format);
  if (
    (startMoment.isSameOrAfter(dayStart) &&
      startMoment.isBefore(nextDay)) ||
    (startMoment.isBefore(chartStartDate) &&
      dayStart.isSame(chartStartDate, 'day'))
  ) {
    let numberOfUnits;
    let offSetX;
    if (startMoment.isBefore(chartStartDate)) {
      // This bar starts before the start date of the entire chart, so we need to reduce the units so it doesn't overflow to the left.
      numberOfUnits = endMoment.diff(chartStartDate, 'hours', true);
      offSetX = 0;
    } else {
      numberOfUnits = endMoment.diff(startMoment, 'hours', true);
      offSetX = startMoment.diff(dayStart, 'hours', true);
    }
    finalDayData.push({
      numberOfUnits,
      offSetX,
      offSetY,
      unitColor: getUnitColor(activity.UNIT, userPlant)
    });
  }
});
return finalDayData;
};

这是第二个 function，它与第一个非常相似，但处理不同的数据集。

const fireRiskTimeLine = (data: any, day: string) => {
const activityTypes: string[] = [];
// subtract 1 hour from the dates here since the chart day columns begin at the 23hr mark
const chartStartDate = moment(activeDate, 'YYYY/MM/DD').subtract(1, 'hour');
const dayStart: any = moment(day, 'MMM D').subtract(1, 'hour');
let nextDay = moment(dayStart);
nextDay = nextDay.add(1, 'day');
const finalDayData: any[] = [];
(data || []).forEach((activity: any) => {
  const foundIdx = activityTypes.findIndex(
    (type: string) => activity.DESCRIPTION === type
  );
  if (foundIdx === -1) {
    activityTypes.push(activity.DESCRIPTION);
  }
  const offSetY = foundIdx === -1 ? activityTypes.length - 1 : foundIdx;
  const format = 'YYYY-MM-DD h:mm:ss';
  const startMoment: any = moment(activity['BEGIN DATE'], format);
  const endMoment = moment(activity['END DATE'], format);
  if (
    (startMoment.isSameOrAfter(dayStart) &&
      startMoment.isBefore(nextDay)) ||
    (startMoment.isBefore(chartStartDate) &&
      dayStart.isSame(chartStartDate, 'day'))
  ) {
    let numberOfUnits;
    let offSetX;
    if (startMoment.isBefore(chartStartDate)) {
      // This bar starts before the start date of the entire chart, so we need to reduce the units so it doesn't overflow to the left.
      numberOfUnits = endMoment.diff(chartStartDate, 'hours', true);
      offSetX = 0;
    } else {
      numberOfUnits = endMoment.diff(startMoment, 'hours', true);
      offSetX = startMoment.diff(dayStart, 'hours', true);
    }
    finalDayData.push({
      numberOfUnits,
      offSetX,
      offSetY,
      riskColor: activity['COLOR DESCRIPTION']
    });
  }
});
return finalDayData;
};

是否有一种优雅的方式来组合这两个功能，或者最好是 go 并保留为 2 个单独的功能。 我试图把它们结合起来，但觉得我把它复杂化了。

Answer 1

这是非常基于意见的，但是如果两个函数都做类似的事情，并且您不需要能够单独调用它们，那么将它们合并为一个似乎是一个好主意，因为它可以使您的代码更清晰。

Answer 2

我会做不同的，

而不是结合我会将它与更多功能分开，例如。

main(data){
 let data = prepareData(data);
 let combineData = loopData(data);
 return combineData;
}

分解

prepareData(data){

const chartStartDate = moment(activeDate, 'YYYY/MM/DD').subtract(1, 'hour');
const dayStart: any = moment(day, 'MMM D').subtract(1, 'hour');
let nextDay = moment(dayStart);
nextDay = nextDay.add(1, 'day');
const finalDayData: any[] = [];
}
loopData(data){
(data || []).forEach((activity: any) => {
  const foundIdx = activityTypes.findIndex(
    (type: string) => activity.DESCRIPTION === type
  );
  if (foundIdx === -1) {
    activityTypes.push(activity.DESCRIPTION);
  }
  const offSetY = foundIdx === -1 ? activityTypes.length - 1 : foundIdx;
  const format = 'YYYY-MM-DD h:mm:ss';
  const startMoment: any = moment(activity['BEGIN DATE'], format);
  const endMoment = moment(activity['END DATE'], format);
  if (
    (startMoment.isSameOrAfter(dayStart) &&
      startMoment.isBefore(nextDay)) ||
    (startMoment.isBefore(chartStartDate) &&
      dayStart.isSame(chartStartDate, 'day'))
  ) {
    let numberOfUnits;
    let offSetX;
    if (startMoment.isBefore(chartStartDate)) {
      // This bar starts before the start date of the entire chart, so we need to reduce the units so it doesn't overflow to the left.
      numberOfUnits = endMoment.diff(chartStartDate, 'hours', true);
      offSetX = 0;
    } else {
      numberOfUnits = endMoment.diff(startMoment, 'hours', true);
      offSetX = startMoment.diff(dayStart, 'hours', true);
    }
    finalDayData.push({
      numberOfUnits,
      offSetX,
      offSetY,
      riskColor: activity['COLOR DESCRIPTION']
    });
  }

代码是抽象的，但我会将它拆分为小函数，因为如果我明天需要新的数据源，我只会修改prepareData()而不是整个东西。 我的 2 美分:) }