结合 2 个复杂的 Javascript 函数

Question

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

这是处理 1 个图形的第一个函数

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;
};

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

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;
};

是否有结合这 2 个函数的优雅方法，或者最好继续作为 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 美分 :) }

结合 2 个复杂的 Javascript 函数

Combining 2 complex Javascript functions

javascript

algorithm

big-o

function

reactjs