javascript - Javascript - 概括一个可以以两种不同方式但在相同上下文中使用的函数
问题描述
代码
我已经实现了一个“响应”维度(响应维度)的功能。
这是我目前的方法:
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,
};
}
代码看起来非常相似......所以我想可能有一种简单的方法可以使原始方法更“灵活”
解决方案
我会在最后一个参数中进行对象解构,然后,根据设置的值,我会切换宽度/高度,如下所示:
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);
推荐阅读
- javascript - 添加到主屏幕提示未使用清单 json 显示
- android - AppLovin 无法预缓存资源
- java - 在 oracle 中的 loadjava 命令后,Java 类具有 INVALID 状态
- vaadin - Vaadin Grid 在 componentColumns 中包装标签
- html - 在引导列内垂直对齐文本
- qt - GStreamer d3dvideosink 覆盖重绘闪烁
- sql - 带条件的窗函数
- angularjs - 关闭模式时如何停止 $interval ($uibModal)
- string - 在 Chisel 中传递字符串
- python - 如何通过 ctypes 将(非空)列表从 Python 传递到 C++?