前端阅读 31382023年12月5日 09:51iframe页面通信 - iframe 页面如何传递数据当我们的Web页面需要复用现有网站的页面时,我们通常会考虑代码层面的抽离引用,但是对于一些过于复杂的页面,通过iframe嵌套现有的网站页面也是一种不错的方式。虽然对于用户而言,看到的页面其实是一个整体,但是本质上是两个甚至多个页面的组装,那么页面跟页面之间的交互就避免不了相互通信。iframe 页面之间的通信主要是通过监听页面的全局 `message`事件,然后其他页面通过 `postMessa前端
前端阅读 59092023年9月5日 11:58基于React实现:弹窗组件与Promise的有机结合弹窗在现代应用中是最为常见的一种展示信息的形式,二次确认弹窗是其中最为经典的一种。当我们在React,Vue这种数据驱动视图的前端框架中渲染弹窗基本是固定的使用形式。使用方式:创建新的弹窗组件,在需要弹窗的地方引用并且需要在外层维护弹窗组件的显示/隐藏状态。这只是庞大项目中一处需要弹窗的地方,如果项目中存在N个需要弹窗的场景,我们都需要将上述步骤重复一次。这会让我们的项目组件变得臃肿冗余。React前端
服务端阅读 61702024年4月8日 00:29NestJS 如何实现事件溯源模式 Event Sourcing事件溯源(EventSourcing)是一种软件架构模式,主要用于捕获系统中发生的状态变化,作为一系列不可变事件来存储。这些事件会以时间顺序排列,可以用来重现或查询系统的状态。这种模式特别适合于复杂的业务逻辑和高要求的审核跟踪环境。在此教程中,我们将介绍如何在NestJS框架中实现事件溯源模式。实现步骤一、建立事件存储事件溯源的核心是事件存储(EventStore),这是一个用于持久化事件的数据库NestJS
前端阅读 82802023年5月21日 19:24Tailwindcss 配置检查器 - 可视化查看tailwindcss config最终效果tailwindcss框架为我们提供了大量默认的类和属性,而且开发者也能够自定义类和配置。对于初学者来说,这些配置其实是比较复杂的,这也是tailwindcss最大的入手成本,开发者的记忆负担和心智负担也都比较大。有没有办法能够直观的看到项目中实际有效的类和属性呢?工具NPM包tailwind-config-viewerhttps://npm.devtool.tech/tailwind-conCSS前端Tailwind CSS
前端阅读 65442023年5月28日 01:26基于React创建重叠头像组件,深入理解CSS重叠样式最近项目有个新需求,需要把用户的头像水平排列并且重叠。本来以为挺麻烦的,刚开始还想着要用JS去计算每一个头像需要位移的距离。其实这个需求只需要一行代码就能搞定。最终的效果图如下:效果图实现方案首先定义HTML代码结构importReactfrom"react";import"./index.less";constavatars=["<https://upload.jianshu.io/uCSSReact
前端阅读 9506月6日 21:11AI Agent 实战教程 05:RAG 如何增强 Agent理解 RAG 如何让 Agent 使用外部知识,掌握检索、Embedding、上下文注入和引用控制。RAGEmbedding
前端阅读 50632024年5月10日 17:56Recoil 如何优雅高效地重置和恢复某个状态Recoil是一个为React提供状态管理的库,它通过原子(Atoms)和选择器(Selectors)的概念让状态管理变得更加直观和模块化。在某些情况下,我们可能需要将Recoil的状态(atom或selector)重置为其初始值。我们将探索如何使用Recoil优雅高效地重置和恢复状态。基础概念在深入了解重置和恢复状态之前,让我们快速回顾一下Recoil的几个基本概念:Atom:Atom是Rec ReactRecoil
前端阅读 1256月6日 22:32AI Agent 实战教程 12:如何设计稳定的工具系统围绕工具注册、schema、参数校验、风险等级、错误格式和返回值设计,构建稳定可控的 Agent 工具系统。AI AgentTool Calling