Javascript - 概括一个可以以两种不同方式但在相同上下文中使用的函数答案

【问题标题】：Javascript - Generalize a function that can be used in two different ways but in the same contextJavascript - 概括一个可以以两种不同方式但在相同上下文中使用的函数
【发布时间】：2021-10-15 10:56:45
【问题描述】：

代码

我已经实现了一个“响应”维度（响应维度）的功能。

这是我目前的方法：

export default (originalDimensions, finalWidth = WINDOW_WIDTH) => {
  const responsiveWidth = finalWidth;

  const responsiveHeight = ruleOfThree(
    originalDimensions.height,
    originalDimensions.width,
    responsiveWidth
  );

  return {
    width: responsiveWidth,
    height: responsiveHeight,
  };
};

/* Helper */

function ruleOfThree (originalX, originalY, finalY, direct = true) => {
  if (direct) {
    return (originalX * finalY) / originalY;
  }

  return (originalY * finalY) / originalX;
};

问题

如您所见，它只返回一个具有响应式尺寸的对象。我遇到的主要问题是它只将给定的尺寸调整为给定的“finalWidth”。但是，如果我收到的不是最终宽度，而是最终高度（以便该方法使原始宽度适应最终高度）怎么办？

如何为该方法增加灵活性以便能够解决该场景而无需创建其他不同的方法？

任何设计模式或想法？

注意

如果我按如下方式传递最终高度（而不是最终宽度）：responsifyDimensions(photo.dimensions, /*finalHeight = 100*/)

那么，方法就要做：

export default (originalDimensions, finalHeight = WINDOW_HEIGHT) => {
  const responsiveHeight = finalHeight; <----

  const responsiveWidth = ruleOfThree(
    originalDimensions.width,
    originalDimensions.height, <-----
    responsiveHeight <-----
  );

  return {
    width: responsiveWidth,
    height: responsiveHeight,
  };
}

代码看起来真的很相似......所以我想可能有一种简单的方法可以使原始方法更“灵活”

【问题讨论】：

标签： javascript design-patterns ecmascript-6 refactoring

【解决方案1】：

我会在最后一个参数中解构对象，然后，根据设置的值，我会切换宽度/高度，如下所示：

export default (originalDimensions, { finalWidth, finalHeight } = {}) => {
  if (finalHeight) {
    return {
      width: ruleOfThree(
        originalDimensions.height,
        originalDimensions.width,
        finalHeight
      ),
      height: finalHeight,
    };
  }

  const width = finalWidth ?? WINDOW_WIDTH;

  return {
    width,
    height: ruleOfThree(
      originalDimensions.width,
      originalDimensions.height,
      width
    ),
  };
};

/* Helper */

function ruleOfThree (originalX, originalY, finalY, direct = true) => {
  if (direct) {
    return (originalX * finalY) / originalY;
  }

  return (originalY * finalY) / originalX;
};

/* usage */

// Fit width
const dimsWidth = responsifyDimensions(photo.dimensions, { finalWidth: 100 });
// Fit height
const dimsHeight = responsifyDimensions(photo.dimensions, { finalHeight: 100 });
// Fit default (WINDOW_WIDTH as width)
const dimsDefault = responsifyDimensions(photo.dimensions);

【讨论】：