- 博客(40)
- 收藏
- 关注
RSS订阅原创 【前端进阶】可选链与空值合并：接口数据容错处理的最佳实践
减少约 70% 的空值判断代码量提升代码可读性和维护性降低因数据异常导致的运行时错误随着 TypeScript 4.0 对可选链的深度支持，配合类型系统可以实现更安全的代码。未来，随着可选链提案新特性（如obj?.%方法调用）的推进，前端数据容错处理将变得更加优雅高效。最佳实践口诀深层访问用问号，默认处理双问号逻辑短路要记牢，类型校验不可少错误日志配合好，稳健应用没烦恼。
2025-04-07 11:17:28
315
原创 【前端安全】模板字符串动态拼接HTML的防XSS完全指南
输入层：严格校验和过滤处理层：上下文敏感转义输出层：安全API调用环境层：CSP等HTTP安全头监测层：实时攻击监控通过结合自动转义、安全框架、严格策略和持续测试，方能在享受模板字符串便捷性的同时，筑起抵御XSS的铜墙铁壁。
2025-04-02 15:58:25
714
原创 【前端进阶】解构赋值：提升代码可读性与开发效率的利器
掌握对象解构、数组解构、参数解构等核心用法，结合默认值、重命名等高级特性，能够有效处理复杂的数据结构。随着TypeScript的普及，类型安全的解构模式将成为新的最佳实践。这种ES6引入的语法特性通过模式匹配的方式，能够快速从数组或对象中提取值并赋给变量，显著提升代码的可读性和开发效率。尤其在处理接口返回数据、函数参数处理等场景中，解构赋值展现出强大的优势。// 创建用户：Alice, 18岁，角色：member。userId: ‘abc123’ // 不同层的同名属性。// 深度解构提取关键数据。
2025-03-26 14:28:02
597
原创 【前端基础】深入理解JavaScript箭头函数：this陷阱与高效编码实践
javascript// this指向外层作用域（通常是window）// 输出"Hello, I'm undefined"解决方案：改用传统方法简写greet() {优先使用箭头函数的场景回调函数（特别是需要保持this绑定的场景）立即执行函数函数式编程操作（map/filter/reduce等）避免使用箭头函数的场景对象方法定义原型方法事件处理函数（需要访问target时）构造函数代码可读性平衡单行简单操作优先使用箭头函数复杂逻辑建议使用传统函数。
2025-03-20 09:51:37
297
原创 【前端实战】Flex布局实战：打造经典自适应导航栏（附移动端折叠方案）
在移动优先的Web开发时代，构建一个优雅的导航栏是每个前端开发者的必修课。本文将深入探讨如何利用Flex布局实现经典导航栏，重点解决间距自适应和移动端折叠两大核心需求，通过代码解析、避坑指南和实用技巧，助你打造专业级导航系统。
2025-03-17 11:04:11
294
原创 【前端进阶】WebXR开发指南：如何实现跨设备AR购物场景
在电商体验持续升级的今天，增强现实（AR）技术正在重塑线上购物方式。通过WebXR标准，我们可以构建无需安装应用、跨设备兼容的AR购物场景。本文将手把手教你实现一个基础的商品AR预览系统，支持手机、平板、AR眼镜等多终端访问。
2025-03-13 16:16:30
369
原创 【前端拓展】Canvas性能革命！WebGPU + WebAssembly混合渲染方案深度解析
为什么需要混合方案？真实场景痛点分析：传统WebGL在高频数据更新时存在CPU-GPU通信瓶颈JavaScript的垃圾回收机制导致渲染卡顿复杂物理模拟（如SPH流体）难以在单线程中实现
2025-03-11 16:17:45
452
原创 【前端进阶】Web Worker性能优化实战：解码10万条数据不卡顿
🚀 主线程保持响应，用户操作无卡顿🔧 充分利用多核CPU性能💡 需权衡Worker通信开销，适合>100ms的任务。
2025-03-07 10:24:27
841
原创 【前端进阶】大型SPA首屏加载优化全链路方案：从代码分割到SSR策略
优化阶段首屏FCP（Before）首屏FCP（After）未优化3.8s代码分割2.1sSSR + 流式渲染0.9s优化要点总结代码分割减少首屏资源体积。资源压缩与缓存提升加载效率。SSR+流式渲染消灭空白等待时间。相关技术栈。
2025-03-05 10:03:21
551
原创 【前端进阶】如何从零开始实现构建微型Svelte框架，手把手直接上代码
本文将从零实现一个具备响应式、模板编译等核心特性的迷你Svelte框架，所有代码并不多！通过这个实战项目，将深入理解现代前端框架的运行原理。
2025-03-03 10:27:55
424
原创 【前端进阶】 Vue3响应式系统与编译器优化实战解析
Vue3 带来了革命性的性能提升，其核心在于和。本文将通过代码实战，深入解析这两大核心改进！
2025-02-28 09:58:18
1125
原创 【前端进阶】手撕React Hooks核心逻辑：300行代码揭示函数式组件状态管理本质
✅ 可工作的useStateuseEffect✅ 依赖收集系统✅ 批量更新机制✅ 闭包陷阱深度分析。
2025-02-26 11:07:02
306
原创 【前端开发】能不能用Vue+Bootstrap进行项目开发？有什么需求场景需要用到的地方
结合Vue和Bootstrap可以利用Vue的强大功能来构建动态的用户界面，同时借助Bootstrap提供的丰富组件和样式来美化的应用。在这些场景中，Vue负责处理应用的逻辑和动态交互部分，而Bootstrap则提供了快速实现美观界面所需的样式和组件。使用Vue和Bootstrap的组合非常适合那些需要快速开发、响应式设计以及动态交互界面的应用场景。BootstrapVue是一个官方支持的库，它为Bootstrap组件提供了Vue特定的包装，使得它们更容易与Vue集成。可以在Vue项目的入口文件（如。
2025-02-24 11:30:35
990
原创 微信小程序模仿快播标签云滚动特效
所以就有了兴趣，再翻了翻，先人们做的都是JQ或者原生的，貌似没有小程序端的呀。本着吃饱了撑的，就看了看部分源码，大概思路就是不断更改Style，给人一种错觉以为是动画效果。说到快播，故事肯定就不少。用过的人都知道快播首页有个标签云的特效效果，就是渐隐渐显外加上下滚动，其实还挺好看的。至于其他故事嘛，因为没有酒，所以，还是来说说代码吧~好了，话也不多说，毕竟都说程序猿挚爱是Code，直接上代码吧。
2025-02-21 10:55:27
1064
原创 【前端调试】Web开发在真机浏览器上，怎么打开console调试框？
在真机浏览器上打开开发者工具的控制台（console）调试框，可以帮助你实时查看和调试网页上的JavaScript代码、网络请求、DOM元素等。不同设备和浏览器的操作方法可能略有差异。
2025-02-20 15:20:20
617
原创 【前端ES】ECMAScript 2023 (ES14) 引入了多个新特性，简单介绍几个不为人知但却好用的方法
返回一个新的 Promise 对象和对应的 resolve/reject 函数。提供了一个机制来注册回调函数，当垃圾回收器清除注册表中的条目时调用。// 等价于 a = a && 5;提供了一种方法来格式化数字范围，并返回格式化的部分数组。提供了一种方法来格式化数字范围，并返回格式化的部分数组。允许根据索引修改数组中的单个元素，并返回新数组。返回一个新的已排序数组副本，不改变原数组。，但返回一个新的数组而不是原地操作。从数组中获取最后一个匹配元素的实例。类似，但返回匹配元素的索引。方法，但返回一个新数组。
2025-02-18 11:04:59
826
原创 【前端入门】CSS中有许多不太为人知但非常有用的属性和技巧
下面简单介绍20个这样的CSS样式示例，包括它们的用途和代码示例。CSS可以在特定场景下发挥独特的效果。控制文本区域或任何块级元素的可调整大小行为。控制替换元素内容如何适应其容器尺寸。防止分页符或列中断出现在元素内部。控制网格项目在单元格中的对齐方式。定义浮动元素周围文本环绕的形状。提醒浏览器优化指定元素的变化。给子元素添加3D空间效果。控制单词内连字符的位置。控制字体中的连接符使用。更改文本输入光标的颜色。在网格布局中创建间距。重置所有元素的样式。
2025-02-14 15:03:01
375
原创 【前端OCR】如何用paddlejs开发一个属于前端本地的OCR文本识别功能
之前出过一篇关于用tesseract纯前端实现文本识别功能的文档，经测试之后，用是能用，但识别准确率并不高，而且耗时也相对比较久。于是又找了一个paddlejs做开发测试，但是整体上来说，其实两个差不多。而且初始化过程还会相对久些，如图下面简单介绍下关于paddlejs的一些信息和基础Demo吧。官方文档：https://paddlejs.baidu.com/
2025-02-12 11:08:42
1427
原创 【前端进阶】简单论述weex概念以及基础入门Demo
Weex 是阿里巴巴推出的一个用于构建跨平台移动应用的框架，它允许开发者使用相同的代码库在 iOS、Android 和 Web 上运行应用。Weex 的设计理念是将现代 Web 开发技术（如 Vue.js 或 Rax）与原生应用开发的优点相结合，提供高性能和良好的用户体验。
2025-02-10 10:57:21
682
原创 【前端进阶】什么是图像归一化，在前端JS中有哪些处理方式
图像归一化是指对图像进行了一系列标准的处理变换，使之变换为一固定标准形式的过程，该标准图像称作归一化图像。在机器学习中，不同评价指标（即特征向量中的不同特征，就是所述的不同评价指标）往往具有不同的量纲和量纲单位，这样的情况会影响到数据分析的结果。为了消除指标之间的量纲影响，需要进行数据标准化处理，以解决数据指标之间的可比性。原始数据经过数据标准化处理后，各指标处于同一数量级，适合进行综合对比评价。其中，最典型的就是数据的归一化处理。
2025-02-08 09:50:52
1076
原创 【聊聊AI】DeepSeek大火的同时，简单说说每个AI平台都有哪些特色
DeepSeek 优点： 多模态能力：DeepSeek-VL能够在不丢失语言能力的情况下处理多种类型的数据，包括逻辑图、网页、公式识别、科学文献、自然图像等。 高分辨率图片输入：能够接受高达1024x
2025-02-06 10:43:29
884
原创 【前端】Electron入门开发教程，从介绍Electron到基础引用以及部分深度使用，附带常见的十个报错问题的解决方案和代码优化。
Electron 能够使用前端技术栈开发桌面应用，支持 Windows、macOS 和 Linux。使用 HTML、CSS 和 JavaScript 构建用户界面。内置了对自动更新、原生菜单和通知的支持。允许开发者使用 Node.js 的 API 和任何 npm 模块。
2025-01-26 10:19:46
1258
原创 【前端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
1219
原创 【前端+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
449
原创 【前端】如何依靠纯前端实现拍照获取/选择文件等文字识别OCR技术
本文仅介绍第三方依赖包Tesseract.js，Tesseract.js是一个基于网页的OCR（光学字符识别）引擎，可以识别图像中的文本并将其转换为可供计算机处理的文本数据。3-4步骤完整代码Demo如下：注意这里用了Hook写法，因为需求是获取一串数字，所以英文包可能存在把数字8识别成英文B，要做兼容。而英文包或中文包也是可选项，一般针对性强一点只获取英文数字则选择英文包，因为中文识别机制总会会相对难一点，准确率更低些。支持多框架编译，如Vue、React等，这里展示步骤为React开发。
2025-01-20 16:08:14
1591
原创 【前端进阶】在AI浪潮下前端如何结合应用于程序中，如：Brain.js创建模型
Brain.js 是一个用于JavaScript和Node.js的神经网络库，它允许开发者快速构建和训练简单的神经网络模型。这个库非常适合于想要探索机器学习但又不想深入研究数学原理的前端开发人员。Brain.js可以在浏览器环境中运行，也可以在服务器端通过Node.js运行。
2025-01-17 14:25:09
620
原创 【Javascript】介绍下从ES7到ES15的每个版本(ECMAScript)特性举例和代码Demo
随着技术不断发展，JavaScript的发展已经达到了ES15（ECMAScript 2024）。而每年都会发布新的ECMAScript版本，如未来ES16（ECMAScript 2025）、ES17（ECMAScript 2026），依此类推。并且每个新版本都会引入一些新的特性和对现有功能的改进。
2025-01-15 10:41:15
423
原创 【前端】vue入门级写法介绍和部分Demo
请注意，最后一个例子涉及到 Vue Router 的使用，这需要额外安装 vue-router 包，并且通常用于更复杂的应用程序结构中。对于初学者来说，了解如何创建和使用基本组件、数据绑定、条件渲染、列表渲染等是掌握 Vue 的关键。如果你正在使用 Vue 3，需要注意一些 API 和特性上的变化，例如 Composition API 和新的生命周期钩子。
2025-01-06 15:33:09
693
原创 【前端】react入门级写法介绍和部分Demo
自定义 Hook 是一种复用逻辑的好方法。}, [url]);这些例子涵盖了 React 应用开发中的常见模式和最佳实践。随着经验增长，会找到更多适合特定需求的写法和技巧。
2025-01-03 10:17:37
601
原创 JavaScript开发中常见问题代码和相关优化Demo参考5.0
解决方案： 编写单元测试、集成测试和端到端测试，确保代码的健壮性，并使用工具如Istanbul检查测试覆盖率。问题代码： 在小型项目中引入了复杂的全局状态管理库（如Redux），增加了不必要的复杂性。解决方案： 仔细审查第三方资源的安全性和可靠性，尽量选择经过社区广泛测试和认可的库。问题代码： 前后端分离部署时，前端直接请求后端API，但没有正确配置CORS。问题代码： 一次性加载整个应用程序，即使用户只访问了其中的一小部分功能。问题代码： 安装了大量不必要的依赖，导致项目体积臃肿，构建时间变长。
2024-12-30 15:03:58
421
原创 JavaScript开发中常见问题代码和相关优化Demo参考4.0
解决方案： 对于SPA，可以考虑使用Next.js或Nuxt.js等框架来实施SSR，或者至少提供预渲染的内容。解决方案： 设置CI/CD管道，例如使用GitHub Actions、CircleCI等自动化测试和部署过程。解决方案： 确保API端点和函数调用是幂等的，即多次调用不会导致不同的结果。问题代码： 单页应用（SPA）缺乏服务器端渲染（SSR），影响搜索引擎优化。问题代码： 没有使用Git或其他版本控制工具来跟踪代码变化。问题代码： 应用程序仅支持单一语言，忽略了全球用户的需求。
2024-12-27 17:04:55
720
原创 JavaScript开发中常见问题代码和相关优化Demo参考3.0
解决方案： 使用Chrome DevTools等工具分析性能，并针对发现的问题进行优化。解决方案： 集成Prettier或ESLint等工具到开发流程中以自动格式化代码。解决方案： 编写清晰的注释和文档，使用工具如JSDoc生成API文档。解决方案： 使用适当的输出编码来防止XSS攻击，并验证所有用户输入。问题代码： 将API端点或其他配置信息直接写入代码中。问题代码： 没有对关键路径上的代码进行性能分析。问题代码： 不同开发者提交的代码风格不一致。问题代码： 代码没有足够的注释或说明文档。
2024-12-25 10:13:11
342
原创 JavaScript开发中常见问题代码和相关优化Demo参考2.0
解决方案： 遵循“先让它工作，再让它快速”的原则，优先保证代码的正确性和可维护性，然后根据性能分析工具的结果针对性地优化。解决方案： 建立一个持续集成（CI）环境，编写单元测试、集成测试等，以确保代码质量。问题代码： 没有为关键业务逻辑编写单元测试或其他形式的自动化测试。问题代码： 开发者花费大量时间优化尚未证明成为瓶颈的部分代码。解决方案： 避免使用全局变量，尽量使用局部变量和模块化设计。解决方案： 考虑使用更高效的数据结构或算法，例如Map。问题代码： 重复编写相似的功能逻辑。解决方案： 总是添加。
2024-12-23 16:01:29
437
原创 JavaScript开发中常见问题代码和相关优化Demo参考1.0
解决方案： 批量更新DOM，例如使用文档片段（DocumentFragment）。问题代码： 使用了特定浏览器特性而忽略了其他浏览器的支持情况。解决方案： 避免直接插入用户输入，使用文本节点或属性绑定。解决方案： 理解输出顺序，确保按预期处理宏任务和微任务。解决方案： 总是明确地声明变量以避免意外创建全局变量。问题代码： 所有代码写在一个大文件中，没有分离关注点。解决方案： 采用模块化设计，比如使用ES6模块。解决方案： 使用Polyfill或检查环境支持。解决方案： 添加适当的错误检查和处理。
2024-12-20 11:02:28
458
原创 基于VUE和JS手写的移动端H5自定义音乐播放器(直线进度条和圆形滚动进度条)
1. 先上效果图，可以嵌合在H5移动端页面，可拖拽点击颜色进度条的小白色圆圈快进~下面就是圆形的进度条哦~(请尊重劳动成果，转载请注出处~)P.S（在这里说下圆形进度条的效果，一开始也是用canvas，但是发现canvas不支持淘宝适配方案，于是想着自己写一个，思路是控制圆边的显示。后来忽然看到园友--JR93的一篇文章思路一下子彻底就打通了。用度数逐步增加来控制圆边的显示比控制周长来得好。在此感谢）
2024-12-18 11:44:01
498
原创 关于在小程序项目中使用图表插件AntV（即F2）
以前嘛从开发H5和各种图表系统被拉到来开发小程序，拿到的一个项目里面就涉及几个图表，用canvas是能实现效果，但是周期长而且还不一定好看稳定。所以嘛就上网找了相关资料。发现有Echarts为小程序专门改写的一套，但是类型不是很全，就转到了AntV这里来，阿里写的F2内容也挺全的。
2024-12-16 10:30:24
1547
原创 【前端】javaScript入门级介绍和部分Demo
本文简要介绍了JavaScript的基本语法和一些核心概念。JavaScript是一门不断发展的语言，拥有丰富的特性和活跃的社区。希望这篇博客能够帮助你建立起对JavaScript的理解，并激发你进一步探索的兴趣。如果你有任何问题或建议，请随时留言！
2024-12-13 14:23:54
936
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人