乐闻个人主页 - 乐闻世界

乐闻

TA的文章

React 发布订阅模式最佳实践：借助 mitt 实现组件解耦

发布订阅（Pub/Sub）模式是一种常见的设计模式，用于解耦组件之间的通信。在React中，组件间通信通常通过props或Context实现，但当应用复杂时，使用事件总线（EventBus）会更加灵活。mitt是一个轻量级的事件库，非常适合实现发布订阅模式。什么是mitt？mitt是一个极简的事件发射器（eventemitter），体积小（不到200字节），API简单，支持TypeScript。它

AI Agent 实战教程 20：从 Demo 到生产系统的落地清单

总结 AI Agent 从 Demo 到生产的检查清单，覆盖目标边界、工具、权限、状态、评测、日志和运营。

前端快速入门Koa.js

插件机制是目前非常流行的拓展能力的设计方式，Koa框架是基于插件机制封装出来的一个Node HTTP框架，我将简单记录一下Koa的插件机制以及丰富的插件。

React 科学合理使用 Icon

React如何科学合理的使用Icon一、React使用IconParkIconparkIcon列表依赖包安装npminstall@icon-park/reactIcon组件使用importReact,{Component}from'react';import{Shield}from'@icon-park/react';exportdefaultclassIconex

CSS 伪类与伪元素

伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和c

AI Agent 实战教程 02：核心架构与运行循环

拆解 AI Agent 的运行循环：理解任务、制定计划、调用工具、观察结果、修正策略。

在前端项目中如何启动 ESLint 校验

编写一致、没有错误、风格统一的代码是提高项目质量和团队协作效率的关键。ESLint是一款强大的静态代码检查工具，它帮助开发者发现代码中的问题，并且能够按照一定的规则来格式化代码。本文将通过简单的步骤教你如何在前端项目中启动ESLint校验。实现步骤第一步：安装ESLint在项目的根目录下打开终端，执行以下命令来安装ESLint：npminstalleslint--save-dev或者使用yarn

TypeScript的类型推断与类型断言：深度解析与应用场景

在TypeScript开发过程中，类型推断（TypeInference）和类型断言（TypeAssertion）是两个重要且频繁使用的概念。本文将分别对这两个概念进行深入介绍，并通过实例讨论它们在实践中的应用。什么是类型推断类型推断是TypeScript根据变量或表达式的上下文信息自动推测出的类型。类型推断通常在初始化变量和成员，设置参数默认值，或者根据函数返回值时发生。比如这个例子：letx=3

分治思想在排序算法中的应用 - 快速排序&归并排序

