【ES2026】前端必学（中）：资源与性能的现代解决方案

1
// 同步资源：文件句柄
2
class FileHandle {
3
  constructor(private fd: number) {}
4

5
  write(data: string) {
6
    /* ... */
7
  }
8

9
  // 实现Symbol.dispose，同步释放资源
10
  [Symbol.dispose]() {
11
    fs.closeSync(this.fd)
12
    console.log('文件句柄已释放')
13
  }
14
}
15

16
// 异步资源：数据库连接
17
class DBConnection {
18
  constructor(private conn: Connection) {}
19

20
  query(sql: string) {
21
    /* ... */
22
  }
23

24
  // 实现Symbol.asyncDispose，异步释放资源
25
  async [Symbol.asyncDispose]() {
26
    await this.conn.release()
27
    console.log('数据库连接已释放')
28
  }
29
}

1
async function processData() {
2
  // 异步资源用await using（因为DBConnection是异步释放）
3
  await using conn = await pool.getConnection();
4
  // 同步资源用using
5
  using fileHandle = await fs.open('data.log', 'a');
6
  await using cacheConn = await redis.connect();
7

8
  // 业务逻辑：无需嵌套try-finally
9
  const data = await conn.query('SELECT * FROM data');
10
  await fileHandle.write(JSON.stringify(data));
11
  await cacheConn.set('data', JSON.stringify(data));
12

13
  // 离开作用域时，自动按LIFO顺序释放：cacheConn → fileHandle → conn
14
}

1
// 旧代码：容易忘释放连接
2
async function getOrder(orderId: string) {
3
  const conn = await pool.getConnection();
4
  const order = await conn.query('SELECT * FROM orders WHERE id = ?', [orderId]);
5
  return order; // 忘记释放连接
6
}
7

8
// 新代码：using自动释放
9
async function getOrder(orderId: string) {
10
  await using conn = await pool.getConnection();
11
  const order = await conn.query('SELECT * FROM orders WHERE id = ?', [orderId]);
12
  return order; // 自动释放连接
13
}

1
// import defer生成代理对象echarts
2
import defer * as echarts from 'echarts';
3

4
function renderChart() {
5
  // 第一次访问echarts.init，触发模块加载
6
  const chart = echarts.init(document.getElementById('chart'));
7
  chart.setOption({ /* 配置 */ });
8
}

1
<template>
2
  <el-tabs
3
    v-model="activeTab"
4
    @tab-click="handleTabClick"
5
  >
6
    <el-tab-pane
7
      label="首页"
8
      name="home"
9
      >Home</el-tab-pane
10
    >
11
    <el-tab-pane
12
      label="统计"
13
      name="chart"
14
    >
15
      <div
16
        id="chart"
17
        v-if="showChart"
18
      ></div>
19
    </el-tab-pane>
20
    <el-tab-pane
21
      label="设置"
22
      name="setting"
23
      >Setting</el-tab-pane
24
    >
25
  </el-tabs>
26
</template>
27

28
<script setup lang="ts">
29
import { ref } from 'vue';
30
// import defer懒加载ECharts
31
import defer * as echarts from 'echarts';
32

33
const activeTab = ref('home');
34
const showChart = ref(false);
35

36
async function handleTabClick(tab: { name: string }) {
37
  if (tab.name === 'chart') {
38
    showChart.value = true;
39
    // 第一次访问echarts.init，触发加载
40
    const chart = echarts.init(document.getElementById('chart')!);
41
    chart.setOption({
42
      title: { text: '用户增长趋势' },
43
      xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
44
      yAxis: { type: 'value' },
45
      series: [{ type: 'line', data: [120, 200, 150, 80, 70] }],
46
    });
47
  }
48
}
49
</script>

1
const fileInput = document.getElementById('file-input') as HTMLInputElement
2
const previewImg = document.getElementById('preview-img') as HTMLImageElement
3

4
fileInput.addEventListener('change', async (e) => {
5
  const file = (e.target as HTMLInputElement).files?.[0]
6
  if (!file) return
7

8
  // 读取文件为Uint8Array
9
  const buffer = await file.arrayBuffer()
10
  const uint8 = new Uint8Array(buffer)
11

12
  // 编码为Base64字符串
13
  const base64 = uint8.toBase64()
14
  previewImg.src = `data:image/png;base64,${base64}`
15
})

1
// 客户端：发送图片
2
const sendImage = async (file: File) => {
3
  const buffer = await file.arrayBuffer()
4
  const uint8 = new Uint8Array(buffer)
5
  const base64 = uint8.toBase64()
6

7
  ws.send(
8
    JSON.stringify({
9
      type: 'image',
10
      data: base64,
11
    })
12
  )
13
}
14

15
// 服务端：接收图片
16
ws.on('message', (message) => {
17
  const data = JSON.parse(message)
18
  if (data.type === 'image') {
19
    const uint8 = Uint8Array.fromBase64(data.data)
20
    // 保存图片到服务器
21
    fs.writeFileSync('upload.png', uint8)
22
  }
23
})

1
// 生成32字节的随机Token
2
const randomBytes = crypto.getRandomValues(new Uint8Array(32))
3
// 编码为Base64字符串
4
const token = randomBytes.toBase64()
5
// 存储到LocalStorage
6
localStorage.setItem('authToken', token)
7

8
// 读取Token并验证
9
const storedToken = localStorage.getItem('authToken')
10
if (storedToken) {
11
  const uint8 = Uint8Array.fromBase64(storedToken)
12
  // 验证Token长度（32字节）
13
  if (uint8.length === 32) {
14
    console.log('Token有效')
15
  }
16
}