如何在Svelte自定义writable store中检测订阅数为0以清理外部资源？

现有实现合法性确认 #

你当前手动封装subscribe统计订阅数的实现完全合法合规，不属于非规范的hack实现。Svelte对自定义store的唯一要求是实现符合契约的subscribe方法：接收订阅回调、返回取消订阅函数，你的实现完全符合这个要求，已经在很多生产级Svelte项目中被广泛使用。

Svelte原生标准实现方案 #

Svelte的writable原生就提供了更简洁的标准API来实现这个需求，不需要自己手动统计订阅数：writable的第二个参数是start回调函数，它的触发规则刚好匹配你的需求：

• 当store的订阅数从0变为1时，start函数会被调用，适合用来初始化WebSocket、定时器等重量级资源
• start函数返回的清理函数，会在订阅数从1变为0时自动调用，刚好用来释放资源

标准实现示例代码 #

import { writable } from 'svelte/store';

export function MakeStore(initialValue = null) {
  const { subscribe, set, update } = writable(initialValue, (setStore) => {
    // 订阅数从0到1时执行，初始化资源
    console.log('初始化WebSocket等外部资源');
    // 示例：启动ws连接
    // const ws = new WebSocket('wss://xxx');
    // ws.onmessage = (e) => setStore(JSON.parse(e.data));

    // 返回的清理函数会在订阅数归0时执行
    return () => {
      console.log('清理外部资源');
      // ws.close();
    };
  });

  return {
    subscribe,
    set: (newValue) => {
      set(newValue);
      // 你的自定义set逻辑
    },
    update
  };
}

方案选型建议 #

• 如果只是需要处理资源初始化和清理的场景，优先用原生start回调方案，代码更简洁，不需要自己维护订阅计数
• 如果有更复杂的订阅生命周期自定义需求，继续使用你原有的手动计数方案即可，没有任何合规性问题

内容的提问来源于stack exchange，提问作者Hasindu Lanka