10-11月杂记

我的 10 月猪生活

国庆

待在家里 11 天。

生活是这样的：

1h网络聊天，
8h睡觉，
2h游戏，
3h动漫，
3h看书，
2h网上冲浪，
3h听妈妈叨叨。 (蝉在叫，人坏掉)
2h吃喝拉撒。

如果妈妈不叨叨，那真是太好了。

coding

在项目里开始所有代码都用 TypeScript 来编写，这得益于 9.15-10.7 这段时间每天花一点时间去学习，阅读文档，并感谢 github。

从一开始的很慌，万一又哪里卡壳了，怎么办。到现在的镇定自若，哦，这个错啊，这样改就行了。

在无聊的业务搬砖中，算是找到了可以提起点兴致的事情。

写着写着发现，ts 的代码提示确实比 js 强，用上后我觉得生活更美好了。

最近遇到了几个值得记录的问题

antd-mobile 的 `PullToRefresh` 组件上拉刷新问题

在 Android 的 webview 中，scrollTop 数值是小数，ios 和浏览器中都是整数。这导致 antd 内的 === 代码未执行。所以无法拉动刷新。

issue 中有类似的 bug 报告，但过去了数月，依旧没有人跟进。我今天也是第一次感觉到生态的重要性

关于 ts 中 window 对象上挂在属性的问题

我使用的脚手架 create-react-app，中默认设置了 react-app-env.d.ts 可以在其中 declare module。

但其并没有在 tsconfig.json 的 include 选项中输入路径，需要自己将路径写进去，才可以成功 declare，这很奇怪。。

jsBridge 互相调用

ios 的 webview，如果在页面渲染完毕立即读取 app 注入的方法，有一定几率获取值为 undefined。这时候可以用一个延时器，200ms 后再去读取

js 调用 app 方法，app 可以直接 return 值，js 可以拿到。

如果调用 app 方法后，需要和 app 进行一段复杂交互，可以约定好，告诉 app 在完成后调用指定 js 方法。比如 jsTaskStack。每次 js 调用 app 方法的时候，可以重新挂载一个接下来可能会执行的方法，覆盖原 window.jsTaskStack。

关于主观能动性

我真是太懒了，只要 github 能找到代码，我绝对不自己写。

比如最近用到的，lazy-load, backTop 之类的小组件。

移动端滚动穿透问题

当模态框出现的时候，一般会有一层 mask。

然后模态框的内容可以滚动，当滚动到最底部时，就会滚动页面的 body

假如我们在模态框出现的时候，给 body 一个 overflow hidden。那模态框就也滚动不了。

在网上看过很多资料，针对不同情况有不同的处理方式。但并没有完美的方法。

比如 safari 下面，document.body 和 document.documentElement 设置 overflow 会有不同的效果

安卓的一些浏览器和 webview。ios 的浏览器和 webview, 在兼容的过程中遇到了很多障碍，总有那么一个会出现问题

一番尝试后，选择了放弃完美。保证所有浏览器的基本功能，即滚动到底部时不会穿透。至于一些细小的问题，选择性的忽略了。

我知道怎么做可以完全兼容，但我没有去做。

完美兼容方法 1：

不使用浏览器的滚动条，全部用 isroll 这类模拟滚动

完美兼容方法 2：

document.body 和 document.documentElement 同时设置 overflow hidden，但在有些浏览器下会出现，页面回到顶部的 bug、我手中没有太多的测试机。所以，这只是一个假设的完美方法

关于 icon 的思考

跟设计团队合作的过程中，往往会遇到，某个图标切的图宽高是 ab，某个图标是 cd。某个图标切得图不居中等细节问题。

这对我们还原页面有很大的影响，应该像 iconfont 那样，每个图标不管内容多大，都给一个透明的背景，切出宽高一样的图。这样方便前端实现页面

antd-mobile 感觉无人维护

tabs 组件官方文档写的案例全都没有用，看了实现发现，不能传 key 属性，传了就无法渲染 children 的内容

好几个月了都没人去 merge pr

三刷天气之子

这一次莫名的流了很多泪、最近的生活有些充满魔幻色彩。导致心中的情感，决堤。

感情方面有了进一步进展，技术方面…没什么长进

学习新知识

最近在学习 nestjs，想整一个 BFF 出来，后端们都微服务化，不愿意出专门服务于消费者的接口。

demo 已经跑出来了，再研究研究日志怎么接入后端的 elk，研究一下监控方面的东西，应该就可以用公司业务跑跑看了。

国庆