Simon Logo
WritingMonthlyProjects
Simon Logo

Thanks for reading!

GitHubGitHubXTwitterZhihu知乎WeChat微信公众号RSSRSS
CC BY-NC-SA 4.0© 2019-2026 Simon Wong.
隐私策略服务条款

On This Page

On This Page

#08 前端月刊

Mar 31, 2024JavaScriptReactNodePromise

书籍

Eloquent JavaScript 4th edition (2024)

JavaScript 编程精解第四版,2024 新鲜出炉。根据最新的 JS 进行了调整润色。

实践

不要给组件外层设置 margin 或 padding

开发列表组件或者使用列表组件时,经常会碰到使用这个组件时会跟别的组件有一些间距,但是一旦再组件内部设置了 margin 或者 padding ,会使得组件适用性大大减弱。

如下,Item 组件自带了 marginBottom,导致这个列表的很难处理好样式。

组件应该只负责自己的内部间距,而不负责外部间距。外部间距由外部的开发控制,比如使用 gap 控制。

思考:那如果这个组件支持 <Inner>{ children / slot }</Inner>,那是不是也不应该强行给 Inner 设置 padding,而是让 children / slot 自己来控制边距。

500 行代码实现一个类型安全的 React 路由

你一定用过 react-router ,你知道它是怎么实现的吗。这是一篇很好的了解 react router 实现文章,通过自己实现一个路由来了解。实现了路由导航、路由匹配、路由参数解析、前进后退、导航阻止等功能。

Playwright 视觉测试指南

playwright 是一个可靠的端到端测试工具,这篇文章是使用了 playwright 的快照功能进行视觉测试,从简单的用例到配置到 CI/CD 整个流程都讲了,比较适合入门。

React Testing Library 最佳实践

React Testing Library 基本上是测试 React 组建的标准工具库了。这篇文章涵盖了使用这个库的常见错误,使用 *ByRole 查询元素、使用 useEvent 模拟用户交互、使用 waitForElementToBeRemoved 做异步测试。

Typescript

子路径导入

自 typescript@4.5 版本起,支持了子路径导入功能(可以了理解为类似 alias 的功能),使用方式如下

ts
// ts file
import { add } from '#utils/calc.js';
json
// package.json 配置
"imports": {
  "#utils/*.js": "./lib/utils/*.js",
  "#sub/*.js": "./lib/sub/path/*.js"
}

需要注意的是 nodejs 也支持子路径导入,但有些不不太一样。

JS 运行时

JS Runtime 兼容性对比

现在 JS 运行时越来越多,去年很火的 Bun,最近刚发布的 Winterjs v1 (比 Bun 还要快),可以看这个运行时兼容表来看是否适合自己使用。

WinterJS vs Bun vs WorkerD vs Node

Node.js 工作线程初学者指南

------
Views
Previous

前端月刊

Next

前端月刊

You Might Also Like

  • 前端月刊Mar 31, 2024
  • 前端月刊Oct 31, 2025
  • 前端月刊Aug 31, 2025