如何优化JS等比尺寸计算函数支持按宽/高两种维度缩放

最终实现代码 #

// 全局常量可根据业务场景自行调整
const WINDOW_WIDTH = window.innerWidth
const WINDOW_HEIGHT = window.innerHeight

export default (originalDimensions, finalConfig = { width: WINDOW_WIDTH }) => {
  // 兼容旧版本直接传入finalWidth的调用方式
  const config = typeof finalConfig === 'number' 
    ? { width: finalConfig } 
    : finalConfig

  let responsiveWidth, responsiveHeight

  // 传入最终宽度，计算匹配高度
  if (config.width !== undefined) {
    responsiveWidth = config.width
    responsiveHeight = ruleOfThree(
      originalDimensions.height,
      originalDimensions.width,
      responsiveWidth
    )
  } 
  // 传入最终高度，计算匹配宽度
  else if (config.height !== undefined) {
    responsiveHeight = config.height
    responsiveWidth = ruleOfThree(
      originalDimensions.width,
      originalDimensions.height,
      responsiveHeight
    )
  } 
  // 参数非法兜底逻辑
  else {
    throw new Error('请传入合法的最终宽度width或最终高度height')
  }

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

/* 三分律辅助函数 注：原代码存在语法错误，function声明不需要加箭头符号 */
function ruleOfThree (originalX, originalY, finalY, direct = true) {
  if (direct) {
    return (originalX * finalY) / originalY;
  }
  return (originalY * finalY) / originalX;
};

使用示例 #

• 按最终宽度计算（完全兼容原有调用逻辑，旧代码无需修改即可正常运行）

// 旧版调用方式仍支持
const size1 = calculateResponsiveSize({width: 1920, height: 1080}, 1280)
// 新的配置项调用方式
const size2 = calculateResponsiveSize({width: 1920, height: 1080}, {width: 1280})
// 默认使用窗口宽度计算
const size3 = calculateResponsiveSize({width: 1920, height: 1080})

• 按最终高度计算

const size = calculateResponsiveSize({width: 1920, height: 1080}, {height: 720})
// 如果需要默认按窗口高度计算，仅需修改函数入参的默认配置为{height: WINDOW_HEIGHT}即可

实现思路说明 #

• 没有引入复杂设计模式，通过参数判断即可完成需求，代码可读性、可维护性更高
• 做了向下兼容处理，原有调用该函数的业务代码不需要任何调整
• 后续如果需要扩展其他计算规则，仅需在config中新增属性判断逻辑即可

内容的提问来源于stack exchange，提问作者Raul