使用Dexie操作IndexedDB的Svelte代码有哪些更优写法？如何隐藏相关代码？

1. IndexedDB数据读取逻辑优化 #

你的现有代码存在几个可优化点：

• 异步时序问题：db.todo.add是异步操作，现有代码未等待写入完成就直接触发查询，有概率出现新增后列表没有同步最新数据的问题
• 逻辑重复：查询更新待办列表的逻辑在初始化和新增场景写了两次，可抽离复用
• 列表渲染无唯一标识：{#each}循环没有绑定唯一key，会影响Svelte的列表更新性能
• 不规范的响应式声明：$:todos = []的写法会在每次响应式依赖更新时把todos重置为空数组，属于不规范写法

基础优化版代码 #

functions.js 无需修改

export const db = new Dexie("todos");

db.version(1).stores({
  todo: "++id,note",
});

App.svelte 优化后代码

<script>
  import { onMount } from "svelte";
  import { db } from "./functions";

  let newnote = "";
  let todos = [];

  // 抽离公共的列表刷新逻辑
  const refreshTodos = async () => {
    todos = await db.todo.toArray();
  };

  // 新增逻辑增加异步等待，避免时序问题
  const addnote = async (e) => {
    await db.todo.add({ note: newnote });
    newnote = ""; // 新增完成后清空输入框
    await refreshTodos();
  };

  onMount(() => {
    refreshTodos();
  });
</script>

<main>
  <h1 id="title">ToDo</h1>
  <input type="text" id="newnote" bind:value={newnote} />
  <input type="button" value="Add" on:click={addnote} />

  <br>
  <!-- 绑定todo.id作为唯一key，优化列表渲染性能 -->
  {#each todos as todo (todo.id)}
    {todo.note} <br>
  {/each}
</main>

进阶自动响应版 #

可以利用Dexie的liveQuery能力，实现数据变更自动同步到视图，无需手动调用刷新方法：
首先修改functions.js，新增响应式store导出：

import { liveQuery } from 'dexie';
export const db = new Dexie("todos");

db.version(1).stores({
  todo: "++id,note",
});

// 导出响应式的待办列表store
export const todosStore = liveQuery(() => db.todo.toArray());

然后App.svelte可以简化为：

<script>
  import { db, todosStore } from "./functions";
  let newnote = "";

  const addnote = async () => {
    await db.todo.add({ note: newnote });
    newnote = "";
  };
</script>

<main>
  <h1 id="title">ToDo</h1>
  <input type="text" id="newnote" bind:value={newnote} />
  <input type="button" value="Add" on:click={addnote} />

  <br>
  <!-- 直接用$订阅store，数据变更自动更新视图 -->
  {#each $todosStore as todo (todo.id)}
    {todo.note} <br>
  {/each}
</main>

2. 业务代码隐藏处理 #

你当前的这类业务代码不需要做特殊隐藏处理：

• 所有前端代码最终都会下发到用户本地运行，不存在完全隐藏的方案，强行加密混淆的投入产出比极低
• 你的逻辑仅操作本地IndexedDB，不涉及服务端敏感密钥、核心业务规则，没有泄露风险

如果确实有降低代码可读性的需求，可做以下处理：

• 生产构建时开启代码混淆：Svelte项目常用的Vite、Rollup等构建工具，生产环境构建时默认会开启代码压缩、变量名混淆，可大幅降低代码可读性
• 所有敏感信息（如服务端接口密钥、加密盐等）禁止写在前端代码中，这类信息必须放在服务端存储

内容的提问来源于stack exchange，提问作者Pål Bergström