R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。

你好,Medum!

可能你已经发现,这个博客已经支持了英文的界面,部分文章也提供了英文版本,这是因为我希望自己的一些实践经验和思考能被更多的人看到。为了进一步扩大文章的受众范围,我决定将(自认为高质量的)技术文章镜像到 Medium 平台,旧文章也会慢慢同步过去。这个博客依旧会作为我发布内容的主力,包括一些与技术无关的文章,以及一些新的网站模块(或许以后会有画廊?)。所以敬请期待吧!...

发版辅助工具:因为规范,所以有效

业务扩张导致的问题随着公司前几年的扩张,部门内的团队越来越多、业务越来越复杂。为了应对这种情况,前端团队使用了微前端,后端团队则使用了微服务。单个仓库的维护成本确实变低了,但这又带来了另外几个问题:业务模块归属的团队可能会变化,例如“订单追踪服务”之前属于团队 A,但有一天拆到了团队 B;很难整理出网状的模块调用关系,一个业务需求可能会改动到多个仓库的代码,例如我们对接一个新的物流渠道,从最底层的数据模型服务,到最上层对外封装的服务,可能都要有变化;前后端模块无法一一映射,因为前后端的拆分粒度不...

【多图预警】日本のシティウォーク(CITY WALK)!

说来惭愧,我的第一本护照在十年间完全没有用上,然后就要过期了……只能让第二本护照来解决了。五年前,我有考虑过出国玩一玩,但后来随着拖延症和疫情就完全没有开始做计划;直到今年十一,看到一个朋友去日本来了一场说走就走的旅行,加上刚好另一个朋友在日本工作,我的热情又燃起来了——于是也来了一场说走就走的旅行。护照和签证今年初疫情“结束”后,我立即抓紧时间申请了护照换发,新的护照就能用到 2033 年了。全程没有任何障碍,毕竟疫情已经“结束”了。经过对日本签证的简单调研,我发现自己居然能满足五年签证的要求...

另一种形式的“微前端”——弹窗内嵌子应用

有些时候,架构设计不需要大张旗鼓,一些简单的技术组合也能解决问题。为了用户体验去年 Q1 我所负责的项目有一个需求,当用户点击编辑页面内的某些按钮时,会弹出一个弹窗,用于配置其它域的内容。这里以最经典的用户配置流程举例(只是举例,实际需求不是用户管理,域的内容远比这个复杂,而且域之间的关联也不止这么简单):系统中有用户、角色、权限码三个域,分别有各自的管理页面;三个域之间有关联:一个用户可能拥有多个角色、一个角色可能拥有多个权限码;前者可以在用户管理页面中配置,后者可以在角色管理页面中配置。那么...

一次 PNA 问题的定位经验(Chrome NetLog Viewer 入门)

作为一个电商平台,用户下单时,我们提供了一个页面让其选择自提点。一天下午,同事突然发现这个页面会多请求一遍接口,具体现象是:先是一个 Pre-flight/OPTIONS 请求(因为接口跨域),但是这个接口失败了,从 F12 的 network 界面只能看到 net::ERR_FAILED,看不到具体的错误信息,从 console 界面也没有任何报错。然后是一个正常的 Pre-flight/OPTIONS 请求,这个请求成功了。然后是一个正常的 GET 请求,这个请求成功了。每个接口都会这样,因...

为 PNPM peer 添加 NPM alias 支持(PNPM 与 VSCode 动态调试入门)

在之前做组件库的多版本共存时,我遇到了这样一个问题:PNPM 如何安装多个版本的包?似乎唯一的解决方法是使用 alias(下文的 components 是示例包名,不是 NPM 上面实际的包):pnpm i components@3 pnpm i components-next@npm:components@4import xxxV3 from 'components'; import xxxV4 from 'components-next';但其实我的项...

追根究底:不打开 DevTools 时,console.log 会不会内存泄漏?

TL;DR:会。并且虽然 Chromium 有试图做限制,但因为方法不合适所以并没能解决问题。JavaScript 的内存泄漏原因有很多,例如 DOM、计时器、闭包、意外的全局变量,以及本文的主题:console.log。关于 console.log 会不会造成内存泄漏,掘金上面有大佬发过两篇文章:千万别让 console.log 上生产!用 Performance 和 Memory 告诉你为什么console.log 一定会导致内存泄漏?不打开 devtools 就不会这两篇文章的结论是:在打...

多版本共存——巨型项目组件库升级的必经之路

Update 2023-07-19目前已经有更简单的方式:PNPM 已经支持带有 alias 的 peer dependencies 查找,不需要用 hooks 了;通过实现跟 Ant Design 类似的 prefixCls 和 modifyVars 功能,也可以控制组件库选择器的前缀以避免样式冲突。组件库升级是一个令开发者头痛的事情,即使像 Ant Design 这种经历了多年发展的组件库,升级也不是一件容易的事情——轻则 API 不兼容,重则影响自定义样式和用户体验。(为什么 API 不兼...

由 Use Zoom For DSF 导致的幽灵 Bug

在写项目时,我们都会产生一些 Bug。俗话说“解决 Bug 的第一步是先复现它”,但如果遇到了一个幽灵 Bug(无法稳定复现的 Bug)时,要如何解决呢?Bug 的现象我们有一个对外项目,其中一个页面里面展示了各类统计图表。当我们还在庆祝项目按时开发完成时,QA 小姐姐找了过来,说页面上有一个表格的行间分隔线消失了:但是我们经过多次调试后,发现攒了很久的一句话终于派上用场了:在我这儿是好的啊……见鬼了。没错,这是个幽灵 Bug,因为我发现:在同事的电脑上,只要刷新次数足够多,一定会有一两次可以复...

JSON Diff Kit:几个简单算法的组合

背景最近我收到一个需求:展示两个 JSON 字符串的 diff,这两个字符串基本上是一个 API 的请求和响应数据。此外,我们还应该以 Git 的风格显示 diff。然而,经过简单的搜索,我并没有发现合适的库。那我只好自己实现了。Git 的方式JSON 字符串可能非常不规范。例如这两个 JSON 字符串是等价的:{"a":1,"b":2} { "a" :1, "b": 2}幸好我们有一个强大的内置函数 J...

Golang 内存泄漏排查之旅

“业务提了个线上问题,麻烦你看一下。”自从我开始写 Golang 后端之后,可能是能力有限,我的服务总是会在意想不到的情况下变得异常,而我要做的事情就是解决这个问题。这次出现的问题看起来是运营平台后端服务的内存泄漏,那就先从内存曲线开始看起吧。突然暴增的曲线Grafana 平台给出的曲线大概符合这样的特征:有 8 个突变点,每次突变都会让内存猛然上升接近 500 MB,上涨到逼近容器上限后,突然回落到 100 MB(因为容器崩溃重启了)。静态检查尝试失败结合突变的时间,我搜了一下审计日志,发现业...

TypeScript 小技巧:校验 i18n 参数

最近我们的某个项目需要支持多语言了。作为一个从 Entry Task 开始就与多语言打过交道的人,我已经对这里面的套路很是熟悉。但是作为一个工程师,还是想着能不能做的更好一些。我们是怎么做国际化的对于大部分场景来说,国际化都相当简单:有若干语言包,每个语言包中是一堆 Key 和对应的文字模板,模板中可能会有占位符。一个语言包可能长这样:{ "user_setting.list.total_users": "共 {count} 个用户。", ...

这是我们共同度过的

第 3040 天