我的博客
返回首页

开发技巧

分类:4-全栈/01-elysia
发布于:
阅读时间:14 分钟

在前端开发中，除了处理好 RPC 错误和类型安全，还有很多能显著提升代码质量、性能和可维护性的进阶技巧。

以下从四个维度为你梳理的实战方案：

1. 架构与逻辑解耦：逻辑抽离（Headless 思想）

不要把所有的 API 调用和数据处理都写在 

.vue
或 
.tsx
文件里。

  • 技巧：使用 Custom Hooks (React) 或 Composables (Vue)。

  • 好处：组件只负责“怎么画”，逻辑函数负责“怎么做”。

  • 示例：

    TypeScript

    // useHeroCards.ts (Composable)
export function useHeroCards() {
  const cards = ref([]);
  const loading = ref(false);

  const fetchCards = async () => {
    loading.value = true;
    try {
      cards.value = await handleEden(rpc.api.get());
    } finally {
      loading.value = false;
    }
  };

  return { cards, loading, fetchCards };
}

2. TypeScript 进阶：利用 
satisfies
关键字

在 TS 4.9+ 中，

satisfies
是神技。它既能校验类型，又能保留对象最原始、最精确的字面量类型。

  • 场景：定义配置对象或主题。

    TypeScript

    const config = {
  endpoint: "https://api.com",
  retries: 3
} satisfies Record<string, string | number>;

// 此时 config.retries 依然被精确推导为 number，而不是 string | number

3. 性能优化：防抖与节流的“原生化”

现在的开发中，不要到处引入 Lodash。

  • 技巧：利用 

    AbortController
    优雅地取消请求。

  • 场景：用户连续点击搜索，或者在输入时快速触发请求。

    JavaScript

    let controller = new AbortController();

const fetchData = async () => {
  controller.abort(); // 取消上一次未完成的请求
  controller = new AbortController();

  const res = await fetch(url, { signal: controller.signal });
};

4. UI 交互体验：骨架屏与占位符

不要直接从“白屏”跳到“内容”，这会给用户带来视觉抖动（Layout Shift）。

  • 技巧：使用 Skeleton Screen 或 CSS 

    aspect-ratio
    预留空间。

  • 工具：如果你用 Tailwind，可以简单地用 

    animate-pulse
    类快速实现骨架效果。

5. 调试神技：
console.table
与 
monitorEvents

  • console.table(list)
    ：当你在 
    handleEden
    拿到一个数组数据时，用 table 打印比直接 log 嵌套对象要清晰百倍。

  • monitorEvents(document.body, 'click')
    ：在 Chrome 控制台直接输入，可以监控页面上所有的点击事件，找 Bug 极快。

6. 状态管理：从全局转向 URL

  • 技巧：URL is the single source of truth.

  • 场景：分页、筛选、搜索关键字。

  • 做法：不要把这些存在 

    ref
    或 
    state
    里，而是存在 URL 的 Query Parameter 中。这样用户刷新页面或分享链接时，页面状态能完美复原。

7. 安全防御：防御式编程

针对你之前关心的 

error.message
：

  • 技巧：永远假设接口返回的数据结构会变。

  • 可选链 (

    ?.
    ) 和 空值合并 (
    ??
    )     是你的好伙伴，但不要滥用。在关键节点（如 
    handleEden
    ）做断言，比在 UI 层到处写 
    if (data?.xxx)
    要高效得多。

总结建议

你已经开始封装 

handleEden
这种工具函数，这说明你正在从“写代码”向“写架构”转型。接下来的重点可以放在：

  1. 标准化：统一所有请求的 Loading、Error 处理。

  2. 自动化：根据后端 API 自动生成 TypeScript 定义。

你想深入了解哪一部分？比如如何利用 

AbortController
结合你的 RPC 做自动请求取消？

一句话总结： 如果你希望 TS 帮你检查类型，但又不希望它把你的变量类型变模糊，那就用 

satisfies
。