另一种实现查看端口检查的If else语句的方法？
另一种实现查看端口检查的If else语句的方法？
提问于 2022-10-27 08:12:37
我处理的是一个简单的前提，即询问视点，并在此基础上返回不同的aspectRatios。现在，由于某种原因，我总是以true的形式返回，然后在几毫秒后对viewport进行验证。结果是，我选择了两个纵横比，这使我下载额外的图像，这是不必要的。我想知道是否有办法绕过它，还是用不同的方式来写？
const getResponsiveAspectRatio = (): {
s: ValidRatios
m: ValidRatios
l: ValidRatios
} => {
if (viewport?.isWrapperWidthAndUp) {
return { s: "4-3", m: "4-3", l: "4-3" }
} else if (viewport?.isLargeDesktopAndUp) {
return { s: "1-1", m: "1-1", l: "1-1" }
} else if (viewport?.isDesktopAndUp) {
return { s: "3-4", m: "3-4", l: "3-4" }
} else if (viewport?.isTabletAndUp) {
return { s: "3-4", m: "3-4", l: "3-4" }
} else {
return { s: "1-1", m: "1-1", l: "1-1" }
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2022-10-27 08:24:54
首先明确地检查viewport。
const getResponsiveAspectRatio = (): {
s: ValidRatios
m: ValidRatios
l: ValidRatios
} => {
if (!viewport) {
// Viewport is not initialized
return null; // return null or some value that the calling code can
// handle and will not result in downloading resources
}
else if (viewport?.isWrapperWidthAndUp) {
return { s: "4-3", m: "4-3", l: "4-3" }
} else if (viewport?.isLargeDesktopAndUp) {
return { s: "1-1", m: "1-1", l: "1-1" }
} else if (viewport?.isDesktopAndUp) {
return { s: "3-4", m: "3-4", l: "3-4" }
} else if (viewport?.isTabletAndUp) {
return { s: "3-4", m: "3-4", l: "3-4" }
} else {
return { s: "1-1", m: "1-1", l: "1-1" }
}
}Stack Overflow用户
发布于 2022-10-27 09:22:12
一种完全不使用任何if...else语句但有两个if的方法可以基于对空viewport参数的保护(如果需要的话)、销毁赋值和默认值以及基于表单因子的比率配置映射，其中比率配置键是(早期存在的) some任务的结果。
const getResponsiveAspectRatio = (viewport = null) => {
// guard for a nullish `viewport` parameter.
if (viewport === null) {
return viewport;
}
let ratioConfigKey = '0'; // default config key value.
const {
isLargeDesktopAndUp = false,
isDesktopAndUp = false,
isTabletAndUp = false,
isWrapperWidthAndUp = false,
} = viewport;
[!!isLargeDesktopAndUp, !!isDesktopAndUp, !!isTabletAndUp, !!isWrapperWidthAndUp]
// take advantage of an early exiting `some`.
.some((isFormFactor, idx) => {
if (isFormFactor) {
ratioConfigKey = String(idx + 1);
}
return isFormFactor;
});
return ({
'0': { s: "1-1", m: "1-1", l: "1-1" }, // fallback and/or default
'1': { s: "1-1", m: "1-1", l: "1-1" }, // isLargeDesktopAndUp
'2': { s: "3-4", m: "3-4", l: "3-4" }, // isDesktopAndUp
'3': { s: "3-4", m: "3-4", l: "3-4" }, // isTabletAndUp
'4': { s: "4-3", m: "4-3", l: "4-3" }, // isWrapperWidthAndUp
})[ratioConfigKey];
}
console.log(
'getResponsiveAspectRatio() ...',
getResponsiveAspectRatio()
);
console.log(
'getResponsiveAspectRatio({}) ...',
getResponsiveAspectRatio({})
);
console.log(
'getResponsiveAspectRatio({ isWrapperWidthAndUp: true }) ...',
getResponsiveAspectRatio({ isWrapperWidthAndUp: true })
);
console.log(
'getResponsiveAspectRatio({ isDesktopAndUp: true }) ...',
getResponsiveAspectRatio({ isDesktopAndUp: true })
);
console.log(
'getResponsiveAspectRatio({ isLargeDesktopAndUp: true }) ...',
getResponsiveAspectRatio({ isLargeDesktopAndUp: true })
);.as-console-wrapper { min-height: 100%!important; top: 0; }
Stack Overflow用户
发布于 2022-10-27 08:22:43
开关语句将是这类条件语句的更好的替代方法。
请参考此链接https://www.javascripttutorial.net/javascript-switch-case/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74218797
复制相关文章
相似问题
腾讯云开发者