前言排序算法在编程中是最简单最基础的算法，同时快速排序和归并排序都是通过递归调用的方式进行排序的，对于递归而言，比较不好理解。记录一下快速排序和归并排序的Javascript代码实现以及两种算法的相同点与差异性。快速排序functionquickSort(arr){if(arr.length=1){returnarr;}constmid=Math.floor(arr.length/2);const

优化React应用性能：使用React.lazy和Suspense实现代码分割

当我们构建大型React应用时，随着功能的增加，打包后的JavaScript文件往往会变得非常庞大。这将导致用户在初次访问应用时需要等待长时间的页面加载。幸运的是，React提供了一种简洁的解决方案来优化这一问题：React.lazy和Suspense。本文将深入介绍它们的用法，并通过实际案例来演示如何应用这两个强大的特性。React.lazy简介React.lazy是React官方提供的一个内置

Koa 快速搭建 Web 服务

Koa快速搭建Web服务创建项目文件夹，并系统终端切到文件夹npminit-ynpminstallkoa写一个最简单的web项目```javascript//引入koaconstKoa=require('koa');//初始化一个koa实例constapp=newKoa();//处理接口请求app.use(async(ctx,next)={ctx.body='levenx`sworld'})app

AI Agent 实战教程 05：RAG 如何增强 Agent

理解 RAG 如何让 Agent 使用外部知识，掌握检索、Embedding、上下文注入和引用控制。

TailwindCSS 如何修改 SVG 的颜色

SVG（ScalableVectorGraphics）对于现代网页设计中非常重要，SVG图像由于其可缩放性、清晰度和文件大小小的特点，变得越来越受欢迎。而TailwindCSS，作为一个实用性第一的CSS框架，它可以帮助我们以一种高效且简洁的方式对网站进行样式设计。但是，你可能会遇到一个问题：如何在TailwindCSS中修改SVG图像的颜色呢？这篇教程中将通过简单的步骤来展示如何在Tailwin

基于 NestJS 操作 TypeORM 中的多对多 ManyToMany

TypeORM是一个在TypeScript和JavaScript(ES7,ES6,ES5)中提供了许多开箱即用特性的ORM，它能够改善我们处理数据库操作的效率与可维护性。在复杂的应用开发过程中，数据间的关系处理显得尤其重要。今天我们将在NestJS中探索TypeORM的ManyToMany（多对多）关系，这是一种常见且强大的数据模型关系。在建立应用程序时，我们通常需要处理大量的增删查改（CRUD）

AI Agent 实战教程 19：部署、限流与成本优化

理解 AI Agent 上线后的部署形态、限流策略、并发控制、模型成本、缓存和降级方案。

React 如何使用 Recoil 实现状态共享

React状态管理一直是一个让人头疼的问题，随着应用的增长，组件之间共享状态变得越来越复杂。此时Recoil就出现了，它是一个为React应用设计的状态管理库，它提供了一种简单和高效的方式来管理和共享状态。优势原子化状态：Recoil将状态定义为一系列的“原子”，这些原子状态可以在应用的任何组件中被读取和更新，而不需要考虑组件层次结构。派生状态：可以创建基于原子或其他派生状态计算得出的状态，这些

TailwindCSS 支持文本文字超长溢出截断、文字文本省略号

文本文字超长截断并自动补充省略号，这是前端日常开发工作中常用的样式设置能力，文字超长截断主要分为单行超长截断和多行超长截断。本文通过介绍基本CSS样式、tailwindcss类设置两种基础方式来实现文字超长截断。TailwindCSS设置单行文字超长截断tailwindcss多个基础类组装<divclass="overflow-ellipsisoverflow-hiddenwhitesp

在前端项目中开始使用 TailwindCSS

TailwindCSS近年来在前端圈非常流行，它摆脱了原有的CSS限制，以灵活实用为卖点，用户通过各种class组合即可构建出漂亮的用户界面。对于初学者而言，可能需要一些上手成本，一旦掌握实用技巧后，TailwindCSS会是我们开发工作中的出鞘利刃。TailwindCSS开发期间碰到过TailwindCSS相关的各种问题。想着把TailwindCSS的使用技巧和踩坑经验记录下来，分享给

零基础入门 Nestjs 开发教程

NestJS是一个用于开发高效、可扩展的Node.js服务器端应用程序的框架。其优雅的TypeScript支持和深度集成的系统模块，使得开发复杂的后端服务变得前所未有的简单。在这篇文章中，我们将介绍NestJS的基础知识，帮助你快速入门。准备工作以下准备工作是nestjs运行的基础环境，如果你已经学习或了解了nodejs相关的知识以及开发设备已经成功安装了Node环境和开发IDE，请忽略这部分内容

「数据结构」树的遍历

functiondfs(root){//dosthdfs(root.left);dfs(root.right);}functiondfs(root){dfs(root.left);//dosthdfs(root.right);}functiondfs(root){dfs(root.left);dfs(root.right);//dosth}...

TA的教程专栏

Agent Skills 精选资源库

系统收集和整理当前流行的 Agent Skills，围绕技能定位、适用场景、安装使用、工作流设计、最佳实践和案例实践展开。后续将根据指定 skill 清单逐篇补充内容。

AI Agent 实战教程：从原理到工程落地

系统学习 AI Agent 的核心概念与工程实践，覆盖 Agent 架构、Tool Calling、RAG、Memory、多 Agent 协作、MCP、安全授权与真实任务助手案例。

TailwindCSS 使用指南

Tailwind CSS 是一个流行的 CSS 工具库，它提供了一系列预定义的 CSS 类，可以帮助您轻松地创建漂亮的用户界面。本教程将帮助您深入了解 Tailwind CSS 的高级功能和技术，以帮助您更好地利用这个强大的工具库。在本教程中，您将学习到：如何使用 Tailwind CSS 的主题和变量来自定义外观和样式；如何在 Tailwind CSS 中配置和使用插件来扩展其功能；如何在 Tailwind CSS 中使用 JS 钩子和样式函数来创建动态样式；如何在 Tailwind CSS 中创建响应式布局和样式；如何在 Tailwind CSS 中使用 PurgeCSS 来优化和精简 CSS。本教程适合那些已经有一定 Tailwind CSS 开发经验，并想要深入了解其高级功能和技术的开发人员。无论您是初学者还是有一定经验的 Tailwind CSS 开发人员，本教程都将为您提供宝贵的学习资源和实践经验。让我们开始您的 Tailwind CSS 进阶之旅吧！

Typeorm 使用指南

TypeORM 是一个流行的 TypeScript ORM（对象关系映射）库，它可以帮助您轻松地将 TypeScript 类映射到关系型数据库表。本教程将帮助您深入了解 TypeORM 的高级功能和技术，以帮助您更好地利用这个强大的库。在本教程中，您将学习到：如何使用 TypeORM 中的高级查询和过滤功能来查询和操作数据库；如何使用 TypeORM 中的实体继承和关系映射来创建复杂的数据模型；如何使用 TypeORM 中的迁移和数据填充来管理数据库模式和数据；如何在 TypeORM 中使用存储过程和触发器来扩展数据库功能；如何在 TypeORM 中使用多数据库和分布式事务来管理复杂的应用程序。本教程适合那些已经有一定 TypeORM 开发经验，并想要深入了解其高级功能和技术的开发人员。无论您是初学者还是有一定经验的 TypeORM 开发人员，本教程都将为您提供宝贵的学习资源和实践经验。让我们开始您的 TypeORM 进阶之旅吧！

如何打造属于自己的React组件库

随着组件化开发成为前端开发的主流，拥有一套定制化的React组件库变得极其重要。本系列教程将指导你如何设计、开发和维护一个React组件库，不仅满足项目需求，而且易于共享和复用。我们将从React组件的基础知识开始，逐步讲解如何构建可复用组件、如何管理组件状态和生命周期、以及如何通过Prop Types和TypeScript进行类型检查。此外，你还将学习到如何利用Storybook来展示组件、使用Jest和Enzyme进行单元测试，以及如何将你的组件库发布到npm。通过本系列教程的学习，你将获得创建自己React组件库的全部技能，为你的开发工作带来前所未有的效率和乐趣。

Mongoose 使用指南

在本教程中，我们将逐步探索Mongoose——一个在Node.js环境下与MongoDB数据库协同工作的强大库。从基本概念的铺垫到实用技巧的深度剖析，本系列覆盖了Schema设计、数据类型定义、模型创建、查询优化、插件扩展等核心主题。你将学习如何利用Mongoose的Schema来定义数据结构，实现数据验证和类型转换，以及如何通过模型进行数据的增删改查操作。此外，教程将深入Mongoose的高级特性，包括但不限于索引管理、聚合框架、事务处理和数据迁移。我们将通过丰富的示例和练习，教你如何运用Mongoose来处理复杂查询、关联数据以及性能调优。随后，本系列教程将深入讨论更高级的特性，如中间件（pre和post hooks）、数据校验、虚拟属性和实例方法，以及如何使用聚合管道进行复杂查询。此外，我们将详细介绍如何处理关系型数据，在Mongoose中实现文档的嵌入和引用，以及如何优雅地处理这些关系。为了将理论与实践相结合，每一部分内容都包含了逐步的代码示例和实战小项目，帮助你更好地理解和运用Mongoose的功能。我们还会讨论性能调优、错误处理和最佳实践，以确保你能够构建既健壮又高效的Node.js应用。

CSS 入门指南

CSS 是一种用于描述文档样式和布局的样式表语言，它是 Web 开发中不可或缺的一部分。本教程将帮助您从零开始学习 CSS，了解其基本概念和语法，并逐步深入学习其高级特性和实践技巧。在本教程中，您将学习到： CSS 基础知识，如选择器、盒模型、布局等； CSS 颜色、字体、背景和边框等样式属性的使用； CSS 媒体查询和响应式设计的实现； CSS 动画和过渡的实现技巧； CSS 预处理器，如 Sass、Less 的使用； CSS 框架，如 Bootstrap、Tailwind CSS 的使用。本教程适合那些想要从零开始学习 CSS 的初学者。无论您是 Web 开发新手还是有一定经验的开发人员，本教程都将为您提供宝贵的学习资源和实践经验。让我们开始您的 CSS 入门之旅吧！

React 入门宝典

React 是一个流行的 JavaScript 库，用于构建大规模、高性能的 Web 应用程序。本教程将帮助您从 React 的基础知识入门开始，逐步深入掌握 React 的高级概念和技术，以成为一名优秀的 React 开发人员。在本教程中，您将学习到： React 的基础概念和核心原则，如组件、Props、State、生命周期等；如何使用 JSX 语法编写 React 组件和模板；如何使用 React 的事件处理、表单处理、样式管理等功能；如何使用 React Router 实现单页应用程序；如何使用 Redux 进行状态管理和数据流控制；如何使用 React 的高级技术，如 Hooks、Context、Portal 等。本教程适合那些已经有一定 JavaScript 编程经验，并希望进一步学习 React 技术的开发人员。无论您是初学者还是有一定经验的 React 开发人员，本教程都将为您提供宝贵的学习资源和实践经验。让我们开始您的 React 之旅吧！

Web项目国际化通关手册

React 国际化是指将应用程序适配到不同的语言和地区的过程。在全球化时代，为您的应用程序提供多语言支持将为您的用户提供更好的用户体验，并帮助您扩大全球市场。本教程将帮助您学习如何在 React 应用程序中实现国际化。在本教程中，您将学习到： React 国际化的基本概念和原则；如何使用 React Intl 库来实现国际化；如何在 React 中处理多语言文本、日期、时间和货币等；如何在 React 中实现动态文本替换；如何在 React 中切换不同的语言版本；如何测试和调试国际化应用程序。本教程适合那些已经有一定 React 开发经验，并想要扩展其应用程序的全球化能力的开发人员。通过本教程，您将学习如何使用 React Intl 库和其他现有工具来实现国际化，从而为您的应用程序提供更广泛的用户群和更好的用户体验。让我们开始您的 React 国际化之旅吧！

Nodejs 学习指南

这是一套全面的Node.js学习指南，覆盖了从基础知识到高级应用的全部必备技能。本教程系列将带领你进入Node.js的世界，一个强大而灵活的JavaScript运行时环境，它让JavaScript不仅仅能在浏览器中运行。你将了解到如何设置Node.js环境、利用npm管理包，以及如何构建第一个应用程序。随着课程的深入，我们会探讨异步编程模型、中间件、RESTful API设计、数据库集成、安全性、测试以及性能优化等进阶主题。无论你是初学者还是有志于成为全栈开发者，本教程都将为你提供一个扎实的Node.js学习基础和实践路径。

TA的问题

TA的面试题

个人成就

获得 0 次点赞
内容获得 0 次评论
获得 0 次收藏