随笔分类 - JS/TS
摘要：引言 如果你在过去一年中关注前端和全栈开发领域，可能会注意到一个有趣的现象：传统的 Web 应用正在积极拥抱人工智能。 什么是 AI SDK？ AI SDK 是由 Next.js 开发团队 Vercel 推出的开源 TypeScript 工具库，专为构建 AI 驱动应用而设计。它支持 Next.js
阅读全文
摘要：根据 ChatGPT 的描述， 后端项目中出现频率最高的前 6 名设计模式是： 排名 模式 典型应用 🥇 1 单例模式 数据库连接、缓存客户端、全局配置 🥈 2 工厂模式 动态加载不同实现（如多租户、支付、存储） 🥉 3 代理模式 / AOP 事务、日志、鉴权、缓存 4 策略模式 不同业务策略
阅读全文
摘要：引言 模板方法模式（Template Method Pattern）是一种行为型设计模式。它定义算法骨架，将具体步骤延迟到子类实现。适用于固定流程但部分步骤可变的情景，如游戏初始化或数据处理。 定义 抽象类：定义模板方法（final方法）和抽象步骤。 具体子类：实现抽象步骤。 优点：代码复用，易扩展
阅读全文
摘要：为什么需要专门的环境变量解决方案？ 在 Next.js 应用开发中，环境变量管理一直是个棘手问题。传统的 .env 文件方式存在诸多痛点： 类型安全问题：环境变量没有类型检查，容易在运行时出错 验证缺失：无法确保必需的环境变量都已正确配置 客户端/服务端混淆：可能意外将敏感变量暴露到客户端 团队协作
阅读全文
摘要：什么是代理模式？ 代理模式是一种结构型设计模式，它允许你提供一个替代物或占位符来控制对另一个对象的访问。代理对象充当原始对象的接口，客户端通过代理来间接访问原始对象，从而可以在不改变原始对象代码的情况下添加额外的功能。 代理模式特别有用，因为我们可以利用接口和类型系统来确保代理和真实对象具有相同的接
阅读全文
摘要：在软件开发中，对象创建是最基础也是最关键的操作之一。随着项目规模的增长，直接使用 new 关键字创建对象会导致代码高度耦合，难以维护和扩展。工厂方法模式正是为了解决这一问题而生的经典设计模式。 什么是工厂方法模式？ 工厂方法模式是一种创建型设计模式，它定义了一个创建对象的接口，但让子类决定实例化哪个
阅读全文
摘要：策略模式（Strategy Pattern）是一种行为设计模式，它允许你定义一系列算法，并将每个算法封装起来，使它们可以相互替换。下面介绍策略模式在 TypeScript 中的实现。 策略模式基本概念 策略模式包含三个主要部分： Context（上下文）：维护一个策略对象的引用 Strategy（策
阅读全文
摘要：什么是单例模式？ 单例模式是一种创建型设计模式，它确保一个类只有一个实例，并提供一个全局访问点来获取这个实例。在 TypeScript 中，单例模式特别有用，因为它结合了 JavaScript 的灵活性和 TypeScript 的类型安全。 为什么需要单例模式？ 想象一下这些场景： 数据库连接池管理
阅读全文
摘要：在 2025 年的前端开发中，代码一致性和效率已成为核心痛点。传统工具链如 ESLint + Prettier 虽强大，却饱受配置复杂、性能瓶颈和 CI/CD 集成难题之苦。Ultracite，作为 Biome 的高度意见化预设，应运而生。它不仅零配置部署，还深度优化 AI 协作场景，帮助开发者与模
阅读全文
摘要：看，我换上了新皮肤！🎨 目前它还处于早期快速迭代阶段，我非常期待听到你的想法。欢迎在评论区畅所欲言，你的每一个建议都至关重要！ 源码链接：/themes/shadcn
阅读全文
摘要：import { render } from 'preact' const frag = document.createDocumentFragment() render(<CustomComponent />, frag) const container = document.querySelec
阅读全文
摘要：问题 使用 Delete unused imports 操作时，同时删掉了 import React from 'react';。 为什么不能删掉呢？因为代码 push 到远程仓库后会走 CI 流程， CI 流程里有代码检查节点进行 ESLint 检查 CI 节点的 ESLint 规则开发者无法修改
阅读全文
摘要：解决办法 tsconfig.json { "compilerOptions": { "typeRoots": ["./node_modules/@types/", "./custom/path/to/declarations/"] }, } 示例 例如，在根目录下新建 types 目录 types/
阅读全文
摘要：不要使用 for in，参考这里 for (const [key, val] of Object.entries(obj)) { console.log(key, val) }
阅读全文
摘要：立即调用的函数表达式（Immediately Invoked Function Expression）简称 IIFE，是一个JavaScript函数，一旦JavaScript运行时对其求值，它就会立即被调用。下面是一段大致相等的代码： // IIFE (function (message) { co
阅读全文
摘要：filename/ dirname require resolve 替代方案：import.meta.url process. env 替代方案：import.meta.env
阅读全文
摘要：function fileSelected(e: Event) { const target = e.target as HTMLInputElement const file: File = (target.files as FileList)[0] // ... }
阅读全文
摘要：语法 _.template([string=''], [options={}]) 创建一个已编译的模板函数，该函数可以在 interpolate 分隔符中插入数据属性，在 escape 分隔符中插入 HTML escape interpolated 数据属性，并在 evaluate 分隔符中执行 J
阅读全文
摘要：前置 rough-notation 用于在网页上创建注释并设置注释动画的小型 JavaScript 库。它还可以应用在一些常见前端框架中，比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它应用在我创建的博客园皮肤中，比如你可以看见头部导航条中的博客昵称
阅读全文
摘要：泛型 基本 function add<t>(arg1: T, arg2: T): T { return arg1 + arg2 } // add<number>(1,'0') X 泛型接口 function add<T>(arg1:T,arg2:T):T { return arg1 + arg2 }
阅读全文
浙公网安备 33010602011771号