- 博客(48)
- 收藏
- 关注
RSS订阅原创 【前端兼容】深入实战：vw/vh 视口单位的高效应用与避坑指南
视口单位(vw/vh)是响应式布局的强大工具，能够根据屏幕尺寸自动调整元素大小。本文深入解析了视口单位的基础概念、与传统的px/%单位的区别，并提供了多种实战应用方案，包括响应式字体、全屏布局和自适应间距等。同时针对移动端工具栏、横竖屏切换等常见问题给出了解决方案，并介绍了高级应用模式和性能优化技巧。通过合理使用视口单位，开发者可以减少媒体查询使用量，提高代码可维护性，实现更精细的响应式控制。随着CSS新特性的发展，视口单位将发挥更大的作用。
2025-05-26 15:42:14
514
原创 【前端样式】手写rem + flexible.js自动适配方案全解析
本文从原理到实践详细解析了rem+flexible适配方案，手写的简化版脚本已具备核心功能，开发者可根据项目需求进行扩展。在实际应用中，建议结合Webpack等构建工具实现自动化单位转换，同时关注CSS新特性（如容器查询、:has()选择器）的发展，适时优化适配方案。
2025-05-07 11:24:34
524
原创 【前端基础】viewport 元标签的详细参数解析与实战指南
确保页面在各种设备上正确显示提供良好的用户体验提高可访问性为响应式设计奠定基础大多数情况下，这个简单的设置就能满足需求。只有在特殊情况下才需要添加其他参数，并且要谨慎使用限制用户缩放能力的选项。通过理解 viewport 的工作原理，结合响应式设计技术，可以创建在各种设备上都能完美显示的现代网页。
2025-04-27 16:02:12
830
原创 【前端样式】用 aspect-ratio 实现等比容器：视频封面与图片占位的终极解决方案
* 推荐 *//* 避免 */.card {/* 触发 GPU 加速 */的出现彻底改变了等比容器的实现方式，不仅简化了代码结构，更为响应式设计开辟了新的可能。通过本文的实践指导，希望能帮助您在项目中更高效地应用这一现代 CSS 特性。建议结合具体业务场景灵活运用，并持续关注 CSS 规范的最新发展。
2025-04-21 11:21:12
546
原创 【前端进阶】深入解析 Flexbox 布局中的 flex-shrink 与 gap 兼容性问题
导致内容压缩的底层机制与 3 种解决方案gap属性的 4 种兼容性处理方案及优劣对比响应式布局中的 5 个实用技巧现代 CSS 布局的最佳实践路线建立完善的样式校验机制使用现代构建工具链（如 Vite + PostCSS）制定团队级的 CSS 编写规范定期进行跨浏览器测试随着浏览器生态的不断发展，Flexbox 与 Grid 的配合使用将成为主流布局方案。理解这些核心问题的解决思路，将帮助开发者更好地应对未来新的 CSS 特性挑战。
2025-04-18 11:18:15
1134
原创 【前端样式】使用CSS Grid打造完美响应式卡片布局：auto-fill与minmax深度指南
通过本文的深入探讨，相信您已经掌握了使用CSS Grid创建智能响应式卡片布局的精髓。auto-fill与minmax的组合犹如布局领域的瑞士军刀，配合现代CSS的其他特性，能够打造出既美观又高性能的现代Web界面。
2025-04-16 14:51:56
398
原创 【前端样式】使用Flexbox实现经典导航栏：自适应间距与移动端折叠实战
纯CSS布局，无需额外框架自适应各种屏幕尺寸符合W3C无障碍标准文件体积小于5KB多级下拉菜单支持粘性定位（sticky）版本暗黑模式切换交互动画增强通过合理运用Flexbox的特性，我们可以用最简洁的代码实现强大的响应式效果。建议在真实项目中结合CSS Grid布局，打造更复杂的响应式系统。
2025-04-14 15:14:34
412
原创 【前端基础】深入理解 JavaScript 展开运算符：数组合并与对象浅拷贝实战指南
数组操作规范优先展开运算符进行数组合并大数据量使用concat深度展开使用flat()对象操作准则简单对象使用展开运算符嵌套对象使用深拷贝方案保持原型链需特殊处理性能优化建议避免在循环内频繁使用展开大数据操作优先考虑内存占用必要时进行性能基准测试yield 1;yield 2;yield 3;// [1,2,3]展开运算符作为现代 JavaScript 的核心特性，其应用已经渗透到开发的各个领域。深入理解展开运算符的实现原理掌握数组和对象的操作技巧规避常见的开发陷阱。
2025-04-11 11:38:59
491
原创 【前端进阶】可选链与空值合并：接口数据容错处理的最佳实践
减少约 70% 的空值判断代码量提升代码可读性和维护性降低因数据异常导致的运行时错误随着 TypeScript 4.0 对可选链的深度支持，配合类型系统可以实现更安全的代码。未来，随着可选链提案新特性（如obj?.%方法调用）的推进，前端数据容错处理将变得更加优雅高效。最佳实践口诀深层访问用问号，默认处理双问号逻辑短路要记牢，类型校验不可少错误日志配合好，稳健应用没烦恼。
2025-04-07 11:17:28
390
原创 【前端安全】模板字符串动态拼接HTML的防XSS完全指南
输入层：严格校验和过滤处理层：上下文敏感转义输出层：安全API调用环境层：CSP等HTTP安全头监测层：实时攻击监控通过结合自动转义、安全框架、严格策略和持续测试，方能在享受模板字符串便捷性的同时，筑起抵御XSS的铜墙铁壁。
2025-04-02 15:58:25
802
原创 【前端进阶】解构赋值：提升代码可读性与开发效率的利器
掌握对象解构、数组解构、参数解构等核心用法，结合默认值、重命名等高级特性，能够有效处理复杂的数据结构。随着TypeScript的普及，类型安全的解构模式将成为新的最佳实践。这种ES6引入的语法特性通过模式匹配的方式，能够快速从数组或对象中提取值并赋给变量，显著提升代码的可读性和开发效率。尤其在处理接口返回数据、函数参数处理等场景中，解构赋值展现出强大的优势。// 创建用户：Alice, 18岁，角色：member。userId: ‘abc123’ // 不同层的同名属性。// 深度解构提取关键数据。
2025-03-26 14:28:02
661
原创 【前端基础】深入理解JavaScript箭头函数：this陷阱与高效编码实践
javascript// this指向外层作用域（通常是window）// 输出"Hello, I'm undefined"解决方案：改用传统方法简写greet() {优先使用箭头函数的场景回调函数（特别是需要保持this绑定的场景）立即执行函数函数式编程操作（map/filter/reduce等）避免使用箭头函数的场景对象方法定义原型方法事件处理函数（需要访问target时）构造函数代码可读性平衡单行简单操作优先使用箭头函数复杂逻辑建议使用传统函数。
2025-03-20 09:51:37
327
原创 【前端实战】Flex布局实战：打造经典自适应导航栏（附移动端折叠方案）
在移动优先的Web开发时代，构建一个优雅的导航栏是每个前端开发者的必修课。本文将深入探讨如何利用Flex布局实现经典导航栏，重点解决间距自适应和移动端折叠两大核心需求，通过代码解析、避坑指南和实用技巧，助你打造专业级导航系统。
2025-03-17 11:04:11
384
原创 【前端进阶】WebXR开发指南：如何实现跨设备AR购物场景
在电商体验持续升级的今天，增强现实（AR）技术正在重塑线上购物方式。通过WebXR标准，我们可以构建无需安装应用、跨设备兼容的AR购物场景。本文将手把手教你实现一个基础的商品AR预览系统，支持手机、平板、AR眼镜等多终端访问。
2025-03-13 16:16:30
464
原创 【前端拓展】Canvas性能革命！WebGPU + WebAssembly混合渲染方案深度解析
为什么需要混合方案？真实场景痛点分析：传统WebGL在高频数据更新时存在CPU-GPU通信瓶颈JavaScript的垃圾回收机制导致渲染卡顿复杂物理模拟（如SPH流体）难以在单线程中实现
2025-03-11 16:17:45
540
原创 【前端进阶】Web Worker性能优化实战：解码10万条数据不卡顿
🚀 主线程保持响应，用户操作无卡顿🔧 充分利用多核CPU性能💡 需权衡Worker通信开销，适合>100ms的任务。
2025-03-07 10:24:27
918
原创 【前端进阶】大型SPA首屏加载优化全链路方案：从代码分割到SSR策略
优化阶段首屏FCP（Before）首屏FCP（After）未优化3.8s代码分割2.1sSSR + 流式渲染0.9s优化要点总结代码分割减少首屏资源体积。资源压缩与缓存提升加载效率。SSR+流式渲染消灭空白等待时间。相关技术栈。
2025-03-05 10:03:21
572
原创 【前端进阶】如何从零开始实现构建微型Svelte框架，手把手直接上代码
本文将从零实现一个具备响应式、模板编译等核心特性的迷你Svelte框架，所有代码并不多！通过这个实战项目，将深入理解现代前端框架的运行原理。
2025-03-03 10:27:55
453
原创 【前端进阶】 Vue3响应式系统与编译器优化实战解析
Vue3 带来了革命性的性能提升，其核心在于和。本文将通过代码实战，深入解析这两大核心改进！
2025-02-28 09:58:18
1144
原创 【前端进阶】手撕React Hooks核心逻辑：300行代码揭示函数式组件状态管理本质
✅ 可工作的useStateuseEffect✅ 依赖收集系统✅ 批量更新机制✅ 闭包陷阱深度分析。
2025-02-26 11:07:02
325
原创 【前端开发】能不能用Vue+Bootstrap进行项目开发？有什么需求场景需要用到的地方
结合Vue和Bootstrap可以利用Vue的强大功能来构建动态的用户界面，同时借助Bootstrap提供的丰富组件和样式来美化的应用。在这些场景中，Vue负责处理应用的逻辑和动态交互部分，而Bootstrap则提供了快速实现美观界面所需的样式和组件。使用Vue和Bootstrap的组合非常适合那些需要快速开发、响应式设计以及动态交互界面的应用场景。BootstrapVue是一个官方支持的库，它为Bootstrap组件提供了Vue特定的包装，使得它们更容易与Vue集成。可以在Vue项目的入口文件（如。
2025-02-24 11:30:35
1309
原创 微信小程序模仿快播标签云滚动特效
所以就有了兴趣，再翻了翻，先人们做的都是JQ或者原生的，貌似没有小程序端的呀。本着吃饱了撑的，就看了看部分源码，大概思路就是不断更改Style，给人一种错觉以为是动画效果。说到快播，故事肯定就不少。用过的人都知道快播首页有个标签云的特效效果，就是渐隐渐显外加上下滚动，其实还挺好看的。至于其他故事嘛，因为没有酒，所以，还是来说说代码吧~好了，话也不多说，毕竟都说程序猿挚爱是Code，直接上代码吧。
2025-02-21 10:55:27
1096
原创 【前端调试】Web开发在真机浏览器上，怎么打开console调试框？
在真机浏览器上打开开发者工具的控制台（console）调试框，可以帮助你实时查看和调试网页上的JavaScript代码、网络请求、DOM元素等。不同设备和浏览器的操作方法可能略有差异。
2025-02-20 15:20:20
930
原创 【前端ES】ECMAScript 2023 (ES14) 引入了多个新特性，简单介绍几个不为人知但却好用的方法
返回一个新的 Promise 对象和对应的 resolve/reject 函数。提供了一个机制来注册回调函数，当垃圾回收器清除注册表中的条目时调用。// 等价于 a = a && 5;提供了一种方法来格式化数字范围，并返回格式化的部分数组。提供了一种方法来格式化数字范围，并返回格式化的部分数组。允许根据索引修改数组中的单个元素，并返回新数组。返回一个新的已排序数组副本，不改变原数组。，但返回一个新的数组而不是原地操作。从数组中获取最后一个匹配元素的实例。类似，但返回匹配元素的索引。方法，但返回一个新数组。
2025-02-18 11:04:59
887
原创 【前端入门】CSS中有许多不太为人知但非常有用的属性和技巧
下面简单介绍20个这样的CSS样式示例，包括它们的用途和代码示例。CSS可以在特定场景下发挥独特的效果。控制文本区域或任何块级元素的可调整大小行为。控制替换元素内容如何适应其容器尺寸。防止分页符或列中断出现在元素内部。控制网格项目在单元格中的对齐方式。定义浮动元素周围文本环绕的形状。提醒浏览器优化指定元素的变化。给子元素添加3D空间效果。控制单词内连字符的位置。控制字体中的连接符使用。更改文本输入光标的颜色。在网格布局中创建间距。重置所有元素的样式。
2025-02-14 15:03:01
388
原创 【前端OCR】如何用paddlejs开发一个属于前端本地的OCR文本识别功能
之前出过一篇关于用tesseract纯前端实现文本识别功能的文档，经测试之后，用是能用，但识别准确率并不高，而且耗时也相对比较久。于是又找了一个paddlejs做开发测试，但是整体上来说，其实两个差不多。而且初始化过程还会相对久些，如图下面简单介绍下关于paddlejs的一些信息和基础Demo吧。官方文档：https://paddlejs.baidu.com/
2025-02-12 11:08:42
1998
1
原创 【前端进阶】简单论述weex概念以及基础入门Demo
Weex 是阿里巴巴推出的一个用于构建跨平台移动应用的框架，它允许开发者使用相同的代码库在 iOS、Android 和 Web 上运行应用。Weex 的设计理念是将现代 Web 开发技术（如 Vue.js 或 Rax）与原生应用开发的优点相结合，提供高性能和良好的用户体验。
2025-02-10 10:57:21
739
原创 【前端进阶】什么是图像归一化，在前端JS中有哪些处理方式
图像归一化是指对图像进行了一系列标准的处理变换，使之变换为一固定标准形式的过程，该标准图像称作归一化图像。在机器学习中，不同评价指标（即特征向量中的不同特征，就是所述的不同评价指标）往往具有不同的量纲和量纲单位，这样的情况会影响到数据分析的结果。为了消除指标之间的量纲影响，需要进行数据标准化处理，以解决数据指标之间的可比性。原始数据经过数据标准化处理后，各指标处于同一数量级，适合进行综合对比评价。其中，最典型的就是数据的归一化处理。
2025-02-08 09:50:52
1148
原创 【聊聊AI】DeepSeek大火的同时，简单说说每个AI平台都有哪些特色
DeepSeek 优点： 多模态能力：DeepSeek-VL能够在不丢失语言能力的情况下处理多种类型的数据，包括逻辑图、网页、公式识别、科学文献、自然图像等。 高分辨率图片输入：能够接受高达1024x
2025-02-06 10:43:29
962
原创 【前端】Electron入门开发教程，从介绍Electron到基础引用以及部分深度使用，附带常见的十个报错问题的解决方案和代码优化。
Electron 能够使用前端技术栈开发桌面应用，支持 Windows、macOS 和 Linux。使用 HTML、CSS 和 JavaScript 构建用户界面。内置了对自动更新、原生菜单和通知的支持。允许开发者使用 Node.js 的 API 和任何 npm 模块。
2025-01-26 10:19:46
1344
原创 【前端SEO】使用Vue.js + Nuxt 框架构建服务端渲染 (SSR) 应用满足SEO需求
Nuxt.js 是一个基于 Vue.js 的通用应用框架，它简化了使用 Vue 构建服务端渲染 (SSR) 应用的流程。除了 SSR 之外，Nuxt.js 还支持静态站点生成（Static Site Generation, SSG），渐进式网络应用（Progressive Web Apps, PWA），单页面应用（Single Page Application, SPA）等多种模式。以下是 Nuxt.js 的一些深度介绍和代码案例，以及其在 SEO 方面的作用。
2025-01-24 10:06:31
1291
原创 【前端+AI】介绍除Brain.js之外，还有哪些前端AI库技术可以用于不同场景
虽然不是专门针对 AI 的库，但它可以用来将繁重的计算任务（如 AI 模型推理）移到 Web Worker 中以避免阻塞主线程。TensorFlow.js 是 Google 开发的用于在浏览器和 Node.js 中运行机器学习模型和深度学习神经网络的库。ml5.js 是一个旨在使机器学习更加易于访问和包容的库，它基于 TensorFlow.js 构建，提供了更高级别的 API 来简化常见的机器学习任务。Synaptic.js 是一个用于创建和训练人工神经网络的 JavaScript 库。
2025-01-22 10:31:44
482
原创 【前端】如何依靠纯前端实现拍照获取/选择文件等文字识别OCR技术
本文仅介绍第三方依赖包Tesseract.js，Tesseract.js是一个基于网页的OCR（光学字符识别）引擎，可以识别图像中的文本并将其转换为可供计算机处理的文本数据。3-4步骤完整代码Demo如下：注意这里用了Hook写法，因为需求是获取一串数字，所以英文包可能存在把数字8识别成英文B，要做兼容。而英文包或中文包也是可选项，一般针对性强一点只获取英文数字则选择英文包，因为中文识别机制总会会相对难一点，准确率更低些。支持多框架编译，如Vue、React等，这里展示步骤为React开发。
2025-01-20 16:08:14
1752
原创 【前端进阶】在AI浪潮下前端如何结合应用于程序中，如：Brain.js创建模型
Brain.js 是一个用于JavaScript和Node.js的神经网络库，它允许开发者快速构建和训练简单的神经网络模型。这个库非常适合于想要探索机器学习但又不想深入研究数学原理的前端开发人员。Brain.js可以在浏览器环境中运行，也可以在服务器端通过Node.js运行。
2025-01-17 14:25:09
661
原创 【Javascript】介绍下从ES7到ES15的每个版本(ECMAScript)特性举例和代码Demo
随着技术不断发展，JavaScript的发展已经达到了ES15（ECMAScript 2024）。而每年都会发布新的ECMAScript版本，如未来ES16（ECMAScript 2025）、ES17（ECMAScript 2026），依此类推。并且每个新版本都会引入一些新的特性和对现有功能的改进。
2025-01-15 10:41:15
460
原创 【前端】vue入门级写法介绍和部分Demo
请注意，最后一个例子涉及到 Vue Router 的使用，这需要额外安装 vue-router 包，并且通常用于更复杂的应用程序结构中。对于初学者来说，了解如何创建和使用基本组件、数据绑定、条件渲染、列表渲染等是掌握 Vue 的关键。如果你正在使用 Vue 3，需要注意一些 API 和特性上的变化，例如 Composition API 和新的生命周期钩子。
2025-01-06 15:33:09
711
原创 【前端】react入门级写法介绍和部分Demo
自定义 Hook 是一种复用逻辑的好方法。}, [url]);这些例子涵盖了 React 应用开发中的常见模式和最佳实践。随着经验增长，会找到更多适合特定需求的写法和技巧。
2025-01-03 10:17:37
635
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人