Функция Javascript: Сокращение избыточности помощников

ProgramBox

Функция Javascript: Сокращение избыточности помощников

Post author:admin
Запись опубликована:15 января, 2022
Post category:Вопросы по программированию

#javascript #reactjs #typescript #algorithm #function

Вопрос:

У меня есть эти несколько вспомогательных функций, которые используются для проверки наличия строки в данном массиве и выполнения определенных шагов, а затем срабатывает только другая функция. Причина, по которой я в настоящее время разделяю их, заключается в том, что маршруты должны быть связаны только с этими шагами.

 // 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) amp;amp;
    arrStepOver.includes(tour?.stepIndex) amp;amp;
    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) amp;amp;
    arrStepResize.includes(tour?.stepIndex) amp;amp;
    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) amp;amp;
    arrStepDock.includes(tour?.stepIndex) amp;amp;
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
};

Это 3, которые у меня есть в настоящее время, но я добавлю еще несколько, я просто хочу выяснить, как уменьшить избыточность, прежде чем продолжить

эта часть на самом деле не нужна, но я помещу функцию JoyRideDelayContinue ниже на всякий случай

 export const JoyRideDelayContinue = (
  dispatch: any,
  tour: any,
  tourType: string,
  stepIndex: number
) => {
  setTimeout(() => {
    if (tour amp;amp; 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);
};

1. Предполагается arrTourOver ли arrStepOver , arrTourResize , и т. Д. динамикой? Или для них это всегда ценности?

2. @VLAZ это всегда будут ценности

3. 1. Если arrTour... всегда есть список строк и arrStep... всегда есть список целых чисел, вы можете объединить arrTour... их в словарь/массив и аналогично для arrStep... . 2. Есть ли причина, по которой ваши arr... массивы являются массивами? Набор может быть лучше, если вам нужно только проверить содержимое. 3. У вас вполне может быть оболочка, которая принимает необходимые параметры вместе с options одним, который будет проверять необходимые arrTour... и arrStep... . 4. Рассмотрите возможность размещения в codereview.stackexchange.com поскольку вы хотите улучшить свой код, не обязательно алгоритм.

Ответ №1:

Ваши функции в основном различаются только в двух местах — даже в двух переменных. Поэтому просто напишите одну функцию и введите для них два дополнительных параметра функции:

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

Это вы можете вызвать с различными параметрами. При необходимости предоставьте три функции-оболочки, которые передают соответствующие константы для двух параметров и передают их аргументы для остальных.

Или даже использовать карри:

 const makeHandleJoyride = (
  arrTour: string[],
  arrStep: number[]
) => (
  dispatch: DispatchFunction,
  tour: Tour,
  index: number
) => {
  if (arrTour.includes(tour?.openTour) amp;amp; 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]);

Ответ №2:

Я бы, вероятно, создал функцию создателя обработчика, которая возвращает функции, которые будут использоваться.

Если единственными частями этой логики, которые изменяются, являются массив строковых литералов и номера шагов, то мы становимся аргументом для создателя этой функции.

Что-то вроде:

 function createHandleJoyrideAction(actions: string[], steps: number[]) {
  return function handleJoyrideAction(dispatch: any, tour: any, index: number) {
    return actions.includes(tour?.openTour) amp;amp;
      steps.includes(tour?.stepIndex) amp;amp;
      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 . Я бы настоятельно рекомендовал немного улучшить ваши типы.

Метки: Функция Javascript: Сокращение избыточности помощников