前端技术文章

  • Vuelidate条件验证:登录注册表单共用方案
    Vuelidate条件验证:登录注册表单共用方案
    本文介绍如何在Vue3中使用Vuelidate对同一表单(如模态框中的登录/注册切换界面)进行动态、分场景的字段验证,重点解决email和password等共享字段在不同模式下验证逻辑复用与扩展的问题。
    文章 · 前端   |  1个月前  |   268浏览 收藏
  • 隐藏类优化JS对象属性访问效率方法
    隐藏类优化JS对象属性访问效率方法
    JavaScript引擎通过隐藏类优化对象属性访问,关键在于保持对象结构稳定:统一初始化顺序、避免动态增删属性、优先使用字面量工厂函数,并将高频属性置于实例自身而非原型。
    文章 · 前端   |  1个月前  |   118浏览 收藏
  • 子类重写父类流式属性引发的漏洞怎么解决
    子类重写父类流式属性引发的漏洞怎么解决
    子类重写父类访问器属性时必须成对定义get/set,否则读取返回undefined、写入仍触发逻辑,破坏数据一致性;应完整重写或显式兜底,并通过测试验证描述符完整性。
    文章 · 前端   |  1个月前  |   134浏览 收藏
  • SCSS自增变量实现计数器与序列动画技巧
    SCSS自增变量实现计数器与序列动画技巧
    SCSS变量不能自增,真正的动态计数依赖CSS原生counter-reset和counter-increment;@for循环仅生成静态规则,而CSS计数器在渲染时实时计算并自动重排。
    文章 · 前端   |  1个月前  |   477浏览 收藏
  • 路由懒加载实现组件按需预下载,核心逻辑提前缓存方法
    路由懒加载实现组件按需预下载,核心逻辑提前缓存方法
    路由懒加载本身不支持预下载,但可通过webpackPrefetch(空闲时静默预加载)或webpackPreload(用户交互时高优先级预加载)实现按需预下载,结合行为预测与缓存策略提升体验。
    文章 · 前端   |  1个月前  |   212浏览 收藏
  • CSS实现placeholder动画效果详解
    CSS实现placeholder动画效果详解
    使用CSS::placeholder与动画结合可实现动态输入提示效果。1.通过::placeholder设置占位符样式,支持颜色、字体等基础属性,并添加过渡效果;需加厂商前缀提升兼容性。2.利用label模拟placeholder,结合:focus与:valid状态实现上浮缩放动画,形成标签式提示。3.配合JavaScript控制类名变化,触发placeholder透明度过渡,实现淡出效果,增强动效连贯性。4.注意::placeholder不支持transform动画,复杂效果需依赖额外HTML结构;确保
    文章 · 前端   |  1个月前  |   CSS 动画 402浏览 收藏
  • 等高列布局实现方法有哪些
    等高列布局实现方法有哪些
    现代HTML布局中,实现等高列唯一推荐display:flex和display:grid;flex需父容器有明确高度(如min-height)且子项不覆盖align-items:stretch,grid需合理设置grid-template-rows或grid-auto-rows,避免table-cell等语义错误或hack方案。
    文章 · 前端   |  1个月前  |   271浏览 收藏
  • Float64Array 保持双精度一致性方法
    Float64Array 保持双精度一致性方法
    Float64Array本身不保证双精度一致性,关键在于数据表示、传输和运算逻辑三者对齐:需统一遵循IEEE754-2008标准,优先采用二进制传输(如ArrayBuffer),避免JSON;运算应通过WebAssembly统一数学库或严格控制舍入;内存操作须显式管理字节对齐与视图一致性。
    文章 · 前端   |  1个月前  |   222浏览 收藏
  • Flex布局与Grid布局怎么选?一维vs二维布局对比
    Flex布局与Grid布局怎么选?一维vs二维布局对比
    Flex适用于一维布局(单行/列对齐、分布、顺序调整),Grid专用于二维网格(行列同时控制);二者分工明确,常嵌套使用——Grid作外层区域划分,Flex处理内部细节对齐。
    文章 · 前端   |  1个月前  |   474浏览 收藏
  • CSS3元素倾斜变形技巧及skew设置方法
    CSS3元素倾斜变形技巧及skew设置方法
    skew()参数顺序与直觉相反:ax影响垂直错切,ay影响水平错切;推荐用skewX()/skewY()显式控制,注意变换顺序、热区偏移及兼容性问题。
    文章 · 前端   |  1个月前  |   376浏览 收藏
  • HTML IndexedDB离线存储教程
    HTML IndexedDB离线存储教程
    IndexedDB本身不是离线存储,关网白屏主因是ServiceWorker未注册或未缓存HTML;indexedDB.open()报错多因HTTPS缺失、无用户交互、隐私模式、非法库名;需结合SW缓存与状态同步机制保障离线可用性。
    文章 · 前端   |  1个月前  |   207浏览 收藏
  • 响应式卡片组怎么制作?
    响应式卡片组怎么制作?
    用CSSGrid实现响应式卡片组,移动端单列、768px起双列、1024px起三列;采用auto-fit+minmax保证弹性列数,gap替代margin确保间距可靠,卡片内用flexcolumn+min-height+flex:1实现等高与底部对齐,图片用picture/aspect-ratio/宽高属性防抖动和CLS,卡片整体加padding提升触控性,并添加role="list"/"listitem"保障无障碍。
    文章 · 前端   |  1个月前  |   237浏览 收藏
  • HTML原生约束验证大全
    HTML原生约束验证大全
    setCustomValidity()是唯一能覆盖默认错误文案并影响提交性的方法;必须在input和blur事件中每次都先调用setCustomValidity('')再判断设错,否则错误状态持续存在。
    文章 · 前端   |  1个月前  |   327浏览 收藏
  • 表单只读状态CSS样式设置方法
    表单只读状态CSS样式设置方法
    :read-only和:read-write伪类仅响应HTML的readonly属性(非JS属性),仅对input/textarea原生生效,contenteditable需验证,disabled元素不匹配;:read-only元素仍可聚焦和提交,而:disabled彻底禁用交互;IE和旧Safari不支持,需@supports或属性选择器兜底。
    文章 · 前端   |  1个月前  |   115浏览 收藏
  • 表单性能测试及响应时间测量方法
    表单性能测试及响应时间测量方法
    表单性能测试的核心是模拟用户提交行为并测量端到端响应时间,需通过识别关键表单、定义响应时间等指标、选用浏览器开发者工具或JMeter等负载工具、模拟真实用户操作、处理动态数据与会话、分析网络与客户端耗时,并在不同并发下测试以发现瓶颈,常见挑战包括动态令牌、异步提交和第三方依赖,而工具选择应综合协议支持、脚本能力、并发规模、报告功能及团队技能,最终确保测试结果真实反映系统性能,完整覆盖从用户操作到服务器响应的全过程。
    文章 · 前端   |  1个月前  |   226浏览 收藏
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
  • Golang深入理解GPM模型
    Golang深入理解GPM模型
    Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
    474次学习
查看更多
AI推荐
  • ljg-skills -
    ljg-skills
    ljg-skills 是李继刚开源的 AI 技能与提示词集合,面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板,适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
    4427次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    4079次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    4064次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    4253次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    4223次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码