最近对项目所有的 HTTP 请求响应进行了 AES 加解密改造，但在 JavaScript 中保管 AES Key 有着非常大的安全风险，将加解密逻辑交由难以反编译的 WebAssembly 实现，则是一种比较安全的选择。

1
2
3
4
5
6
7
8
9
10

<van-popup v-model:show="visiblePopup">
  <Comp v-if="visiblePopup" :some-props="someProps" />
</van-popup>

<script lang="ts" setup>
import {ref, reactive} from 'vue'

const visiblePopup = ref(false)
const someProps = reactive()
</script>

像上面这样的模板式弹框代码，在项目中是最常见不过的，以 Component 方式调用弹框，如果代码组织不好，会使得 template 变得异常凌乱，更重要的是其中充斥着诸如 visiblePopup、someProps 等这样的中间变量，显得尤为不优雅。而像下面这样以函数方式调用则简洁得多。

1
2
3

const handleOpenComp = () => {
  showPopup(comp, someProps)
}

接口和类型的定义是一件耗时费力的工作，通过解析 OpenAPI/Swagger 文档，自动化生成接口是一种很好的解决方案，这也便于接口更新时做 git diff，清晰的显示接口更新的内容。

1
2
3
4
5
6
7
8
9
10
11

export interface AppResetPasswordReq {
  email: string
  password: string
  code: string
}

export function resetPassword(params: AppResetPasswordReq): Promise<Result<boolean>> {
  return axios.post('/app/reset/password', params)
}

// more...

1000 多个用户同时在线，用户打开多个 Tab 页，每个 Tab 页都会创建一个 WS 连接，最终创建了 140000 多个 WS 连接，导致服务端奔溃。通过使用 SharedWorker 转发 WS 消息，让所有页面共用一个 WS 连接来解决问题。

泛型编程

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性，主要作用是对不特定数据类型的支持，以实现函数、接口（Interface）、类的复用。

在多角色的系统中（比如管理端）一般会给不同角色的用户分配不同的权限。权限一般有以下分类：

1
2
3
4

* 页面权限
* 操作权限
* 数据权限
* API 权限

页面一般通过路由分发，所以页面权限也叫做路由权限。在这些权限中，API 权限是后端权限，其他都是前端权限，下面从前端角度介绍用户角色权限的设计。

使用二进制能很方便的表达和计算（组合、切换和校验）权限，以 Linux 文件权限为例。

抗锯齿

折线问题

通过 lineTo 实现自由画笔，本质是点与点连接的线段，无论点如何密集，都无法避免线段间的折线，快速移动下爆点率更低，线段更长，折线还会更明显。

1
2

ctx.moveTo(beginPoint.x, beginPoint.y)
ctx.lineTo(endPoint.x, endPoint.y)

函数参数的求值策略 Evaluation Strategy 指的是函数调用时，实参（表达式）的求值和传值方式，主要有两种求值策略，按值传递和按引用传递。