javascript函数：减少助手的冗余

btxsgosb 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(393)

我有几个helper函数，用于检查给定数组中的字符串是否存在，以及是否存在某些步骤，然后只触发另一个函数。我现在将它们分开的原因是，arrtours只需要与那些arrtours步骤相关联。

// Handles for manditory action needed by user
const arrTourOver = ['OverviewTour'];
const arrStepOver = [6, 7];
export const handleJoyrideOverview = (
  dispatch: any,
  tour: any,
  index: number
) => {
  arrTourOver.includes(tour?.openTour) &&
    arrStepOver.includes(tour?.stepIndex) &&
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
};

// Handles for manditory action needed by user
const arrTourResize = ['ResizingWidgets'];
const arrStepResize = [0, 1];
export const handleJoyrideResize = (
  dispatch: any,
  tour: any,
  index: number
) => {
  arrTourResize.includes(tour?.openTour) &&
    arrStepResize.includes(tour?.stepIndex) &&
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
};

// Handles for manditory action needed by user
const arrTourDock = ['DockbarFunctions'];
const arrStepDock = [3, 4];
export const handleJoyrideDock = (dispatch: any, tour: any, index: number) => {
  arrTourDock.includes(tour?.openTour) &&
    arrStepDock.includes(tour?.stepIndex) &&
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
};

这些是我目前拥有的3个，但我会再添加一些，我只是想在继续之前找出减少冗余的方法
这部分并不是真的需要，但我将在下面放置JoyrideLayContinue函数以防万一

export const JoyRideDelayContinue = (
  dispatch: any,
  tour: any,
  tourType: string,
  stepIndex: number
) => {
  setTimeout(() => {
    if (tour && tour.openTour === tourType) {
      dispatch({ type: 'SET_OPEN_TOUR', payload: '' });
      dispatch({
        type: 'PROGRESS_NEXT_OR_PREV',
        payload: { type: tourType, stepIndex: stepIndex }
      });
      setTimeout(
        () => dispatch({ type: 'SET_OPEN_TOUR', payload: tourType }),
        500
      );
    }
  }, 1000);
};

JavaScript reactjs Function Algorithm typescript

来源：https://stackoverflow.com/questions/68308235/javascript-function-reduce-redundancy-of-helpers

2条答案

按热度按时间

7y4bm7vi1#

你的函数基本上只在两个地方不同——甚至是两个变量。因此，只需编写一个函数并为它们引入两个额外的函数参数：

const handleJoyride = (
  arrTour: string[],
  arrStep: number[],
  dispatch: DispatchFunction,
  tour: Tour,
  index: number
) => {
  if (arrTour.includes(tour?.openTour) && arrStep.includes(tour?.stepIndex)) {
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
  }
};

您可以使用不同的参数调用此函数。如有必要，提供三个 Package 函数，为这两个参数传递各自的常量，并为其余参数转发它们的参数。
甚至利用咖喱：

const makeHandleJoyride = (
  arrTour: string[],
  arrStep: number[]
) => (
  dispatch: DispatchFunction,
  tour: Tour,
  index: number
) => {
  if (arrTour.includes(tour?.openTour) && arrStep.includes(tour?.stepIndex)) {
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
  }
};

/**Handles for manditory action needed by user */
export const handleJoyrideOverview = makeHandleJoyride(['OverviewTour'], [6, 7]);

/**Handles for manditory action needed by user */
export const handleJoyrideResize = makeHandleJoyride(['ResizingWidgets'], [0, 1]);

/**Handles for manditory action needed by user */
export const handleJoyrideDock = makeHandleJoyride(['DockbarFunctions'], [3, 4]);

赞(0）回复(0）举报 2021-09-13

xvw2m8pv2#

我可能会创建一个处理程序创建者函数，返回将要使用的函数。
如果此逻辑中唯一更改的部分是字符串文本数组和步骤号，那么我们将它们作为此函数创建者的参数。
比如：

function createHandleJoyrideAction(actions: string[], steps: number[]) {
  return function handleJoyrideAction(dispatch: any, tour: any, index: number) {
    return actions.includes(tour?.openTour) &&
      steps.includes(tour?.stepIndex) &&
      JoyRideDelayContinue(dispatch, tour, tour?.openTour, index)
  }
}

现在，您只需执行以下操作：

export const handleJoyrideResize = 
  createHandleJoyrideAction(['ResizingWidgets'], [0, 1])

export const handleJoyrideDock = 
  createHandleJoyrideAction(['DockbarFunctions'], [3, 4])

export const handleJoyrideOverview = 
  createHandleJoyrideAction(['OverviewTour'], [6, 7])

操场
还有，值得一提的是，这是很多 any . 我强烈建议你把你的类型做得更好一点。

赞(0）回复(0）举报 2021-09-13

我来回答

javascript函数：减少助手的冗余

2条答案

相关问题

热门标签

最新问答