![[灵光一现]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)
xekin
前端组饮水机管理员
|
求收留
解决了世界上所有的前端问题，正在解决世界上所有的后端问题...
获得徽章 0
赞了这篇文章
posthog.com![[抓狂]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_18.b93331d.png)
另外我司招中高级前端，base 深圳宝安前海 最近和后端同学交流米奇妙妙代码，发现了一种很邪魅（我个人觉得）的策略模式代码，来给大伙评评。
策略模式我们都知道简单来说就是将策略罗列为字典，然后将状态作为 key 值传入字典执行对应的函数体，或者用 switch case 的方式去实现策略模式。
但我看到的是这样的代码
async function run(query) {
await planA(query);
await planB(query);
await planC(query);
await planD(query);
await planE(query);
}
async function planA(query) {
if (query.type !== 'A') return
... planA 代码执行体
}
async function planB (query) {
if (query.type !== 'B') return
... planB 代码执行体
}
PlanCDE 如法炮制
对没错，这哥们将本来前置的判断后置放进了函数体里，变成了反向的取反型策略模式，换来的是简洁的函数主体。瞬间让我的大脑拧成麻花，居然，还可以这么写啊。
策略模式我们都知道简单来说就是将策略罗列为字典，然后将状态作为 key 值传入字典执行对应的函数体，或者用 switch case 的方式去实现策略模式。
但我看到的是这样的代码
async function run(query) {
await planA(query);
await planB(query);
await planC(query);
await planD(query);
await planE(query);
}
async function planA(query) {
if (query.type !== 'A') return
... planA 代码执行体
}
async function planB (query) {
if (query.type !== 'B') return
... planB 代码执行体
}
PlanCDE 如法炮制
对没错，这哥们将本来前置的判断后置放进了函数体里，变成了反向的取反型策略模式，换来的是简洁的函数主体。瞬间让我的大脑拧成麻花，居然，还可以这么写啊。
展开
44
点赞
你问 AI 都得不到好答案的问题：
前端 CSS 媒体查询怎么区分是使用电脑浏览器还是手机浏览器？
例如需求为：
移动端设备（手机、ipad 等）导航栏显示为底部 Tabs
电脑端设备导航栏显示为头部 Tabs
.
.
.
.
答案是使用
@media (hover: hover) {}
其本质上是区分输入设备是否为鼠标，这覆盖了绝大多数电脑跟手机的区分场景，上面场景的设置如下：
// 电脑端
@media (hover: hover) {
.nav { position: fixed; top: 0; left:0 width:100vw, height: 10rem }
}
// 移动端
.nav { position: fixed; bottom: 0; left:0 width:100vw, height: 10rem }
前端 CSS 媒体查询怎么区分是使用电脑浏览器还是手机浏览器？
例如需求为：
移动端设备（手机、ipad 等）导航栏显示为底部 Tabs
电脑端设备导航栏显示为头部 Tabs
.
.
.
.
答案是使用
@media (hover: hover) {}
其本质上是区分输入设备是否为鼠标，这覆盖了绝大多数电脑跟手机的区分场景，上面场景的设置如下：
// 电脑端
@media (hover: hover) {
.nav { position: fixed; top: 0; left:0 width:100vw, height: 10rem }
}
// 移动端
.nav { position: fixed; bottom: 0; left:0 width:100vw, height: 10rem }
展开
5
2