研之有物 - 前端技术博客https://langliu.github.io/zh-CNhttps://langliu.github.io/posts/sqlite-beginner-drizzle/https://langliu.github.io/posts/sqlite-beginner-drizzle/本文介绍 SQLite 的核心特点、常用 SQL 语法、动态类型系统、类型亲和性，以及如何在 TypeScript 项目中结合 Drizzle 使用 SQLite。Wed, 08 Jul 2026 00:00:00 GMTTypeScriptSQLiteSQLDrizzleTypeScripthttps://langliu.github.io/posts/langchain-output-parser/https://langliu.github.io/posts/langchain-output-parser/本文介绍 LangChain 中 OutputParser 的作用、常见类型、与 LCEL 的组合方式，以及什么时候该用解析器、什么时候该用模型原生结构化输出。Wed, 11 Mar 2026 00:00:00 GMT其他AILangChainOutputParserLLMhttps://langliu.github.io/posts/langchain-prompt/https://langliu.github.io/posts/langchain-prompt/本文介绍 LangChain 中 Prompt 的核心概念，以及 PromptTemplate、ChatPromptTemplate、MessagesPlaceholder、FewShotPromptTemplate 和 PipelinePromptTemplate 的基本用法。Mon, 09 Mar 2026 00:00:00 GMT其他AILangChainPromptLLMhttps://langliu.github.io/posts/agentic-ai-andrew-ng/https://langliu.github.io/posts/agentic-ai-andrew-ng/本文参考吴恩达对 Agentic AI 的公开分享，梳理 Agentic 工作流、核心能力、落地路径与实践建议。Tue, 03 Mar 2026 00:00:00 GMT其他AIAgentic AILLMhttps://langliu.github.io/posts/git-worktree-ai-coding-practice/https://langliu.github.io/posts/git-worktree-ai-coding-practice/通过一个真实场景演示如何用 git worktree 同时推进新功能与紧急修复，并结合 AI Coding 提升交付效率。Fri, 13 Feb 2026 00:00:00 GMT其他GitAI Coding工程实践https://langliu.github.io/posts/claude-code-guide/https://langliu.github.io/posts/claude-code-guide/Claude Code 是由 Anthropic 推出的通用的命令行代理（Agent），本文介绍了它的核心功能、安装方法以及高效使用技巧。Fri, 02 Jan 2026 00:00:00 GMT其他AIClaudeToolshttps://langliu.github.io/posts/css-nesting-complete-guide/https://langliu.github.io/posts/css-nesting-complete-guide/深入探讨 CSS 嵌套的发展历程、语法特性、最佳实践和性能考虑，从预处理器到原生 CSS 嵌套的完整指南。Sat, 20 Sep 2025 00:00:00 GMTCSSCSS嵌套SassLess原生CSS最佳实践https://langliu.github.io/posts/modern-css-reset/https://langliu.github.io/posts/modern-css-reset/A (more) Modern CSS ResetSat, 20 Sep 2025 00:00:00 GMTCSSCSShttps://langliu.github.io/posts/css-form-related-pseudo-classes/https://langliu.github.io/posts/css-form-related-pseudo-classes/CSS 表单相关伪类用于选择和样式化 HTML 表单元素的不同状态和行为。这些伪类包括 :disabled、:enabled、:checked、:indeterminate、:valid、:invalid、:in-range、:out-of-range、:required 和 :optional 等。Sun, 07 Sep 2025 00:00:00 GMTCSS选择器伪类https://langliu.github.io/posts/css-selector/https://langliu.github.io/posts/css-selector/CSS 选择器是 CSS 的核心概念之一，它用于选择 HTML 文档中的元素并应用样式。选择器可以是元素选择器、类选择器、ID 选择器、属性选择器、伪类选择器和伪元素选择器等。Sun, 31 Aug 2025 00:00:00 GMTCSS选择器https://langliu.github.io/posts/css-selectors-best-practices/https://langliu.github.io/posts/css-selectors-best-practices/深入探讨 CSS 选择器的最佳实践，包括性能优化、可维护性提升和现代开发方法论，帮助开发者编写更高效的样式代码。Thu, 28 Aug 2025 00:00:00 GMTCSSCSS选择器最佳实践性能优化代码规范https://langliu.github.io/posts/cloudflare-workers-in-china/https://langliu.github.io/posts/cloudflare-workers-in-china/解决cloudflare workers 部署后国内无法访问的问题Sun, 17 Aug 2025 00:00:00 GMT其他CloudflareWorkershttps://langliu.github.io/posts/node-version-manager-fnm/https://langliu.github.io/posts/node-version-manager-fnm/fnm（Fast Node Manager）是一个基于Rust构建的快速、轻量级的Node版本管理工具，支持跨平台使用（Windows/macOS/Linux），相比nvm具有更快的执行速度。Tue, 15 Jul 2025 00:00:00 GMTJavaScripthttps://langliu.github.io/posts/react-state/https://langliu.github.io/posts/react-state/在React应用开发中，随着应用复杂度的提升，状态管理方案经历了从原生API到第三方库的演进过程。本文将深入分析React原生Context机制，对比现代状态管理库Zustand，并最终实现一个简易版Zustand。Sun, 02 Mar 2025 00:00:00 GMTReact状态管理https://langliu.github.io/posts/software-design-principle/https://langliu.github.io/posts/software-design-principle/软件设计原则是程序员编写可维护、可扩展代码的指南针。本文将通过通俗易懂的JavaScript示例，讲解7个最实用的设计原则。Mon, 24 Feb 2025 00:00:00 GMT其他软件工程软件设计原则https://langliu.github.io/posts/watermark/https://langliu.github.io/posts/watermark/Windows 下使用7-Zip批量压缩文件夹Mon, 30 Dec 2024 00:00:00 GMTReacthttps://langliu.github.io/posts/lazy-load/https://langliu.github.io/posts/lazy-load/懒加载是一种优化网页性能的技术，它可以延迟加载非关键资源（如图片），直到用户滚动到相应位置时才进行加载，从而提高页面的初始加载速度和性能。我们将通过 JavaScript 代码来实现这一功能，并对其原理和实现步骤进行深入探讨。Sun, 29 Dec 2024 00:00:00 GMTReacthttps://langliu.github.io/posts/react-children-best-practices/https://langliu.github.io/posts/react-children-best-practices/在 React 中，children 是一个非常重要的概念。它允许我们在组件中传递任意数量的子元素，并且可以在组件中使用这些子元素。在本文中，我们将讨论 React 中 children 的最佳实践。Wed, 18 Dec 2024 00:00:00 GMTReactReacthttps://langliu.github.io/posts/react-i18next/https://langliu.github.io/posts/react-i18next/React i18next 配置Tue, 10 Dec 2024 00:00:00 GMTReacthttps://langliu.github.io/posts/wechat-mini-program-underlying-principle/https://langliu.github.io/posts/wechat-mini-program-underlying-principle/小程序是基于双线程模型的，在这个模型中，小程序的逻辑层与渲染层分开在不同的线程运行，这跟传统的Web 单线程模型有很大的不同Tue, 02 Apr 2024 00:00:00 GMTJavaScripthttps://langliu.github.io/posts/type-vs-interface-in-typescript/https://langliu.github.io/posts/type-vs-interface-in-typescript/在 TypeScript 中定义类型有两种选择：类型和接口。关于 TypeScript 最常见的问题之一是我们应该使用接口还是类型。Fri, 29 Mar 2024 00:00:00 GMTTypeScripthttps://langliu.github.io/posts/xss/https://langliu.github.io/posts/xss/随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。Sat, 23 Mar 2024 00:00:00 GMTJavaScripthttps://langliu.github.io/posts/vite-vs-webpack/https://langliu.github.io/posts/vite-vs-webpack/Vite 和 Webpack 都是现代前端开发中常用的构建工具，它们各自有着不同的特点和适用场景。Tue, 12 Mar 2024 00:00:00 GMTJavaScripthttps://langliu.github.io/posts/debounce-and-throttle/https://langliu.github.io/posts/debounce-and-throttle/防抖和节流介绍和应用Sat, 09 Mar 2024 00:00:00 GMTJavaScripthttps://langliu.github.io/posts/scroll-animation/https://langliu.github.io/posts/scroll-animation/当我们想到滚动驱动的动画时，我们通常指以下两件事之一：- **当用户滚动时**发生的动画，动画的进度显式链接到滚动进度。例如，长文章的进度条。- 当元素进入、退出或穿过可见区域（通常是视口）时在元素上发生的动画，但它可能是另一个可滚动容器的可见部分（这被定义为滚动端口）Tue, 22 Aug 2023 00:00:00 GMTCSSCSShttps://langliu.github.io/posts/http-introduce/https://langliu.github.io/posts/http-introduce/在我们日常的生活与工作中离不开网络的支持，在这个过程中会不停的使用到 HTTP 请求，而作为一个前端开发更是会经常使用到 HTTP 与后端开发进行对接联调，HTTP 使用起来非常简单，如果有人问你 HTTP 相关的知识你也能说出不少内容来，但是我们日常接触到的仅仅是 HTTP 的冰山一角，本文从 HTTP 的历史出发，一步步讲解 HTTP 的演变过程，让你在这个过程中全面的了解 HTTP 为什么这么设计Wed, 21 Jun 2023 00:00:00 GMTJavaScriptJavaScriptHTTPhttps://langliu.github.io/posts/intl-date-format/https://langliu.github.io/posts/intl-date-format/Intl 解决前端日期和时间的格式化Tue, 07 Mar 2023 00:00:00 GMTJavaScripthttps://langliu.github.io/posts/import-map/https://langliu.github.io/posts/import-map/在浏览器中通过 import maps 使用 ES 模块Thu, 22 Dec 2022 00:00:00 GMTHTMLJavaScriptHTMLhttps://langliu.github.io/posts/go-web-assembly/https://langliu.github.io/posts/go-web-assembly/Go WebAssembly 入门Thu, 03 Nov 2022 00:00:00 GMTJavaScriptGolangWebAssemblyhttps://langliu.github.io/posts/astro-begin/https://langliu.github.io/posts/astro-begin/基于 Astro 搭建博客系统Thu, 08 Sep 2022 00:00:00 GMTHTMLJavaScripthttps://langliu.github.io/posts/windows-use-7zip-batch-zip/https://langliu.github.io/posts/windows-use-7zip-batch-zip/Windows 下使用7-Zip批量压缩文件夹Sat, 03 Sep 2022 00:00:00 GMT其他https://langliu.github.io/posts/github-badge/https://langliu.github.io/posts/github-badge/在 Github 的很多项目中Wed, 31 Aug 2022 00:00:00 GMT其他Toolshttps://langliu.github.io/posts/custom-element/https://langliu.github.io/posts/custom-element/在 Custom Elements 中，我们可以根据是否继承基本 HTML 元素，可以将自定义元素分为两类Mon, 29 Aug 2022 00:00:00 GMTHTMLWeb ComponentsJavaScripthttps://langliu.github.io/posts/web-component-beginner/https://langliu.github.io/posts/web-component-beginner/Web Components 提供了基于原生支持的、对视图层的封装能力，可以让单个组件相关的 javaScript、css、html 模板运行在以 html 标签为界限的局部环境中，不会影响到全局，组件间也不会相互影响。  再简单来说：就是提供了我们自定义标签的能力，并且提供了标签内完整的生命周期。Sun, 28 Aug 2022 00:00:00 GMTJavaScriptWeb ComponentsJavaScripthttps://langliu.github.io/posts/how-array-is-array/https://langliu.github.io/posts/how-array-is-array/近日被问到一个问题：在 JavaScript 中如何判断一个数组是数组？。在听到这个问题的时候我就在想有那些方式，在我们常用的类型判断中可以通过 `typeof` 或 `instanceof` 来进行类型判断。Fri, 11 Mar 2022 00:00:00 GMTJavaScriptJavaScript