Рефакторинг javascript кода более элегантный, без использования вложенных тернарных выражений или - PullRequest
Новая
       83

Рефакторинг javascript кода более элегантный, без использования вложенных тернарных выражений или

0 голосов
/ 20 июня 2020

У меня есть этот упрощенный код, довольно простой: 

export const OwnRedirect = () => {
  const { pipelineType, ticketId, productId } = useParams<{
    pipelineType?: string;
    ticketId?: string;
    productId?: string;
  }>();
  let path = '';
  if (pipelineType) {
    path = `/pipeline/${pipelineType}`;
  } else if (ticketId) {
    path = `/ticket/${ticketId}`;
  } else if (productId) {
    path = `/product/${productId}`;
  } else {
    path = '/pipeline/local';
  }
  return <Redirect to={path}/>;
};

Но я нашел его недостаточно читаемым. Кто-нибудь знает, как провести рефакторинг этого кода, не используя if, switch или let или вложенный тернарный оператор?

Ответы [ 3 ]

1 голос
/ 20 июня 2020

Чтобы облегчить чтение, вы можете воспользоваться оценкой короткого замыкания с && и ||. Чтобы сделать вещи чище и проще для тестирования, мне также нравится создавать очень маленькие функции, которые делают только одно, но делают это хорошо. Он избегает смешивания лог c (какой путь выбрать) и функциональности (построение этих путей) : 

export const OwnRedirect = () => {
  const { pipelineType, ticketId, productId } = useParams<{
    pipelineType?: string;
    ticketId?: string;
    productId?: string;
  }>();
  
  const path = (
    (pipelineType && buildPipelinePath(pipelineType)) ||
    (ticketId     && buildTicketPath(ticketId)      ) ||
    (productId    && buildProductPath(productId)    ) ||
    `/pipeline/local`
  );

  return <Redirect to={path} />;
};

function buildPipelinePath(pipelineType) {
  return `/pipeline/${Number(pipelineType) === 1 ? 'local' : 'global'}`;
}

function buildTicketPath(ticketId) {
  return `/ticket/${ticketId}`;
}

function buildProductPath(productId) {
  return `/product/${productId}`;
}
0 голосов
/ 25 июня 2020

Вы можете использовать сумму с тегами . Например: 

// Generic functions
// B is the function compose combinator
const B = g => f => x => g (f (x))

const taggedSum = xs => Object.fromEntries (
  xs.map(tag => [tag, value => ({ tag, value })])
)

const cata = matches => ({ tag, value }) => matches[tag] (value)
/////////////////////////

const Kind = taggedSum (['pipeline', 'ticket', 'product', 'local' ])

const path = cata ({
    pipeline: x => `/pipeline/${x}`,
    ticket: x => `/ticket/${x}`,
    product: x => `/product/${x}`,
    local: () => `/pipeline/local`
})

const output1 = B (path) (Kind.pipeline) (1)
const output2 = B (path) (Kind.ticket) (14)
const output3 = B (path) (Kind.product) (3421)
const output4 = B (path) (Kind.local) (0)


console.log ('pipeline:', output1)
console.log ('ticket:', output2)
console.log ('product:', output3)
console.log ('local:', output4)
0 голосов
/ 21 июня 2020

иногда просто разделение на функцию помогает улучшить читаемость. 

const toUrl = ({ pipelineType = '', ticketId = '', productId = '' }) => {
  if (pipelineType) {
    return `/pipeline/${pipelineType}`;
  } 
  
  if (ticketId) {
    return `/ticket/${ticketId}`;
  } 
  
  if (productId) {
    return `/product/${productId}`;
  }
  
  return '/pipeline/local';
}


export const OwnRedirect = () => {
  const params = useParams<{
    pipelineType?: string;
    ticketId?: string;
    productId?: string;
  }>();
  
  return <Redirect to={toUrl(params)}/>;
};
...