logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

【AI解读源码系列】ant design mobile——Space间距

本文解读了antd-mobile的Space组件实现。该组件通过CSS变量(--gap等)控制子元素间距,支持水平/垂直排列、换行和对齐方式。核心实现包括:1)合并props并注入原生属性;2)用flex布局处理不同方向;3)通过margin/padding组合和负边距控制间距;4)使用CSS变量灵活控制间隙大小。组件采用inline-flex布局,通过包裹子项并设置flex:none保证布局稳定

#前端#javascript#前端框架
【AI解读源码系列】ant design mobile——Space间距

本文解读了antd-mobile的Space组件实现。该组件通过CSS变量(--gap等)控制子元素间距,支持水平/垂直排列、换行和对齐方式。核心实现包括:1)合并props并注入原生属性;2)用flex布局处理不同方向;3)通过margin/padding组合和负边距控制间距;4)使用CSS变量灵活控制间隙大小。组件采用inline-flex布局,通过包裹子项并设置flex:none保证布局稳定

#前端#javascript#前端框架
【AI解读源码系列】ant design mobile——Divider分割线

本文解析了antd-mobile的Divider组件实现原理。该组件支持横向/竖向分割线,内容可居左/右/中显示。通过flex布局和伪元素实现分割线效果:横向使用flex布局,伪元素绘制线条;竖向直接使用border-left实现。内容位置通过flex的max-width控制间距。组件采用props合并机制,支持原生属性透传,使用classnames动态生成类名实现样式切换。关键点包括:1)参数合

#javascript#前端#react.js
【AI解读源码系列】ant design mobile——Avatar头像

本文解析了antd-mobile的Avatar组件实现流程。核心步骤包括:合并默认props并预处理图片地址;使用Image组件渲染头像,设置统一的fallback和placeholder;Image组件自动处理空src或加载失败情况;Fallback组件提供默认SVG头像,并支持memo优化和自定义。整个过程将复杂逻辑封装在Image组件中,Avatar组件主要实现属性处理和视图渲染。文章还指出

#前端#react.js#前端框架
【AI解读源码系列】ant design mobile——Image图片

本文解读了antd-mobile的Image组件实现流程,重点分析了其懒加载机制。组件通过参数合并、状态管理、事件处理等步骤实现图片加载功能,其中懒加载由LazyDetector通过IntersectionObserver实现。当图片进入视口时触发加载,优化了页面性能。文章详细解析了组件初始化、状态判断、图片显示逻辑等关键环节,并展示了如何通过useInViewport钩子实现懒加载检测。这种AI

#react.js#前端
【AI解读源码系列】ant design mobile——Button按钮

本文解读了antd-mobile的Button组件实现流程。主要包含:1)定义props类型和默认参数;2)合并默认和用户参数;3)处理loading与disabled状态;4)管理原生DOM引用;5)增强异步事件处理;6)动态渲染按钮结构;7)灵活的样式管理。组件亮点包括优秀的异步loading体验、一体式props注入、CSS变量支持、原生DOM操作兼容等。通过AI辅助解读组件源码,能有效提升

#前端#javascript#react.js
CSR秒开有可能么?(附AI驱动学习实践推理过程)

本文探讨了一种通过快照方案提升CSR应用首屏加载速度的创新方法。文章分析了SSR实现秒开的原理,并指出CSR应用因依赖JS资源加载而导致的性能瓶颈。作者受淘宝闪购启发,提出了一种将页面DOM存入localStorage的快照方案:首次访问时存储页面快照,后续访问时优先渲染快照,待真实DOM加载完成后再替换。实践表明,该方案配合HTML缓存可将页面渲染时间缩短至250ms左右。文章还指出了需要解决的

#人工智能#学习#javascript +1
解读Ant Design X API流式响应和流式渲染的原理

AI是未来世界的趋势,的出现让在国内构建更多的大模型出现了更多的可能。而从前端出发,团队最近很有意思,基于这个背景,提供了一套面向构建平台化产品的组件。本篇结合的、api来分析。仔细看一下官方文档的内容,发现篇幅并不多,对比市面上比较多的,核心增加了以流的形式进行片段式响应的能力。核心能力需要在入参中传递,即可开启流式响应的能力,直接在api的callback中处理渲染逻辑即可,那我们看一下源码,

文章图片
#前端#前端框架
彻底搞懂OAuth2.0第三方授权免登原理

OAuth 2.0是一个授权框架,允许第三方应用程序获取对资源拥有者(例如,用户)资源的有限访问权限,而不需要向第三方暴露资源拥有者的凭据(通常是一个密码)。这种授权通常用于允许用户让一个应用程序对另一个系统进行安全访问,通常用于“登陆”的场景。免登(免密码登录)原理在OAuth 2.0框架中可以通过几种不同的grant类型实现,最常见的是使用“授权码”(Authorization Code)流程

文章图片
#前端
给我两分钟,让我教会你Typeorm联表查询

表和表之间都会有关联关系,在Nest项目中我们应该如何联表查询返回数据给客户端呢?// 文件目录: src/entities/user.entity.tsid: string;

文章图片
#前端#状态模式
    共 12 条
  • 1
  • 2
  • 请选择